> ## 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 digital asset checkout

## General Properties

<AccordionGroup>
  <Accordion title="Basic Properties">
    <ResponseField name="projectId" type="string" required>
      GUID that identifies your project. Found in the developer console in the
      detail view for a registered collection.
    </ResponseField>

    <ResponseField name="collectionId" type="string" required>
      Identifier for your collection. Found in the developer console on the
      detail view for a registered collection.
      <Note>Previously named `clientId`.</Note>
    </ResponseField>

    <ResponseField name="environment" type="string" required>
      Indicates whether you're using the staging or production environment.

      `staging` `production`
    </ResponseField>

    <ResponseField name="currency" type="string">
      Indicates the preferred currency for the checkout.

      `USD` `AUD` `EUR` `GBP` `HKD` `INR` `JPY` `KRW` `SGD` `VND`
    </ResponseField>

    <ResponseField name="locale" type="string">
      Indicates the preferred language for the checkout.

      `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>
  </Accordion>

  <Accordion title="mintConfig">
    <ResponseField name="mintConfig" type="object" required>
      <Warning>The `mintConfig` object should **not** be included for **Solana** collections.</Warning>
    </ResponseField>

    **mintConfig Subproperties**

    <Warning>You must include any custom arguments required by your contract, using the exact same name.</Warning>

    <ResponseField name="totalPrice" type="string" required>
      The total price of the digital assets being minted (excluding gas/network fees). If the user is buying multiple digital assets, this should be the total price of all assets combined (price \* quantity).

      <Note>If your collection is set up using an external platform charging additional fees, please add them to the price. For example, if you contract charges 0.01 ETH and the provider charges 0.002 ETH, then set the price at 0.012 ETH.</Note>
    </ResponseField>

    <ResponseField name="type" type="string">
      `erc-721` `erc-1155`
    </ResponseField>

    <ResponseField name="Your Own Quantity Argument" type="string">
      <Warning>You must include this parameter if your contract has a `quantity` argument indicating how many digital assets to mint.</Warning>

      <Warning>The name of this property **must** match the name of the argument in your mint function.</Warning>

      For example, if your contract has a `_mintAmount` argument, you will use the property name `_mintAmount` in the `mintConfig` object.
    </ResponseField>

    <ResponseField name="Additional Arguments">
      Add any additional arguments required by your contract, using the exact same name. For example, the function below would require adding a `_customNumber` property to `mintConfig`.

      ```solidity Solidity theme={null}
        function mint(
          address to,
          uint256 _mintAmount_,
          uint256 _customNumber) public payable {
          // ...
        }
      ```

      <Check> Do not pass the recipient argument (e.g. `to` in the example above) in the `mintConfig`. Crossmint auto-fills this value with the user's address. If you wish to configure a custom recipient address, follow the instructions on the section below.</Check>
    </ResponseField>
  </Accordion>

  <Accordion title="Webhook Pass Through Args">
    <Snippet file="wh-pass-through-args.mdx" />
  </Accordion>
</AccordionGroup>

## Optional Product Specific Properties

<Tabs>
  <Tab title="Hosted Checkout Button">
    The following properties are specific to the `CrossmintPayButton`:

    <ResponseField name="mintTo" type="string">
      Indicates the wallet address where the digital assets should be delivered. It can be a standard ethereum address or a base58 Solana address.

      When left empty, the digital assets will be delivered to the buyer's <Tooltip tip="crossmint.com or embedded wallet, depending on which product you are using.">Crossmint wallet</Tooltip>. If they don't have one, one will be created on-the-fly.
    </ResponseField>

    <ResponseField name="emailTo" type="string">
      Indicates the email address of the buyer. When provided, Crossmint will deliver the digital assets to the buyer's <Tooltip tip="crossmint.com or embedded wallet, depending on which product you are using.">Crossmint wallet</Tooltip>, associated with that address. If they don't have one, one will be created on-the-fly.

      When left empty, Crossmint will ask the buyer for their email address and do the same as above.
    </ResponseField>

    <ResponseField name="emailLogin" type="string">
      Indicates the email where the user will receive the purchase receipt. It pre-fills the email input field on the buyer's UI, and freezes it so they can't modify it.

      When left empty, Crossmint will ask the buyer for their email address.
    </ResponseField>

    <ResponseField name="checkoutProps" type="object">
      <Accordion title="Subproperties">
        <ResponseField name="display" type="string">
          Instructs the digital asset checkout to display in a specific way.

          `popup` `new-tab` `same-window`
        </ResponseField>

        <ResponseField name="paymentMethods" type="array">
          Indicates which [payment methods](/payments/pay-button/select-payment-options) will be available.

          `fiat` `ETH` `SOL`
        </ResponseField>
      </Accordion>
    </ResponseField>
  </Tab>

  <Tab title="Embedded Checkout">
    The following properties are specific to the `CrossmintPaymentElement`:

    <ResponseField name="recipient" type="object" required>
      Indicates where the digital asset, and purchase receipt will be delivered.

      <Accordion title="Subproperties">
        <ResponseField name="email" type="string" required>
          Indicates the email address of the buyer, where the purchase receipt will be sent. If no wallet address is provided, Crossmint will deliver the digital asset to the buyer's <Tooltip tip="crossmint.com or embedded wallet, depending on which product you are using.">Crossmint wallet</Tooltip>, associated with that address. If they don't have one, one will be created on-the-fly.

          If a `wallet` address is provided, the digital asset will be delivered there directly.

          If you're using `emailInputOptions`, this will be set automatically.
        </ResponseField>

        <ResponseField name="wallet" type="string">
          Indicates the wallet address where the digital asset should be delivered. It can be a standard ethereum address or a base58 Solana address.

          When left empty, the digital asset will be delivered to the buyer's <Tooltip tip="crossmint.com or embedded wallet, depending on which product you are using.">Crossmint wallet</Tooltip>. If they don't have one, one will be created on-the-fly.
        </ResponseField>
      </Accordion>
    </ResponseField>

    <ResponseField name="emailInputOptions" type="object">
      Renders an email input field or Stripe Link.

      <Accordion title="Subproperties">
        <ResponseField name="show" type="boolean">
          Renders an email input field above the credit card checkout form. If you set this to `false` you must set the `recipient.email` property above.
        </ResponseField>
      </Accordion>
    </ResponseField>

    <ResponseField name="onEvent" type="string | function">
      Sets up and manages [events](/payments/embedded/events).

      <CodeGroup>
        ```javascript React theme={null}
        <CrossmintPaymentElement
          // other properties removed for brevity
          onEvent={(event) => {
          console.log(event);
          }}
        />
        ```

        ```javascript Vue theme={null}
        <script setup lang="ts">
          function onEvent(event: CrossmintEvent) {
          console.log(event.type, event);
          }
        </script>
        <template>
          <CrossmintPaymentElement
          // other properties removed for brevity
          @event="onEvent"
          />
        </template>
        ```

        ```jsx Vanilla theme={null}
        <crossmint-payment-element
          // other properties removed for brevity
          onEvent="return function onEvent(event) {
          console.log('default', event);
          }"
        />
        ```
      </CodeGroup>
    </ResponseField>

    <ResponseField name="uiConfig" type="object">
      Used to customize UI attributes of the checkout, such as colors, typography and more. Refer to the [UI customization guide](/payments/embedded/ui-customization) for more info.
    </ResponseField>

    <ResponseField name="cardWalletPaymentMethods" type="string">
      Used to enable Apple Pay and Google Pay. If this parameter is not set, all methods will be enabled by default.

      `apple-pay` `google-pay` `none`
    </ResponseField>

    <ResponseField name="paymentMethod" type="string">
      Indicates which currencies should be enabled. Refer to the [Pay with Crypto](/payments/embedded/pay-with-crypto) section for more information on how to use this property.

      `fiat` `ETH` `SOL`
    </ResponseField>
  </Tab>
</Tabs>