Quickstart ⚡
Add an NFT checkout button to a demo app in under 5 minutes
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
- Create a developer account in the Staging Console.
- Create a new collection or import yours into the console and have your
projectIdandcollectionIdready.
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
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)
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
Change into the directory created in previous steps
cd crossmint-nft-checkout-demo
Install @crossmint/client-sdk-react-ui
yarn add @crossmint/client-sdk-react-ui
Open the project in your preferred code editor
Integrate the Payment Button
Obtain your `projectId` and `collectionId` from your collection detail view in the console
Add a new file named `.env.local` to root directory of your project
Configure your environment variables with the values from Step 1.
NEXT_PUBLIC_PROJECT_ID="_YOUR_PROJECT_ID_"
NEXT_PUBLIC_COLLECTION_ID="_YOUR_COLLECTION_ID_"
NEXT_PUBLIC_ENVIRONMENT="staging"
Open the `/src/app/page.tsx` file in your editor
Replace the entire contents with the following:
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: