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
React Component
yarn add @brydge-network/utils
import { encodeUrl } from '@brydge-network/utils';
const yourCalls = [
_to: "0x0000000000000000000000000000000000000003",
_value: 0,
_calldata: "0x0000000000000000000000000000000000000001",
const url =
'' +
darkMode: true,
widgetMode: "PURCHASE",
outputTokenAddress: "0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174", // polygon usdc
destinationChainId: 137,
title: "Buy MY NFT",
price: 100,
calls: yourCalls,
backgroundColor: '#000000',
function App() {
return (
<iframe src={url} width={360} height={470} />
export default App;
yarn add @brydge-network/widget
//You need access to the private package to use the React version. Talk
//to the Brydge team here:
//to get access or get started right now with the iFrame version
import { BrydgeWidget } from "@brydge-network/widget";
export function yourPage() {
const provider = yourEthereumProvider();
const yourCalls = [
_to: "0x0000000000000000000000000000000000000003",
_value: 0,
_calldata: "0x0000000000000000000000000000000000000001",
1: `${process.env.NEXT_PUBLIC_INFURA_KEY}`,
10: `${process.env.NEXT_PUBLIC_INFURA_KEY}`,
137: `${process.env.NEXT_PUBLIC_INFURA_KEY}`,
42161: `${process.env.NEXT_PUBLIC_INFURA_KEY}`,
outputTokenAddress="0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174" // polygon usdc
title="Buy Rocketman #22"
Step 2/3: Create your calls array
Step 3/3: Customize your props