🛒
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.
.gif?alt=media&token=4f586403-3246-4c76-b664-ff3f13aea2af)
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.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