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.Enabling Cross-Chain Payments
If you already have the embedded digital asset checkout configured in your application, adding cross-chain functionality simply requires adding a newsigner
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 asigner
object to the CrossmintPayElement
to enable cross-chain payments. Here is an outline of what that object will look like:
signer outline
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:
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
.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
The network selection dropdown will only contain chains where the connected wallet has a greater than 0 ETH balance.
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.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