🛒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

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;

React Component

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

🧑‍💻pageHow to Encode Calls in Purchase Mode🏪pageExample Call Construction - Zora Marketplace

Step 3/3: Customize your props

🚧pageHow to Customize Props for Your Use Case