Components

CrossmintEmbeddedCheckout

Props

EmbeddedCheckoutV3Appearance

Show properties

{ cssSrc: string }[]

Show properties

string

required

EmbeddedCheckoutV3AppearanceRules

Show properties

{ display?: "hidden" }

Show properties

"hidden"

object

Show properties

string

{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string } }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }

{ colors?: { text?: string }; font?: { family?: string; size?: string; weight?: string } }

Show properties

{ text?: string }

{ family?: string; size?: string; weight?: string }

object

Show properties

string

{ background?: string; text?: string }

{ colors?: { background?: string; text?: string } }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; text?: string } }

{ display?: "hidden" }

Show properties

"hidden"

object

Show properties

string

{ background?: string; border?: string; boxShadow?: string; text?: string }

{ family?: string; size?: string; weight?: string }

{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }

EmbeddedCheckoutV3AppearanceVariables

Show properties

string

object

Show properties

string

EmbeddedCheckoutV3Payment

required

Show properties

EmbeddedCheckoutV3CryptoPayment

required

Show properties

BlockchainIncludingTestnet

CryptoCurrency

boolean

required

EmbeddedCheckoutPayer

Show properties

string

required

PayerSupportedBlockchains

required

PayerSupportedBlockchains[]

unknown

required

unknown

required

unknown

"fiat" | "crypto"

EmbeddedCheckoutV3FiatPayment

required

Show properties

{ applePay?: boolean; card?: boolean; googlePay?: boolean }

Show properties

boolean

FiatCurrency

boolean

required

string

EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]

Show properties

Record<string, any>

string

Record<string, any>

string

Locale

JSONObject

EmbeddedCheckoutV3Recipient

Show properties

string

EmbeddedCheckoutV3PhysicalAddress

Show properties

string

required

"US"

required

string

required

string

required

string

required

string

required

string

Usage

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

function Checkout() {
    return (
        <CrossmintEmbeddedCheckout
            lineItems={{
                collectionLocator: "crossmint:YOUR_COLLECTION_ID",
                callData: {
                    totalPrice: "0.001",
                },
            }}
            payment={{
                crypto: {
                    enabled: true,
                    defaultChain: "base-sepolia",
                    defaultCurrency: "usdc",
                },
                fiat: {
                    enabled: true,
                    defaultCurrency: "usd",
                    allowedMethods: {
                        card: true,
                        applePay: true,
                        googlePay: true,
                    },
                },
                receiptEmail: "buyer@example.com",
            }}
            recipient={{ email: "buyer@example.com" }}
            locale="en-US"
        />
    );
}

CrossmintHostedCheckout

Props

CrossmintHostedCheckoutV3Appearance

Show properties

"popup" | "new-tab" | "same-tab"

CrossmintHostedCheckoutV3OverlayOptions

Show properties

boolean

required

HostedCheckoutV3AppearanceRules

Show properties

{ display?: "hidden" }

Show properties

"hidden"

{ display?: "hidden" }

Show properties

"hidden"

{ button?: CrossmintHostedCheckoutV3ButtonTheme; checkout?: CrossmintHostedCheckoutV3Theme }

Show properties

CrossmintHostedCheckoutV3ButtonTheme

CrossmintHostedCheckoutV3Theme

CrossmintHostedCheckoutV3AppearanceVariables

Show properties

{ accent?: string }

Show properties

string

EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]

Show properties

Record<string, any>

string

Record<string, any>

string

Locale

JSONObject

HostedCheckoutV3Payment

required

Show properties

HostedCheckoutV3CryptoPayment

required

Show properties

BlockchainIncludingTestnet

CryptoCurrency

boolean

required

"fiat" | "crypto"

HostedCheckoutV3FiatPayment

required

Show properties

FiatCurrency

boolean

required

string

EmbeddedCheckoutV3Recipient

Show properties

string

EmbeddedCheckoutV3PhysicalAddress

Show properties

string

required

"US"

required

string

required

string

required

string

required

string

required

string

Usage

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

function BuyButton() {
    return (
        <CrossmintHostedCheckout
            lineItems={{
                collectionLocator: "crossmint:YOUR_COLLECTION_ID",
                callData: {
                    totalPrice: "0.001",
                },
            }}
            payment={{
                crypto: {
                    enabled: true,
                    defaultChain: "base-sepolia",
                    defaultCurrency: "usdc",
                },
                fiat: {
                    enabled: true,
                    defaultCurrency: "usd",
                },
                receiptEmail: "buyer@example.com",
            }}
            recipient={{ email: "buyer@example.com" }}
            appearance={{
                display: "popup",
                overlay: { enabled: true },
                theme: {
                    button: "dark",
                    checkout: "light",
                },
            }}
            locale="en-US"
        />
    );
}

CrossmintPaymentMethodManagement

Props

"new" | "existing"[]

Which sections the management UI renders. ["new"] (default) shows only the “add new” section: no saved-methods fetch, no auto-open/auto-select of an existing method. Include "existing" to also show the saved-methods section.

PaymentMethodManagementAllowedType[]

Filter array of which method types the “add new” section offers (default ["card"]). LM0 renders the first supported entry; passing more than one type does not yet render a type picker.

PaymentMethodManagementAppearance

Show properties

EmbeddedCheckoutV3Appearance["fonts"]

EmbeddedCheckoutV3Appearance["rules"]

EmbeddedCheckoutV3Appearance["variables"]

string

required

(paymentMethod: CrossmintPaymentMethod) => void | Promise<void>

Usage

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

function PaymentMethods({ jwt }: { jwt: string }) {
    return (
        <CrossmintPaymentMethodManagement
            jwt={jwt}
            allowedModes={["new", "existing"]}
            allowedPaymentMethodTypes={["card"]}
            onPaymentMethodSelected={(paymentMethod) => {
                if (paymentMethod.type === "card") {
                    console.log("Card selected:", paymentMethod.card.last4);
                }
            }}
        />
    );
}

Note: CrossmintPaymentMethodManagement renders an iframe-based UI for managing saved payment methods. Requires a valid JWT for authentication. The onPaymentMethodSelected callback receives a discriminated union — narrow on type before accessing variant-specific fields.

Introduction

Hosted (pop-up)

Embedded

Headless (API)

Advanced Guides

API Reference

CrossmintEmbeddedCheckout

Props

Usage

CrossmintHostedCheckout

Props

Usage

CrossmintPaymentMethodManagement

Props

Usage

​CrossmintEmbeddedCheckout

​Props

​Usage

​CrossmintHostedCheckout

​Props

​Usage

​CrossmintPaymentMethodManagement

​Props

​Usage

CrossmintEmbeddedCheckout

Props

Usage

CrossmintHostedCheckout

Props

Usage

CrossmintPaymentMethodManagement

Props

Usage