Components - Crossmint Docs

CrossmintEmbeddedCheckout

Props

appearance

EmbeddedCheckoutV3Appearance

Show properties

fonts

{ cssSrc: string }[]

Show properties

cssSrc

string

required

rules

EmbeddedCheckoutV3AppearanceRules

Show properties

DestinationInput

{ display?: "hidden" }

Show properties

display

"hidden"

Input

object

Show properties

borderRadius

string

colors

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

focus

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

font

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

hover

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

Label

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

Show properties

colors

{ text?: string }

font

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

PrimaryButton

object

Show properties

borderRadius

string

colors

{ background?: string; text?: string }

disabled

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

font

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

hover

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

ReceiptEmailInput

{ display?: "hidden" }

Show properties

display

"hidden"

Tab

object

Show properties

borderRadius

string

colors

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

font

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

hover

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

selected

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

variables

EmbeddedCheckoutV3AppearanceVariables

Show properties

borderRadius

string

colors

object

Show properties

accent

string

backgroundPrimary

string

borderPrimary

string

danger

string

textPrimary

string

textSecondary

string

warning

string

fontFamily

string

fontSizeUnit

string

spacingUnit

string

clientSecret

string

jwt

string

orderId

string

payment

EmbeddedCheckoutV3Payment

required

Show properties

crypto

EmbeddedCheckoutV3CryptoPayment

required

Show properties

defaultChain

BlockchainIncludingTestnet

defaultCurrency

CryptoCurrency

enabled

boolean

required

payer

EmbeddedCheckoutPayer

Show properties

address

string

required

initialChain

PayerSupportedBlockchains

required

supportedChains

PayerSupportedBlockchains[]

handleChainSwitch

unknown

required

handleSignAndSendTransaction

unknown

required

handleSignMessage

unknown

defaultMethod

"fiat" | "crypto"

fiat

EmbeddedCheckoutV3FiatPayment

required

Show properties

allowedMethods

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

Show properties

applePay

boolean

card

boolean

googlePay

boolean

defaultCurrency

FiatCurrency

enabled

boolean

required

receiptEmail

string

lineItems

EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]

Show properties

callData

Record<string, any>

collectionLocator

string

tokenLocator

string

executionParameters

Record<string, any>

productLocator

string

locale

Locale

metadata

JSONObject

recipient

EmbeddedCheckoutV3Recipient

Show properties

string

physicalAddress

EmbeddedCheckoutV3PhysicalAddress

Show properties

city

string

required

country

"US"

required

line1

string

required

line2

string

name

string

required

postalCode

string

required

state

string

required

walletAddress

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

appearance

CrossmintHostedCheckoutV3Appearance

Show properties

display

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

overlay

CrossmintHostedCheckoutV3OverlayOptions

Show properties

enabled

boolean

required

rules

HostedCheckoutV3AppearanceRules

Show properties

DestinationInput

{ display?: "hidden" }

Show properties

display

"hidden"

ReceiptEmailInput

{ display?: "hidden" }

Show properties

display

"hidden"

theme

{ button?: CrossmintHostedCheckoutV3ButtonTheme; checkout?: CrossmintHostedCheckoutV3Theme }

Show properties

button

CrossmintHostedCheckoutV3ButtonTheme

checkout

CrossmintHostedCheckoutV3Theme

variables

CrossmintHostedCheckoutV3AppearanceVariables

Show properties

colors

{ accent?: string }

Show properties

accent

string

lineItems

EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]

Show properties

callData

Record<string, any>

collectionLocator

string

tokenLocator

string

executionParameters

Record<string, any>

productLocator

string

locale

Locale

metadata

JSONObject

payment

HostedCheckoutV3Payment

required

Show properties

crypto

HostedCheckoutV3CryptoPayment

required

Show properties

defaultChain

BlockchainIncludingTestnet

defaultCurrency

CryptoCurrency

enabled

boolean

required

defaultMethod

"fiat" | "crypto"

fiat

HostedCheckoutV3FiatPayment

required

Show properties

defaultCurrency

FiatCurrency

enabled

boolean

required

receiptEmail

string

recipient

EmbeddedCheckoutV3Recipient

Show properties

string

physicalAddress

EmbeddedCheckoutV3PhysicalAddress

Show properties

city

string

required

country

"US"

required

line1

string

required

line2

string

name

string

required

postalCode

string

required

state

string

required

walletAddress

string

clientSecret

string

orderId

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

allowedModes

"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.

allowedPaymentMethodTypes

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.

appearance

PaymentMethodManagementAppearance

Show properties

fonts

EmbeddedCheckoutV3Appearance["fonts"]

rules

EmbeddedCheckoutV3Appearance["rules"]

variables

EmbeddedCheckoutV3Appearance["variables"]

jwt

string

required

onPaymentMethodSelected

(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.

​CrossmintEmbeddedCheckout

​Props

​Usage

​CrossmintHostedCheckout

​Props

​Usage

​CrossmintPaymentMethodManagement

​Props

​Usage

CrossmintEmbeddedCheckout

Props

Usage

CrossmintHostedCheckout

Props

Usage

CrossmintPaymentMethodManagement

Props

Usage