You will build this demo

​
Introduction

In this guide, you will build a demo site with nextjs and Crossmint’s embedded NFT checkout. You can follow step-by-step below or simply clone this repo to be up and running immediately.

​
Prerequisites

  1. Create a developer account in the Staging Console.
  2. Create a new collection or import yours into the console and have your projectId and collectionId ready.

To integrate in production/mainnet, you'll also need to complete account and collection verification. More information on the production launch guide.

For EVM, this guide uses a collection deployed from the Crossmint developer console, which only requires a recipient parameter. For more advanced contracts, check the SDK reference.

​
Integration Steps

This guide will start from scratch with an empty Next.js application. You'll install the required @crossmint/client-sdk-react-ui dependency and add the NFT checkout component. To get started:

​
Set up the Project

1

Create a new Next.js application

npx create-next-app@latest

If you see this message, type y and press Enter to proceed:

Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
2

Name your app `crossmint-nft-checkout-demo` and accept the default options

What is your project named? crossmint-nft-checkout-demo
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
3

Change into the directory created in previous steps

cd crossmint-nft-checkout-demo
4

Install @crossmint/client-sdk-react-ui

pnpm add @crossmint/client-sdk-react-ui
5

Open the project in your preferred code editor

​
Integrate the embedded checkout

1

Obtain your `projectId` and `collectionId` from your collection detail view in the console

2

Add a new file named `.env.local` to the root directory of your project

Set your environment variables with the projectId and collectionId values obtained in Step 1

These values are safe to use in the client side of your application and are not considered sensitive.
.env.local
NEXT_PUBLIC_PROJECT_ID="_YOUR_PROJECT_ID_"
NEXT_PUBLIC_COLLECTION_ID="_YOUR_COLLECTION_ID_"
NEXT_PUBLIC_ENVIRONMENT="staging"
3

Open the `/src/app/page.tsx` file in your editor

Replace the entire contents with the following:

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.

4

Run the application from your terminal

pnpm dev

Open the app in your browser with the url http://localhost:3000/.

The Crossmint Embedded NFT 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 Project Files

Before proceeding, take a moment to organize the project files as follows:

Optionally, you can set a collection image to make the demo more visual:

​
Update the UI based on the purchase status

Events will notify you of the purchase processing status. You can use these updates to build interactive experiences.

The following steps will show you how to listen to events and update your website based on their content.

For a full explanation of all available events, see the advanced guide.

​
All Set!

You can now perform an end-to-end test of a purchase in your browser. You should end up with the following successful screen with links to view the NFT.

Remember this demo is built on staging, so the NFTs will show up on the testnets. To launch on production, check the production launch checklist. You will need to contact Sales to enable the embedded checkout on production.

​
Next Steps

Now you have a working demo of the Embedded Checkout. If you’re ready to dig into the details of the configuration options and advanced features, check out the following sections:

SDK Reference

Launch in Production

Crypto Payments

Localization

Multi-purchases

USDC support

OverviewCrypto Payments