Crossmint Hosted Digital Asset Checkout Demo

​
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 embedded 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-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
3

Change into the directory created in previous steps

cd crossmint-embedded-checkout-demo
4

Install @crossmint/client-sdk-react-ui

npm i @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

Get projectId and collectionId values screenshot
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:
"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>
  )
}
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 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:

SDK Reference

Launch in Production

Customize the Button

Localization

Multi-purchases

USDC support