Digital Asset Checkout Integration

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 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 embedded 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-embedded-checkout-demo` and accept the default options

What is your project named? crossmint-embedded-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-embedded-checkout-demo

Install @crossmint/client-sdk-react-ui

npm i @crossmint/client-sdk-react-ui

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

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

bun 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

Get projectId and collectionId values screenshot

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"

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

Replace the entire contents with the following:

"use client";

import { CrossmintPayButton } 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>
      <CrossmintPayButton
        projectId={projectId}
        collectionId={collectionId}
        environment={environment}
        mintConfig={{
          type: "erc-721",
          totalPrice: "0.0001",
        }}
      />
    </div>
  )
}

  /*
    For candy machine integrations, the mintConfig object is optional.
    Only include it if your candy machine uses minting groups:

    mintConfig={{
      mintingGroup: "YOUR_MINTING_GROUP_NAME"
    }}
  */

  <CrossmintPayButton
    projectId={projectId}
    collectionId={collectionId}
    environment={environment}
  />

Run the application from your terminal

pnpm dev

That’s it! 🎉 Open the app in your browser with the url http://localhost:3000/. The Hosted Checkout 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 Hosted Checkout. If you’re ready to dig into the details of the configuration options and advanced features, check out the following sections:

Introduction

Wallets

Authentication

Tokenization (Minting)

Verifiable Credentials

Checkout

Quickstart ⚡

Introduction

Prerequisites

Integration Steps

Set up the Project

Integrate the Payment Button

Next Steps

SDK Reference

Launch in Production

Customize the Button

Localization

Multi-purchases

USDC support

​Introduction

​Prerequisites

​Integration Steps

​Set up the Project

​Integrate the Payment Button

​Next Steps

SDK Reference

Launch in Production

Customize the Button

Localization

Multi-purchases

USDC support

Introduction

Prerequisites

Integration Steps

Set up the Project

Integrate the Payment Button

Next Steps