If you are using our previous version of embedded checkout, please refer to the old crypto payments guide

Overview

Crossmint’s Embedded Checkout makes it easy to accept multiple payment methods. Users can pay:

  • With credit/debit cards
  • Using Apple Pay or Google Pay
  • Using ETH, SOL, USDC, EURC, or other supported tokens
  • Using cross-chain crypto on supported chains

Quick Integration

Enable all payment methods with just a few lines of code:

<CrossmintEmbeddedCheckout
    lineItems={{
        collectionLocator: `crossmint:${collectionId}`,
        callData: {
            totalPrice: "0.001",
            quantity: 1,
        },
    }}
    payment={{
        crypto: {
            enabled: true, // Enable crypto payments
        },
        fiat: {
            enabled: true, // Enable fiat payments
        },
    }}
/>

Fiat Payments

Credit Cards & Digital Wallets

Embedded Checkout provides a seamless fiat payment experience supporting:

  • All major credit and debit cards
  • Apple Pay for iOS/Safari users
  • Google Pay for Android/Chrome users

You can configure which fiat payment methods to enable:

payment={{
  fiat: {
    enabled: true,
    // By default, all payment methods are enabled if you don't specify any.
    allowedMethods: {
      card: true, // Enable/disable credit cards
      applePay: true, // Enable/disable Apple Pay
      googlePay: true, // Enable/disable Google Pay
    },
    defaultCurrency: "usd" // Set default currency
  }
}}

Crypto Payments

Native Wallet Support

Embedded Checkout works with any Web3 wallet, including:

  • MetaMask
  • Coinbase Wallet
  • WalletConnect
  • Phantom

Users can pay with ETH, SOL, stablecoins (USDC, EURC), or other supported tokens on their preferred chain. Enable crypto payments with:

payment={{
  crypto: {
    enabled: true,
    defaultChain: "ethereum", // Optional: Set default blockchain
    defaultCurrency: "usdc" // Optional: Set default currency (usdc, eurc, eth)
  }
}}

Cross-Chain Support

The checkout supports paying with funds from any supported blockchain, even if the NFT is on a different chain. For example, a user could pay for an NFT on Polygon using ETH from their Ethereum wallet. The checkout handles all necessary conversions automatically.

Customizing the Default Experience

Set a default payment method to guide users:

payment={{
  defaultMethod: "fiat", // or "crypto"
  crypto: {
    enabled: true
  },
  fiat: {
    enabled: true
  }
}}

Test Price Limits and Test Credit Cards

When building your applications using the staging environment, you can use various test credit cards numbers to see the entire process end-to-end, without actually having to transact using a real credit card. Check out the Testing Tips page for more info on price limits and test card numbers.

Best Practices

  • Enable Multiple Payment Methods: Offer both fiat and crypto options to maximize conversion
  • Set Default Currency: Choose a default that matches your target market
  • Test All Flows: Use test cards and test wallets to verify the complete payment experience
  • Handle Events: Use the useCrossmintCheckout hook to track payment status and handle completion