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:

signer outline
<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

address
string
required

This is the public address of the connected wallet.

signAndSendTransaction
function
required

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);
},
This function must return the txId. Older versions of wagmi’s sendTransactionAsync function return an object with hash as a property. In this case you must return result.hash.
chain
string

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.

supportedChains
array

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

The network selection dropdown will only contain chains where the connected wallet has a greater than 0 ETH balance.
handleChainSwitch
function

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

Quickstart ⚡Customize Style