Crypto Payments
Add cross-chain crypto payments to the embedded checkout
In this guide, you will add crypto payments to the embedded checkout, enabling users to pay for NFTs with cryptocurrency. These payments work cross-chain: for example, users can pay for NFTs on any supported chain with ETH on mainnet or many popular L2s (Base, OP, Arbitrum One, and Arbitrum Nova) or even SOL.
Experience the Flow
You can try out the flow in the app below. You must have some ETH available on the supported test networks to complete the purchase.
You can also preview the live demo in a new tab.
Enabling Cross-Chain Payments
If you already have the embedded NFT checkout configured in your application, adding cross-chain functionality simply requires adding a new signer
property to the CrossmintPayElement
. The guides and documentation here leverages the rainbowkit SDK, but you can find examples for other signers at the end.
The Signer Object
You will pass a signer
object to the CrossmintPayElement
to enable cross-chain payments. Here is an outline of what that object will look like:
<CrossmintPayElement
... // other properties hidden
paymentMethod="ETH"
signer={{
address, // public address of connected wallet
signAndSendTransaction: async (transaction) => {
// custom code that will present transaction to the user's wallet
},
chain, // the currently selected chain
supportedChains, // array of chains you want to enable crosschain payments on
handleChainSwitch: async (chain) => {
// custom logic to trigger a network change in the connected wallet
}
}}
/>
Signer Properties
This is the public address of the connected wallet.
This is a custom function that will present the transaction to the user for signing.
Here is an example using the wagmi library:
signAndSendTransaction: async (transaction) => {
return await sendTransactionAsync(transaction);
},
sendTransactionAsync
function return an object with hash
as a property. In this case you must return result.hash
.This is the string chain name of the currently selected chain. This is important and must be set to match the chain of the connected wallet. This value is used to re-calculate the payment transaction for the newly selected network.
The option set here must match one of the values passed to the supportedChains
property below.
This is an array of string chain names listing the networks you want to be available for selection to the user.
Available chains include:
mainnet: ethereum
, base
, optimism
, arbitrum
testnet: ethereum-sepolia
, base-sepolia
, optimism-sepolia
, arbitrum-sepolia
This is a function you must implement when you’re also using the
supportedChains
property and passing more than a single chain. Add logic
here that will trigger the connected wallet to switch networks to match the
selection the user makes in the Network dropdown.
handleChainSwitch: async (chain) => {
switchChain({
chainId: chainIdMap[chain as keyof typeof chainIdMap],
});
},
// where chainIdMap is an object mapping chainName to chainId
Examples for Other Signers
The code examples above are using rainbowkit v2.x. If you’re using an older version of rainbowkit and its dependencies (wagmi and viem) you will need to tweak your signAndSendTransaction
function to ensure it returns the txId hash as a string.
embedded-crosschain rainbowkit
Refer to the full repo for complete code examples