Component Properties

Understand the properties available on the NFT checkout

If you are using our previous version of embedded checkout, please refer to the old component properties guide

• Pay Button
• Embedded Checkout
• React Hooks

The following properties are available for the CrossmintPayButton component:

projectId

string

required

GUID that identifies your project. Found in the developer console in the detail view for a registered collection.

collectionId

string

required

Identifier for your collection. Found in the developer console on the detail view for a registered collection.

Previously named clientId.

environment

string

required

Indicates whether you’re using the staging or production environment.

staging production

currency

string

Indicates the preferred currency for the checkout.

USD AUD EUR GBP HKD INR JPY KRW SGD VND

locale

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

mintConfig

object

required

The mintConfig object should not be included for Solana collections.

mintConfig properties

totalPrice

string

required

The total price of the NFTs being minted (excluding gas/network fees). If the user is buying multiple NFTs, this should be the total price of all NFTs combined (price * quantity).

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.

type

string

erc-721 erc-1155

Your Own Quantity Argument

string

You must include this parameter if your contract has a quantity argument indicating how many NFTs to mint.

The name of this property must match the name of the argument in your mint function.

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

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

  function mint(
    address to,
    uint256 _mintAmount_,
    uint256 _customNumber) public payable {
    // ...
  }

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.

mintTo

string

Indicates the wallet address where the NFTs should be delivered. It can be a standard ethereum address or a base58 Solana address.

When left empty, the NFTs will be delivered to the buyer’s Crossmint wallet. If they don’t have one, one will be created on-the-fly.

emailTo

string

Indicates the email address of the buyer. When provided, Crossmint will deliver the NFTs to the buyer’s Crossmint wallet, 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.

emailLogin

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.

checkoutProps

object

checkoutProps properties

display

string

Instructs the NFT Checkout to display in a specific way.

popup new-tab same-window

paymentMethods

array

Indicates which payment methods will be available.

fiat ETH SOL