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

yarn 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: