Custom Payer

import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";
import { useAccount, useWalletClient } from "wagmi";
import { Hex, parseTransaction } from "viem";

function Checkout() {
    const { data: walletClient } = useWalletClient();
    const { address } = useAccount();

    // Map of supported chains to their IDs
    const chainIds = {
        "base-sepolia": 84532,
        "polygon-amoy": 80002,
    } as const;

    if (!address || !walletClient) {
        return <p>Connect your wallet to continue</p>;
    }

    return (
        <CrossmintEmbeddedCheckout
            lineItems={{
                collectionLocator: "crossmint:__YOUR_COLLECTION_ID__",
                callData: {
                    totalPrice: "0.001",
                    quantity: 1,
                },
            }}
            payment={{
                crypto: {
                    // Enable crypto payment, this example only uses Crypto
                    enabled: true,
                    payer: {
                        address,
                        initialChain: "base-sepolia",
                        supportedChains: ["base-sepolia", "polygon-amoy"],
                        handleChainSwitch: async (chain) => {
                            await walletClient.switchChain({
                                id: chainIds[chain],
                            });
                        },
                        handleSignAndSendTransaction: async (serializedTx) => {
                            try {
                                const tx = parseTransaction(serializedTx as Hex);
                                const hash = await walletClient.sendTransaction({
                                    to: tx.to,
                                    value: tx.value,
                                    data: tx.data ?? "0x",
                                    gas: tx.gas,
                                    chainId: tx.chainId,
                                });

                                return { success: true, txId: hash };
                            } catch (error) {
                                return {
                                    success: false,
                                    errorMessage: error instanceof Error ? error.message : "Transaction failed",
                                };
                            }
                        },
                    },
                },
                // Disable fiat payment
                fiat: { enabled: false },
            }}
        />
    );
}

import { useConnectModal } from "@rainbow-me/rainbowkit";

// Similar implementation as above, but using RainbowKit's hooks

import { useWeb3Modal } from "@web3modal/react";

// Similar implementation as above, but using Web3Modal's hooks