​
Introduction

In this guide, you will build a demo site with nextjs and Crossmint’s payment button. 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 Payment Button

1

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

2

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

Configure your environment variables with the values from Step 1.

These values are not sensitive and can be used client-side.
.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:

4

Run the application from your terminal

pnpm dev

That’s it! 🎉

Open the app in your browser with the url http://localhost:3000/. The Crossmint Pay Button will appear in the top left of the browser. You can click it to open the checkout popup and ensure everything is configured properly.

​
Next Steps

Now you have a working demo of the Crossmint Pay Button. 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

Customize the Button

Localization

Multi-purchases

USDC support

OverviewSelect Payment Options