Search…
Integrate Brydge
If you run into issues at any point, reach out to our team on Discord. We're always here to help!

Brydge is in live beta. Click here to get access to the Brydge package.
With yarn:
yarn add @brydge-network/widget
With npm:
npm i @brydge-network/widget

In Typescript:
import { BrydgeWidget } from '@brydge-network/widget';
In Javascript:
var BrydgeWidget = require("@brydge-network/widget")

Paste the following React component into your site.
<BrydgeWidget
jsonRpcEndpoints={{
1: "https://mainnet.infura.io/v3/{your_infura_key}",
137: "https://polygon-mainnet.infura.io/v3/{your_infura_key}",
}}
provider={library} //imported from Web3.js or Ethers.js
outputTokenAddress="0x123..." //ERC20 token seller will receive
price={1.23} //amount of ERC20 token to list item for
calls={calls} //sequential approvals + calls needed to initiate purchase
title="Buy Rocketman #22" //displayed action + title to user
destinationChainId={137} //chainId dApp is deployed on
/>

Prop
Type
Description
jsonRpcEndpoints
String
A jsonRpcEndpoint is required for every network that you wish to accept payments from. This is used to calculate quotes for the swaps required on those chains. If your dApp already has a JSON RPC endpoint, you can pass that in the jsonRpcEndpoint prop. If you don’t yet have a JSON RPC endpoint, you can easily create a free one with services like Infura.
provider
Any
A Web3 provider is required to connect to your user’s wallet. Both the Ethers.js and web3.js provider objects are compatible with the widget, as is any EIP-1193 provider. This should be the provider that you use to connect your user’s wallet.
outputTokenAddress
String
The address of the token that the vendor is accepting as payment for the NFT
price
Number
The amount of the destination token that the NFT costs
calls
ICall[]
This represents the encoded calldata that is executed on the destination chain in order to purchase the NFT from your marketplace. Each element in the array represents a function call that will be executed on the destination chain in order. You can find a walkthrough of how to set up calls here.
title
String
Action + title of asset
destinationChainId
Number
The chainID of the dApp (whichever network the NFT is deployed on)

Prop
Type
Description
onConnectWallet
() => void
If passed, the “Connect your wallet” message will be clickable, and clicking it will trigger this handler function. This can be used to trigger your own wallet connection flow from the widget
locale
String
Specifies an explicit locale to use for the widget interface. This can be set to one of the values exported by the library in SUPPORTED_LOCALES.
width
Number | String
Specifies the width of the widget. If specified as a number, this is in pixels; otherwise, it is interpreted as a CSS data type. Recommended width is 360px. Minimum width is 300px.
dialog
HTMLElement | Null
onError
ErrorHandler
An error handler which receives any errors that occur in the widget. This can be used for collecting error metrics.
darkMode
boolean
A boolean that toggles between light and dark mode. If omitted, the widget will render in light mode.

If you run into issues at any point, reach out to our team on Discord. We're always here to help!
Copy link
On this page
Step 1: Install the Brydge Package
Step 2: Import Widget
Step 3: Embed Widget
Required props:
Optional props:
That's it! You're now set up to accept payments via Brydge