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

Common Properties

These properties are shared between both the Embedded and Hosted checkout components.
lineItems
object | array
required
Specifies the NFTs to purchase. Can be a single item or array of items.
collectionLocator
string
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)
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 for details on enabling template minting and error handling.
tokenLocator
string
For secondary sales (buying existing NFTs). Token identifier in one of these formats:
  • EVM chains: <blockchain>:<contractAddress>:<tokenId>
  • Solana: <blockchain>:<tokenAddress>
Using tokenLocator doesn’t require registering the collection in Crossmint Console.
Use either collectionLocator (for primary sales) or tokenLocator (for secondary sales), not both.
callData
object
Arguments passed to your contract’s mint function:
Solidity
// Example mint function
function mint(
  address to,  // Auto-filled by Crossmint
  uint256 quantity,
  uint256 totalPrice
) public payable {
  // ...
}
Parameter names must match your contract’s function arguments exactly.
Do not pass the recipient argument (e.g. to) in callData. Crossmint handles this automatically.
payment
object
required
Configuration for payment methods.
crypto
object
required
Crypto payment settings:
{
  enabled: true,  // Enable/disable crypto payments
  defaultChain: "ethereum" | "polygon" | "solana", // Optional: preferred blockchain
  defaultCurrency: "eth" | "matic" | "sol" | 'usdc' // Optional: preferred currency
}
fiat
object
required
Card & wallet payment settings:
{
  enabled: true,  // Enable/disable fiat payments
  defaultCurrency: "usd" | "eur" | "gbp",  // Optional: preferred currency
}
Embedded Checkout supports additional payment method customization. See our Embedded Checkout payment methods guide for details.
receiptEmail
string
Optional email address where purchase receipt will be sent
defaultMethod
string
Sets the default payment tab: fiat or crypto
recipient
object
Delivery details for the NFTs. You must specify either email OR wallet address, not both:
email
string
NFTs delivered to user’s Crossmint wallet linked to this email
walletAddress
string
NFTs delivered directly to this blockchain address
When not provided, user will be prompted during checkout.
locale
string
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

Specific Properties & Hooks

The hosted checkout button is only available for React applications. For full customization options, please use our Headless Checkout.
The following properties are available for the CrossmintHostedCheckout component:
appearance
object
Customization options for the hosted checkout. See our UI Customization guide 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”)