Get Started

Installation and setup for the React SDK reference for Crossmint checkout

Latest React SDK version -

The Crossmint React SDK (@crossmint/client-sdk-react-ui) provides React components and hooks for integrating Crossmint checkout into your application. It supports both embedded checkout (inline iframe) and hosted checkout (popup/new-tab button).

Installation

npm

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

yarn add @crossmint/client-sdk-react-ui

pnpm add @crossmint/client-sdk-react-ui

bun add @crossmint/client-sdk-react-ui

Provider Setup

Wrap your application with the required providers:

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

function App() {
    return (
        <CrossmintProvider apiKey="YOUR_CLIENT_API_KEY">
            <CrossmintCheckoutProvider>
                {/* Your checkout components */}
            </CrossmintCheckoutProvider>
        </CrossmintProvider>
    );
}

Quick Example

Once providers are set up, use the checkout components to accept payments:

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

function CheckoutPage() {
    return (
        <CrossmintEmbeddedCheckout
            lineItems={{
                collectionLocator: "crossmint:YOUR_COLLECTION_ID",
                callData: {
                    totalPrice: "0.001",
                },
            }}
            payment={{
                crypto: { enabled: true },
                fiat: { enabled: true, defaultCurrency: "usd" },
                receiptEmail: "[e-mail]",
            }}
            recipient={{ email: "[e-mail]" }}
        />
    );
}

Next Steps

• Providers — Configure providers and their options
• Hooks — Access SDK state via React hooks
• Components — Drop-in UI components