Quickstart ⚡

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. Get 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.

​

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

npx create-next-app@latest

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

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

cd crossmint-nft-checkout-demo

yarn add @crossmint/client-sdk-react-ui

​

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:

EVM

Solana

"use client";

import { CrossmintPaymentElement } from "@crossmint/client-sdk-react-ui";

export default function Home() {
  const projectId = process.env.NEXT_PUBLIC_PROJECT_ID as string;
  const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID as string;
  const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as string;

  return (
    <div>
      <CrossmintPaymentElement
        projectId={projectId}
        collectionId={collectionId}
        environment={environment}
        emailInputOptions={{
          show: true,
        }}
        mintConfig={{
          type: "erc-721",
          totalPrice: "0.001",
        }}
      />
    </div>
  )
}

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:

Organize the Project Files

Create a new components folder within the /src/app folder of your project.

Within the new components folder add two new files named:

1. Crossmint.tsx
2. CollectionInfo.tsx

Below is the new content for these pages:

page.tsx

CollectionInfo.tsx

Crossmint.tsx

import CollectionInfo from "./components/CollectionInfo";
import Crossmint from "./components/Crossmint";

export default function Home() {
  return (
    <div className="container mx-auto max-w-4xl bg-white">
      <div className="grid grid-cols-1 sm:grid-cols-5 sm:gap-4 p-4">
        <CollectionInfo />
        <Crossmint />
      </div>
    </div>
  );
}

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

Set a collection image

If you want to display a collection picture, download the image below, name it ninjanaut.jpg, and save it in the /public folder.

Check your application in the browser again to ensure everything is rendering properly and you don’t have any errors in the javascript console.

​

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.

1. Listen to Payment Events

Payment events provide updates on the status of payments. You can subscribe by adding an 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

In this step, you will replace the checkout form with a loading component, to notify the user the purchase is in progress.

1. Create a new file named Minting.tsx, in the same components directory, with the code below.
2. Update the Crossmint.tsx file with the code on the other tab below.
3. Download this loading sphere animation, name it sphere.gif, and save it to the /public folder.

Minting.tsx

Crossmint.tsx

import Image from "next/image";
import React from "react";

interface MintingProps {
    orderIdentifier: string;
}

const Minting: React.FC<MintingProps> = ({ orderIdentifier }) => {
    return (
        <div className="text-black font-mono p-5 text-center">
            <h3>Minting your NFT...</h3>
            <Image
                src="/sphere.gif"
                width={256}
                height={256}
                className="shrink mx-auto mt-10"
                alt="processing animation"
            />
        </div>
    );
};

export default Minting;

Run the app and complete a test payment using the card 4242 4242 4242 4242, with any arbitrary data for the other fields. You should see something like the following flow:

3. Show Minting Status

Next, you will listen to mint events to get notified when the NFT has been successfully delivered. These events will return the transaction ID, which you can use to generate a link to view the NFT on OpenSea, PolygonScan, and Crossmint.

To do this, ensure your app matches the directory structure listed below, and update the Minting.tsx file as outlined in the second tab.

directory structure

Minting.tsx

/src/app/
  ├─layout.tsx
  ├─page.tsx
  └── components/
      ├─ CollectionInfo.tsx
      ├─ Crossmint.tsx
      └─ Minting.tsx
  public/
  ├─ ninjanaut.jpg
  └─ sphere.gif

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.

​

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: