Component Properties
Understand the properties available on the Checkout
If you are using our previous version of embedded checkout, please refer to the old component properties guide
Common Properties
Specifies the NFTs to purchase. Can be a single item or array of items.
lineItems properties
lineItems properties
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.
For secondary sales (buying existing NFTs). Token identifier in one of these formats:
- EVM chains:
<blockchain>:<contractAddress>:<tokenId>
- Solana:
<blockchain>:<tokenAddress>
tokenLocator
doesn’t require registering the collection in Crossmint Console.collectionLocator
(for primary sales) or tokenLocator
(for secondary sales), not both.Arguments passed to your contract’s mint function:
to
) in callData. Crossmint handles this automatically.Configuration for payment methods.
payment properties
payment properties
Crypto payment settings:
Card & wallet payment settings:
Embedded Checkout supports additional payment method customization. See our Embedded Checkout payment methods guide for details.
Optional email address where purchase receipt will be sent
Sets the default payment tab: fiat
or crypto
Delivery details for the NFTs. You must specify either email OR wallet address, not both:
recipient properties
recipient properties
When not provided, user will be prompted during checkout.
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:
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”)
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:
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”)
The embedded checkout is only available for React applications. For full customization options, please use our Headless Checkout.
The following properties are available for the CrossmintEmbeddedCheckout
component:
Extends the common payment configuration with additional options.
payment properties
payment properties
Extended fiat payment settings:
Customization options for the checkout UI. See our UI Customization guide for complete details.
Notable appearance options:
- Hide destination input:
rules.DestinationInput.display: "hidden"
- Hide receipt email input:
rules.ReceiptEmailInput.display: "hidden"
The following React hooks are available for use with the Embedded Checkout:
The useCrossmintCheckout
hook is used to access the current order and checkout state.
All Crossmint hooks must be used within components wrapped by both CrossmintProvider
and CrossmintCheckoutProvider
:
The following properties are available from the useCrossmintCheckout
hook:
The current order object containing all order details.
Order properties
Order properties
Unique identifier for the order
Current phase of the order: quote
| payment
| delivery
| completed
Order quote status and pricing: