Learn how to migrate to the latest version, V3, of Crossmint’s Embedded Checkout
<CrossmintEmbeddedCheckout />
component<CrossmintPaymentElement />
component@crossmint/client-sdk-react-ui@1.12.0
and above. Make sure to
update your dependencies to the latest version.CrossmintPaymentElement
to CrossmintEmbeddedCheckout
to better reflect its purpose and capabilities. This component now supports multiple line items, advanced payment methods, and enhanced UI customization.
CrossmintProvider
handles API authentication and environment setup using a client-side API key (more details in Step 1), while CrossmintCheckoutProvider
manages order state and checkout flow.
lineItems
property for multi-item supportcallData
object in each line item, replacing the previous mintConfig
propertycollectionLocator
with format crossmint:${collectionId}
or ${chain}:${contractAddress}
tokenLocator
with format ${chain}:${contractAddress}:${tokenId}
uiConfig
with appearance
- see our UI Customization guidetokenLocator
property:
orders.create
scope enabled. More info on creating API keys here.
1.12.0
or above..env.local
file or Vercel configuration):
projectId
and environment
values are now automatically derived from the client-side API key.<CrossmintPaymentElement />
, the new checkout now has
one provider, <CrossmintProvider />
that can be added in your layout page, or the same page you
have checkout on, and one react component, that has been renamed to <CrossmintEmbeddedCheckout />
.
The properties in the react component have changed:
projectId
and environment
are no longer neededlineItems
, an array of items that support both collectionLocator
(for primary sales with formats "crossmint:${collectionId}"
or ${chain}:${contractAddress}
) and tokenLocator
(for secondary sales with the format ${chain}:${contractAddress}:${tokenId}
). Each item includes callData
that takes the same object previously passed to mintConfig
CrossmintCheckoutProvider
and use the useCrossmintCheckout
hook: