Components

React Native components for React Native SDK reference for Crossmint checkout

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"

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

Show properties

display · "hidden" | "visible"

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

Multiplier unit for font sizes, not a base font size. Default "4px": labels render at fontSizeUnit * 3.75 (15px), inputs at * 4 (16px), the primary button at * 4.25 (17px). Passing a body size such as "14px" (the VerificationAppearance convention) yields ~52px labels.

spacingUnit · string

Multiplier unit for paddings and gaps, not a base spacing. Default "3.33px"; each spacing is calc(spacingUnit * k) with k between 3.6 and 4.42.

clientSecret · string

identityVerificationHandling · "external"

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

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

email · 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: "[e-mail]",
            }}
            recipient={{ email: "[e-mail]" }}
            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

credentials · IdentityVerificationCredentials · required

Show properties

inquiryId · string · required

provider · "persona" · required

sessionToken · string

locale · Locale

onCancel · () => void

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

onError · (error: object) => void

onReady · () => 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.