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

# Component Properties

> Understand the properties available on the Checkout

<Note>
  If you are using our previous version of embedded checkout, please refer to the [old component properties
  guide](/payments/v2/advanced/component-properties)
</Note>

## Common Properties

<Info>These properties are shared between both the Embedded and Hosted checkout components.</Info>

<ResponseField name="lineItems" type="object | array" required id="line-items">
  Specifies the NFTs to purchase. Can be a single item or array of items.

  <Accordion title="lineItems properties" id="line-items-props">
    <ResponseField name="collectionLocator" type="string" id="line-items-collection">
      Collection identifier in one of these formats:

      * `crossmint:<_YOUR_COLLECTION_ID_>[:_TEMPLATE_ID_]` - For collections created in Crossmint Console
        * Template ID is optional and requires template minting to be enabled
        * If template minting is disabled and a template ID is provided, the mint will fail with an error
      * `<blockchain>:<contract-address>` - For collections using direct contract addresses (e.g., `polygon-amoy:0xF3d2d7b5666f579DcE385b2d53c54AB1b09Ef563`)

      <Note>
        When using template minting, append the templateId to the collection locator: `crossmint:collectionId:templateId`.
        Template minting must be enabled in the Crossmint Console or the mint will fail with an error.
        See the [Mint to Specific Template guide](/payments/advanced/mint-to-specific-template) for details on enabling template minting and error handling.
      </Note>
    </ResponseField>

    <ResponseField name="tokenLocator" type="string" id="line-items-token">
      For secondary sales (buying existing NFTs). Token identifier in one of these formats:

      * EVM chains: `<blockchain>:<contractAddress>:<tokenId>`
      * Solana: `<blockchain>:<tokenAddress>`

      <Note>Using `tokenLocator` doesn't require registering the collection in Crossmint Console.</Note>

      <Warning>Use either `collectionLocator` (for primary sales) or `tokenLocator` (for secondary sales), not both.</Warning>
    </ResponseField>

    <ResponseField name="callData" type="object" id="line-items-calldata">
      Arguments passed to your contract's mint function:

      ```solidity Solidity theme={null}
      // Example mint function
      function mint(
        address to,  // Auto-filled by Crossmint
        uint256 quantity,
        uint256 totalPrice
      ) public payable {
        // ...
      }
      ```

      <Warning>Parameter names must match your contract's function arguments exactly.</Warning>

      <Check>Do not pass the recipient argument (e.g. `to`) in callData. Crossmint handles this automatically.</Check>
    </ResponseField>
  </Accordion>
</ResponseField>

<ResponseField name="payment" type="object" required id="payment-config">
  Configuration for payment methods.

  <Accordion title="payment properties" id="payment-props">
    <ResponseField name="crypto" type="object" required id="payment-crypto">
      Crypto payment settings:

      ```tsx theme={null}
      {
        enabled: true,  // Enable/disable crypto payments
        defaultChain: "ethereum" | "polygon" | "solana", // Optional: preferred blockchain
        defaultCurrency: "eth" | "matic" | "sol" | 'usdc' // Optional: preferred currency
      }
      ```
    </ResponseField>

    <ResponseField name="fiat" type="object" required id="payment-fiat">
      Card & wallet payment settings:

      ```tsx theme={null}
      {
        enabled: true,  // Enable/disable fiat payments
        defaultCurrency: "usd" | "eur" | "gbp",  // Optional: preferred currency
      }
      ```

      <Note>
        Embedded Checkout supports additional payment method customization. See our [Embedded Checkout payment methods guide](/payments/embedded/guides/payment-methods) for details.
      </Note>
    </ResponseField>

    <ResponseField name="receiptEmail" type="string" id="payment-receipt">
      Optional email address where purchase receipt will be sent
    </ResponseField>

    <ResponseField name="defaultMethod" type="string" id="payment-default">
      Sets the default payment tab: `fiat` or `crypto`
    </ResponseField>
  </Accordion>
</ResponseField>

<ResponseField name="recipient" type="object" id="recipient-config">
  Delivery details for the NFTs. You must specify either email OR wallet address, not both:

  <Accordion title="recipient properties" id="recipient-props">
    <ResponseField name="email" type="string" id="recipient-email">
      NFTs delivered to user's Crossmint wallet linked to this email
    </ResponseField>

    <ResponseField name="walletAddress" type="string" id="recipient-wallet">
      NFTs delivered directly to this blockchain address
    </ResponseField>
  </Accordion>

  When not provided, user will be prompted during checkout.
</ResponseField>

<ResponseField name="locale" type="string" id="locale-config">
  Sets the checkout interface language.

  `en-US` `de-DE` `es-ES` `fr-FR` `it-IT` `ja-JP` `ko-KR` `pt-PT` `ru-RU` `th-TH` `tr-TR` `uk-UA` `vi-VN` `zh-CN` `zh-TW` `Klingon`
</ResponseField>

## Specific Properties & Hooks

