Skip to main content
Crossmint provides seamless NFT checkout experiences that support both fiat (credit card) and cryptocurrency payments. This guide covers both hosted and embedded checkout implementations.

​
Overview

Crossmint offers two checkout approaches:

Hosted Checkout

Opens a secure Crossmint-hosted page in a new window

Embedded Checkout

Embeds the checkout experience directly in your app

​
Installation

npm install @crossmint/client-sdk-react-ui

​
Hosted Checkout

Hosted checkout opens a new window with Crossmint’s payment interface. This is the quickest way to get started.
1

Wrap your app with CrossmintProvider

import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";

function App() {
  return (
    <CrossmintProvider apiKey="YOUR_API_KEY">
      {/* Your app components */}
    </CrossmintProvider>
  );
}
2

Add the CrossmintHostedCheckout button

import { CrossmintHostedCheckout } from "@crossmint/client-sdk-react-ui";

function CheckoutButton() {
  return (
    <CrossmintHostedCheckout
      lineItems={{
        collectionLocator: "crossmint:206b3146-f526-444e-bd9d-0607d581b0e9",
        callData: {
          totalPrice: "0.001",
          quantity: 1,
        },
      }}
      payment={{
        crypto: {
          enabled: true,
        },
        fiat: {
          enabled: true,
        },
        defaultMethod: "fiat",
      }}
      appearance={{
        theme: {
          button: "dark", // "light", "dark", or "crossmint"
        },
      }}
    />
  );
}
3

Configure recipient (optional)

Specify where the NFT should be delivered:
<CrossmintHostedCheckout
  recipient={{
    email: "[email protected]",
    // or
    walletAddress: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
  }}
  // ... other props
/>
The hosted checkout button automatically styles itself based on the theme.button property. Available themes: light, dark, and crossmint.

​
Embedded Checkout

Embedded checkout provides a seamless in-app experience with full control over the UI.
1

Set up the providers

import { 
  CrossmintProvider,
  CrossmintCheckoutProvider 
} from "@crossmint/client-sdk-react-ui";

function App() {
  return (
    <CrossmintProvider apiKey="YOUR_API_KEY">
      <CrossmintCheckoutProvider>
        <CheckoutPage />
      </CrossmintCheckoutProvider>
    </CrossmintProvider>
  );
}
2

Add the embedded checkout component

import { CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";

function CheckoutPage() {
  return (
    <div style={{ maxWidth: "500px", margin: "0 auto" }}>
      <CrossmintEmbeddedCheckout
        recipient={{
          walletAddress: "maxfQWBno84Zfu4sXgmjYvsvLn4LzGFSgSkFMFuzved",
        }}
        lineItems={{
          tokenLocator: "solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu",
          executionParameters: {
            mode: "exact-in",
            amount: "1",
            maxSlippageBps: "500",
          },
        }}
        payment={{
          receiptEmail: "[email protected]",
          crypto: {
            enabled: false,
          },
          fiat: {
            enabled: true,
          },
          defaultMethod: "fiat",
        }}
      />
    </div>
  );
}
3

Listen to checkout events (optional)

Track the order status and customize the experience:
import { useCrossmintCheckout } from "@crossmint/client-sdk-react-ui";

function CheckoutWithCustomHandling() {
  const { order } = useCrossmintCheckout();

  useEffect(() => {
    console.log("Order status:", order?.phase);
  }, [order]);

  switch (order?.phase) {
    case "completed":
      return <div>Thank you for your purchase!</div>;
    case "delivery":
      return <div>Processing your NFT...</div>;
    default:
      return <CrossmintEmbeddedCheckout {...props} />;
  }
}

​
Payment Configuration

Control which payment methods are available: 
payment={{
  // Enable/disable crypto payments
  crypto: {
    enabled: true,
  },
  // Enable/disable credit card payments
  fiat: {
    enabled: true,
  },
  // Set the default payment method
  defaultMethod: "fiat", // "fiat" or "crypto"
  // Optional: capture customer email for receipt
  receiptEmail: "[email protected]",
}}

​
Customizing Appearance

For embedded checkout, customize colors and styling: 
appearance={{
  variables: {
    colors: {
      backgroundPrimary: "#000000",
      textPrimary: "#FFFFFF",
      accent: "#00D9FF",
    },
  },
}}

​
Multi-Chain Support

Crossmint supports NFT purchases across multiple chains:
  • Ethereum (ERC-721, ERC-1155)
  • Solana (SPL tokens)
  • Polygon
  • Base
  • And more…
Specify the chain in your collectionLocator or tokenLocator: 
// Ethereum
lineItems={{ collectionLocator: "crossmint:collection-id" }}

// Solana
lineItems={{ tokenLocator: "solana:token-address" }}
Make sure your API key has the correct permissions for the chains you want to support. Configure this in your Crossmint Console.

​
Next Steps

Embedded Wallets

Create wallets for users automatically

Multi-Chain Support

Learn about cross-chain capabilities

Build docs developers (and LLMs) love

Get started for freeTalk to us