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-native-ui";

function CheckoutScreen() {
    return (
        <CrossmintEmbeddedCheckout
            lineItems={{
                collectionLocator: "crossmint:YOUR_COLLECTION_ID",
                callData: {
                    totalPrice: "0.001",
                },
            }}
            payment={{
                crypto: {
                    enabled: true,
                    defaultChain: "base-sepolia",
                    defaultCurrency: "usdc",
                    payer: {
                        address: "0x...",
                        initialChain: "base-sepolia",
                        handleChainSwitch: async (chain) => {
                            // Switch your wallet to the requested chain
                        },
                        handleSignAndSendTransaction: async (serializedTransaction) => {
                            const txId = await sendTransaction(serializedTransaction);
                            return { success: true, txId };
                        },
                    },
                },
                fiat: {
                    enabled: true,
                    defaultCurrency: "usd",
                    allowedMethods: {
                        card: true,
                        applePay: true,
                        googlePay: true,
                    },
                },
                receiptEmail: "buyer@example.com",
            }}
            recipient={{ email: "buyer@example.com" }}
            locale="en-US"
        />
    );
}

Note: In React Native, when payment.crypto.enabled is true, you must provide a payment.crypto.payer object with the required callback handlers for signing transactions and switching chains.

​CrossmintEmbeddedCheckout

​Props

​Usage

CrossmintEmbeddedCheckout

Props

Usage