<Tabs>
  <Tab title="Hosted Checkout" id="pay-button-config">
    <Note>
      The hosted checkout button is only available for React applications. For full customization options, please use our [Headless Checkout](/payments/headless/overview).
    </Note>

    The following properties are available for the `CrossmintHostedCheckout` component:

    <ResponseField name="appearance" type="object" id="pay-button-appearance">
      Customization options for the hosted checkout. See our [UI Customization guide](/payments/pay-button/guides/ui-customization) for complete details.

      **Notable appearance options:**

      * Display mode: `display: "popup" | "new-tab"` (default: "popup")
      * Background overlay: `overlay.enabled: false` to disable the gray background
      * Button theme: `theme.button: "light" | "dark" | "crossmint"` (default: "light")
      * Checkout theme: `theme.checkout: "light" | "dark"` (default: "light")
    </ResponseField>
  </Tab>

  <Tab title="Embedded Checkout" id="embedded-checkout-config">
    <Note>
      The embedded checkout is only available for React applications. For full customization options, please use our [Headless Checkout](/payments/headless/overview).
    </Note>

    The following properties are available for the `CrossmintEmbeddedCheckout` component:

    <ResponseField name="payment" type="object" required id="embedded-payment">
      Extends the common payment configuration with additional options.

      <Accordion title="payment properties" id="embedded-payment-props">
        <ResponseField name="fiat" type="object" required id="embedded-payment-fiat">
          Extended fiat payment settings:

          ```tsx theme={null}
          {
            enabled: true,  // Enable/disable fiat payments
            defaultCurrency: "usd" | "eur" | "gbp",  // Optional: preferred currency
            allowedMethods: {
              card: boolean,       // Credit/debit cards
              applePay: boolean,   // Apple Pay
              googlePay: boolean   // Google Pay
            }
          }
          ```
        </ResponseField>
      </Accordion>
    </ResponseField>

    <ResponseField name="appearance" id="embedded-appearance">
      Customization options for the checkout UI. See our [UI Customization guide](/payments/embedded/guides/ui-customization) for complete details.

      **Notable appearance options:**

      * Hide destination input: `rules.DestinationInput.display: "hidden"`
      * Hide receipt email input: `rules.ReceiptEmailInput.display: "hidden"`

      <Note>If inputs are hidden, you must provide the corresponding values via recipient/payment props.</Note>
    </ResponseField>
  </Tab>

  <Tab title="React Hooks" id="react-hooks-config">
    The following React hooks are available for use with the Embedded Checkout:

    <ResponseField name="useCrossmintCheckout" type="function" id="use-crossmint-checkout">
      The `useCrossmintCheckout` hook is used to access the current order and checkout state.
    </ResponseField>

    <Note>
      All Crossmint hooks must be used within components wrapped by both `CrossmintProvider` and `CrossmintCheckoutProvider`:
    </Note>

    ```tsx theme={null}
    <CrossmintProvider apiKey="YOUR_API_KEY">
        <CrossmintCheckoutProvider>
            <YourComponent /> {/* Hooks can be used here */}
        </CrossmintCheckoutProvider>
    </CrossmintProvider>
    ```

    The following properties are available from the `useCrossmintCheckout` hook:

    <ResponseField name="order" type="object">
      The current order object containing all order details.

      <Accordion title="Order properties">
        <ResponseField name="orderId" type="string">
          Unique identifier for the order
        </ResponseField>

        <ResponseField name="phase" type="string">
          Current phase of the order: `quote` | `payment` | `delivery` | `completed`
        </ResponseField>

        <ResponseField name="lineItems" type="array">
          Array of items being purchased.

          <Accordion title="lineItem properties">
            <ResponseField name="chain" type="string">
              Blockchain network for the NFT
            </ResponseField>

            <ResponseField name="quantity" type="number">
              Number of NFTs being purchased
            </ResponseField>

            <ResponseField name="metadata" type="object">
              ```tsx theme={null}
              {
                name: string;
                description: string;
                imageUrl: string;
                collection: {
                    name: string;
                    description: string;
                    imageUrl: string;
                };
              }
              ```
            </ResponseField>

            <ResponseField name="quote" type="object">
              ```tsx theme={null}
              {
                status: "valid" | "item-unavailable" | "expired" | "requires-recipient";
                charges: {
                    unit: { currency: string; amount: string; };
                    gas: { currency: string; amount: string; };
                };
                totalPrice: { currency: string; amount: string; };
              }
              ```
            </ResponseField>

            <ResponseField name="delivery" type="object">
              NFT delivery status and details:

              ```tsx theme={null}
              // When completed:
              {
                status: "completed";
                txId: string;
                tokens: [{
                    locator: string;
                    contractAddress: string;
                    tokenId: string;
                    mintHash: string;
                }];
                recipient: {
                    walletAddress: string;
                    locator: string;
                    email: string;
                };
              }

              // When in progress:
              {
                status: "awaiting-payment" | "in-progress" | "failed";
                recipient: {
                    walletAddress: string;
                    locator: string;
                    email: string;
                };
              }
              ```
            </ResponseField>
          </Accordion>
        </ResponseField>

        <ResponseField name="quote" type="object">
          Order quote status and pricing:

          ```tsx theme={null}
          {
            status: "valid" | "expired" | "requires-recipient" | "all-line-items-unavailable";
            quotedAt: string;
            expiresAt: string;
            totalPrice: {
                currency: string;
                amount: string;
            };
          }
          ```
        </ResponseField>
      </Accordion>
    </ResponseField>
  </Tab>
</Tabs>