Links
🛒

Purchase Mode - Integration Docs

Purchase mode lets you execute arbitrary calldata, starting with any inserted token on any supported chain. Purchase mode is most commonly used to facilitate chain-agnostic NFT purchasing, ERC20 staking, and vaults. Purchase mode is very flexible and can easily be tailored to your use case.
Try Purchase mode here.
Please note that as of now, Purchase mode does not permit arbitrary input amounts. You must specify an exact output amount, price, of outputTokenAddress in the component's props. Brydge then automatically calculates your user's purchase cost in their insert token upon token selection.
This is perfect for dApps which set a fixed output price, such as NFT marketplaces, NFT collections, and flat deposit amount pools. dApps that want to leverage Purchase mode, but accept arbitrary deposit amounts, such as a staking pool, must create a workaround to use Brydge for now. We recommend linking the price prop to a slider component which updates as the user specifies their desired amount.
Need an editable input window? Let us know on Telegram or Discord.

Purchase Mode Quickstart

Step 1/2: Install the package and paste the below component into your app
iFrame
React Component
yarn add @brydge-network/utils
import { encodeUrl } from '@brydge-network/utils';
​
//This is a dummy calls array. You need to write custom calls to interact
//with your contract. See how to do so here: https://docs.brydge.network/integration-docs/purchase-mode-integration-docs/how-to-encode-calls-in-purchase-mode
const yourCalls = [
{
_to: "0x0000000000000000000000000000000000000003",
_value: 0,
_calldata: "0x0000000000000000000000000000000000000001",
},
];
​
const url =
'https://brydge.network/widget/' +
encodeUrl({
darkMode: true,
widgetMode: "PURCHASE",
outputTokenAddress: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174", // polygon usdc
destinationChainId: 137,
title: "Buy MY NFT",
price: 100,
iCalls: yourCalls,
backgroundColor: '#000000',
})
function App() {
return (
<div>
<iframe src={url} width={360} height={470} />
</div>
);
}
​
export default App;
yarn add @brydge-network/widget
import { BrydgeWidget } from "@brydge-network/widget";
​
​
export function yourPage() {
const provider = yourEthereumProvider();
//This is a dummy calls array. You need to write custom calls to interact
//with your contract. See how to do so here: https://docs.brydge.network/integration-docs/purchase-mode-integration-docs/how-to-encode-calls-in-purchase-mode
const yourCalls = [
{
_to: "0x0000000000000000000000000000000000000003",
_value: 0,
_calldata: "0x0000000000000000000000000000000000000001",
},
];
​
return(
<BrydgeWidget
jsonRpcEndpoints={{
1: `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
10: `https://optimism-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
137: `https://polygon-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
42161: `https://arbitrum-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
43114: `https://avalanche-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
}}
calls={yourCalls}
outputTokenAddress="0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174" // polygon usdc
price={100}
title="Buy Rocketman #22"
destinationChainId={137}
widgetMode={"PURCHASE"}
/>
)
}
​
Step 2/3: Create your calls array
​
Step 3/3: Customize your props