Embed a checkout into a demo app in under 10 minutes
You will build this demo
projectId
and collectionId
ready.recipient
parameter. For more advanced contracts, check the SDK
reference.@crossmint/client-sdk-react-ui
dependency and add the embedded checkout component. To get started:
Create a new Next.js application
y
and press Enter
to proceed:Name your app `crossmint-embedded-checkout-demo` and accept the default options
Change into the directory created in previous steps
Install @crossmint/client-sdk-react-ui
Open the project in your preferred code editor
Obtain your `projectId` and `collectionId` from your collection detail view in the console
Add a new file named `.env.local` to the root directory of your project
projectId
and collectionId
values obtained in Step 1Open the `/src/app/page.tsx` file in your editor
cardWalletPaymentMethods
allows you to configure Apple Pay and Google Pay for the checkout. Please ensure that you restrict the experience to only show Apple Pay on compatible browsers and devices. If only Apple Pay is allowed, users will not be able to use the checkout on non-Safari browsers and other incompatible devices.If you are only displaying Google Pay and Apple Pay, an email input is not required. You can set show
to false
under emailInputOptions
. You can also choose to hide the card form if you are only displaying Google Pay and Apple Pay, click here to learn more.Run the application from your terminal
http://localhost:3000/
.
The Crossmint Embedded digital asset checkout will now function correctly, but is missing some important features such as UI updates based on the payment status, and handling error states. The following sections will expand on the work you have done so far to incorporate these missing features.
Organize the Project Files
components
folder within the /src/app
folder of your project.components
folder add two new files named:Crossmint.tsx
CollectionInfo.tsx
Set a collection image
ninjanaut.jpg
, and save it in the /public
folder.1. Listen to Payment Events
onEvent
handler to the CrossmintPaymentElement
. The example above already includes the handler in Crossmint.tsx
, with logic to log all events to the console.Try it out by opening your javascript console, interacting with the form, and observing the corresponding events being logged to the console.The payment:process.succeeded
event will fire when the payment has been successfully captured.2. Display the Progress
Minting.tsx
, in the same components directory, with the code below.Crossmint.tsx
file with the code on the other tab below.sphere.gif
, and save it to the /public
folder.4242 4242 4242 4242
, with any arbitrary data for the other fields. You should see something like the following flow:3. Show Minting Status
Minting.tsx
file as outlined in the second tab.