Components

CrossmintEmbeddedCheckout

Props

EmbeddedCheckoutV3Appearance

Show properties

{ cssSrc: string }[]

Show properties

string

required

EmbeddedCheckoutV3AppearanceRules

Show properties

{ display?: "hidden" }

Show properties

"hidden"

{ display?: "hidden" | "visible" }

Show properties

"hidden" | "visible"

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

"external"

"external": you mount CrossmintIdentityVerification from getIdentityVerificationCredentials(order), or the buyer cannot finish.

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

CrossmintIdentityVerification

Props

IdentityVerificationCredentials

required

Show properties

string

required

"persona"

required

string

Locale

() => void

(result: { status: "expired" | "unknown" | "failed" | "verified" | "pending-review" | "pending-manual-review" | "declined" }) => void

(error: object) => void

() => void

Usage

import {
    CrossmintIdentityVerification,
    useIdentityVerificationCredentials,
} from "@crossmint/client-sdk-react-native-ui";

function VerificationStep() {
    const credentials = useIdentityVerificationCredentials();

    if (credentials == null) {
        return null;
    }

    return (
        <CrossmintIdentityVerification
            credentials={credentials}
            onComplete={({ status }) => console.log(status)}
        />
    );
}

Note: Document capture needs camera access granted by the host app. On Android the WebView requests android.permission.CAMERA at runtime, which only succeeds if your app declares it in AndroidManifest.xml; on iOS you must set NSCameraUsageDescription in Info.plist. Neither is added for you.

Introduction

Hosted (pop-up)

Embedded

Headless (API)

Advanced Guides

API Reference

CrossmintEmbeddedCheckout

Props

Usage

CrossmintIdentityVerification

Props

Usage

​CrossmintEmbeddedCheckout

​Props

​Usage

​CrossmintIdentityVerification

​Props

​Usage

CrossmintEmbeddedCheckout

Props

Usage

CrossmintIdentityVerification

Props

Usage