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

# React

> React SDK reference for Hosted Checkout component properties

## Properties

<ResponseField name="lineItems" type="object | array" required id="line-items">
  Specifies the assets 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 select a template randomly
      * `<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 select a template randomly.
        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 assets). 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?: string, // Optional: e.g., "ethereum", "polygon", "solana"
        defaultCurrency?: string // Optional: e.g., "eth", "usdc"
      }
      ```

      <Note>
        For the complete list of supported chains, see [Supported Chains](/introduction/supported-chains).
      </Note>
    </ResponseField>

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

      ```tsx theme={null}
      {
        enabled: true,  // Enable/disable fiat payments
        defaultCurrency?: string  // Optional: e.g., "usd", "eur", "gbp"
      }
      ```

      <Note>
        Crossmint supports multiple fiat currencies. Contact our [support team](https://help.crossmint.com) for the complete list of available currencies.
      </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 assets. 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">
      Assets delivered to user's Crossmint wallet linked to this email
    </ResponseField>

    <ResponseField name="walletAddress" type="string" id="recipient-wallet">
      Assets 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>

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