Components

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"
        />
    );
}

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

// Mount one step per order, for example with key={order.orderId}, so the next order starts open.
function VerificationStep({ appearance }: { appearance?: IdentityVerificationAppearance }) {
    const credentials = useIdentityVerificationCredentials();
    // The order moves on before the flow shows its result, so keep the last credentials
    // and close the step on onComplete or onCancel.
    const lastCredentials = useRef(credentials);
    lastCredentials.current = credentials ?? lastCredentials.current;
    const [closed, setClosed] = useState(false);

    if (closed || lastCredentials.current == null) {
        return null;
    }

    return (
        <CrossmintIdentityVerification
            credentials={lastCredentials.current}
            appearance={appearance}
            onComplete={({ status }) => {
                console.log(status);
                setClosed(true);
            }}
            onCancel={() => setClosed(true)}
        />
    );
}