> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

> React Native components for React Native SDK reference for Crossmint checkout

## CrossmintEmbeddedCheckout

### Props

<ResponseField name="appearance" type="EmbeddedCheckoutV3Appearance">
  <Expandable title="properties">
    <ResponseField name="fonts" type="{ cssSrc: string }[]">
      <Expandable title="properties">
        <ResponseField name="cssSrc" type="string" required />
      </Expandable>
    </ResponseField>

    <ResponseField name="rules" type="EmbeddedCheckoutV3AppearanceRules">
      <Expandable title="properties">
        <ResponseField name="DestinationInput" type="{ display?: &#x22;hidden&#x22; }">
          <Expandable title="properties">
            <ResponseField name="display" type="&#x22;hidden&#x22;" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Input" type="object">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ background?: string; border?: string; boxShadow?: string; placeholder?: string; text?: string }" />

            <ResponseField name="focus" type="{ colors?: { background?: string; border?: string; boxShadow?: string } }" />

            <ResponseField name="font" type="{ family?: string; size?: string; weight?: string }" />

            <ResponseField name="hover" type="{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Label" type="{ colors?: { text?: string }; font?: { family?: string; size?: string; weight?: string } }">
          <Expandable title="properties">
            <ResponseField name="colors" type="{ text?: string }" />

            <ResponseField name="font" type="{ family?: string; size?: string; weight?: string }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="PrimaryButton" type="object">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ background?: string; text?: string }" />

            <ResponseField name="disabled" type="{ colors?: { background?: string; text?: string } }" />

            <ResponseField name="font" type="{ family?: string; size?: string; weight?: string }" />

            <ResponseField name="hover" type="{ colors?: { background?: string; text?: string } }" />
          </Expandable>
        </ResponseField>

        <ResponseField name="ReceiptEmailInput" type="{ display?: &#x22;hidden&#x22; }">
          <Expandable title="properties">
            <ResponseField name="display" type="&#x22;hidden&#x22;" />
          </Expandable>
        </ResponseField>

        <ResponseField name="Tab" type="object">
          <Expandable title="properties">
            <ResponseField name="borderRadius" type="string" />

            <ResponseField name="colors" type="{ background?: string; border?: string; boxShadow?: string; text?: string }" />

            <ResponseField name="font" type="{ family?: string; size?: string; weight?: string }" />

            <ResponseField name="hover" type="{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }" />

            <ResponseField name="selected" type="{ colors?: { background?: string; border?: string; boxShadow?: string; text?: string } }" />
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="variables" type="EmbeddedCheckoutV3AppearanceVariables">
      <Expandable title="properties">
        <ResponseField name="borderRadius" type="string" />

        <ResponseField name="colors" type="object">
          <Expandable title="properties">
            <ResponseField name="accent" type="string" />

            <ResponseField name="backgroundPrimary" type="string" />

            <ResponseField name="borderPrimary" type="string" />

            <ResponseField name="danger" type="string" />

            <ResponseField name="textPrimary" type="string" />

            <ResponseField name="textSecondary" type="string" />

            <ResponseField name="warning" type="string" />
          </Expandable>
        </ResponseField>

        <ResponseField name="fontFamily" type="string" />

        <ResponseField name="fontSizeUnit" type="string" />

        <ResponseField name="spacingUnit" type="string" />
      </Expandable>
    </ResponseField>
  </Expandable>
</ResponseField>

<ResponseField name="clientSecret" type="string" />

<ResponseField name="jwt" type="string" />

<ResponseField name="orderId" type="string" />

<ResponseField name="payment" type="EmbeddedCheckoutV3Payment" required>
  <Expandable title="properties">
    <ResponseField name="crypto" type="EmbeddedCheckoutV3CryptoPayment" required>
      <Expandable title="properties">
        <ResponseField name="defaultChain" type="BlockchainIncludingTestnet" />

        <ResponseField name="defaultCurrency" type="CryptoCurrency" />

        <ResponseField name="enabled" type="boolean" required />

        <ResponseField name="payer" type="EmbeddedCheckoutPayer">
          <Expandable title="properties">
            <ResponseField name="address" type="string" required />

            <ResponseField name="initialChain" type="PayerSupportedBlockchains" required />

            <ResponseField name="supportedChains" type="PayerSupportedBlockchains[]" />

            <ResponseField name="handleChainSwitch" type="unknown" required />

            <ResponseField name="handleSignAndSendTransaction" type="unknown" required />

            <ResponseField name="handleSignMessage" type="unknown" />
          </Expandable>
        </ResponseField>
      </Expandable>
    </ResponseField>

    <ResponseField name="defaultMethod" type="&#x22;fiat&#x22; | &#x22;crypto&#x22;" />

    <ResponseField name="fiat" type="EmbeddedCheckoutV3FiatPayment" required>
      <Expandable title="properties">
        <ResponseField name="allowedMethods" type="{ applePay?: boolean; card?: boolean; googlePay?: boolean }">
          <Expandable title="properties">
            <ResponseField name="applePay" type="boolean" />

            <ResponseField name="card" type="boolean" />

            <ResponseField name="googlePay" type="boolean" />
          </Expandable>
        </ResponseField>

        <ResponseField name="defaultCurrency" type="FiatCurrency" />

        <ResponseField name="enabled" type="boolean" required />
      </Expandable>
    </ResponseField>

    <ResponseField name="receiptEmail" type="string" />
  </Expandable>
</ResponseField>

<ResponseField name="lineItems" type="EmbeddedCheckoutV3LineItem | EmbeddedCheckoutV3LineItem[]">
  <Expandable title="properties">
    <ResponseField name="callData" type="Record<string, any>" />

    <ResponseField name="collectionLocator" type="string" />

    <ResponseField name="tokenLocator" type="string" />

    <ResponseField name="executionParameters" type="Record<string, any>" />

    <ResponseField name="productLocator" type="string" />
  </Expandable>
</ResponseField>

<ResponseField name="locale" type="Locale" />

<ResponseField name="metadata" type="JSONObject" />

<ResponseField name="recipient" type="EmbeddedCheckoutV3Recipient">
  <Expandable title="properties">
    <ResponseField name="email" type="string" />

    <ResponseField name="physicalAddress" type="EmbeddedCheckoutV3PhysicalAddress">
      <Expandable title="properties">
        <ResponseField name="city" type="string" required />

        <ResponseField name="country" type="&#x22;US&#x22;" required />

        <ResponseField name="line1" type="string" required />

        <ResponseField name="line2" type="string" />

        <ResponseField name="name" type="string" required />

        <ResponseField name="postalCode" type="string" required />

        <ResponseField name="state" type="string" required />
      </Expandable>
    </ResponseField>

    <ResponseField name="walletAddress" type="string" />
  </Expandable>
</ResponseField>

### Usage

```tsx theme={null}
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.