How to embed a Digital Asset Checkout

Crossmint Embedded Digital Asset Checkout Demo — You will build this demo

Introduction

In this guide, you will build a demo site with nextjs and Crossmint’s embedded digital asset checkout. 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 embedded checkout

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 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"

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

Replace the entire contents with the following:

"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}
        cardWalletPaymentMethods={["apple-pay", "google-pay"]}
        emailInputOptions={{
          show: true,
        }}
        mintConfig={{
          type: "erc-721",
          totalPrice: "0.001",
        }}
      />
    </div>
  )
}

  // the mintConfig object isn't required for integrations
  // using a candy machine

  <CrossmintPaymentElement
    projectId={projectId}
    collectionId={collectionId}
    environment={environment}
    cardWalletPaymentMethods={["apple-pay", "google-pay"]}
    emailInputOptions={{
      show: true,
    }}
  />

cardWalletPaymentMethods allows you to configure Apple Pay and Google Pay for the checkout. Please ensure that you restrict the experience to only show Apple Pay on compatible browsers and devices. If only Apple Pay is allowed, users will not be able to use the checkout on non-Safari browsers and other incompatible devices.If you are only displaying Google Pay and Apple Pay, an email input is not required. You can set show to false under emailInputOptions. You can also choose to hide the card form if you are only displaying Google Pay and Apple Pay, click here to learn more.

Run the application from your terminal

pnpm dev

Open the app in your browser with the url http://localhost:3000/. The Crossmint Embedded digital asset 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:

Crossmint.tsx
CollectionInfo.tsx

Below is the new content for these pages:

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>
  );
}

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

const CollectionInfo: React.FC = () => {
    return (
        <>
            <div className="sm:col-span-2 flex flex-col">
                <Image
                    src="/ninjanaut.jpg"
                    width={500}
                    height={500}
                    className="rounded-lg shrink"
                    alt="digital asset collection image"
                    priority={true}
                />
                <div className="justify-between p-5 my-6 space-y-3 rounded-lg border">
                    <p className="text-sm text-black font-bold">This is a test collection</p>
                    <p className="text-sm text-black ">
                        You can test out the purchase experience by using the test credit card below and enter random
                        information for other payment details.
                    </p>
                    <div className="w-full p-2 border rounded-lg">
                        <div className="cursor-pointer flex items-start gap-1 text-black justify-between">
                            <p className="text-black text-sm">4242 4242 4242 4242</p>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
};

export default CollectionInfo;

"use client";

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

const Crossmint: React.FC = () => {
    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 className="sm:col-span-3">
                <CrossmintPaymentElement
                    projectId={projectId}
                    collectionId={collectionId}
                    environment={environment}
                    emailInputOptions={{
                        show: true,
                    }}
                    mintConfig={{
                        type: "erc-721",
                        totalPrice: "0.0001",
                    }}
                    onEvent={(event) => {
                        console.log(event);
                    }}
                />
            </div>
        </>
    );
};

export default Crossmint;

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.

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

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 digital asset...</h3>
            <Image
                src="/sphere.gif"
                width={256}
                height={256}
                className="shrink mx-auto mt-10"
                alt="processing animation"
            />
        </div>
    );
};

export default Minting;

"use client";

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

import Minting from "./Minting";

const Crossmint: React.FC = () => {
    const [orderIdentifier, setOrderIdentifier] = useState<string | null>(null);

    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 className="sm:col-span-3">
                {orderIdentifier === null ? (
                    <CrossmintPaymentElement
                        projectId={projectId}
                        collectionId={collectionId}
                        environment={environment}
                        emailInputOptions={{
                            show: true,
                        }}
                        mintConfig={{
                            type: "erc-721",
                            totalPrice: "0.0001",
                        }}
                        onEvent={(event) => {
                            switch (event.type) {
                                case "payment:process.succeeded":
                                    console.log(event);
                                    setOrderIdentifier(event.payload.orderIdentifier);
                                    break;
                                default:
                                    console.log(event);
                                    break;
                            }
                        }}
                    />
                ) : (
                    <Minting orderIdentifier={orderIdentifier} />
                )}
            </div>
        </>
    );
};

export default Crossmint;

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:

GIF of checkout form being replaced with processing component

3. Show Minting Status

Next, you will listen to mint events to get notified when the digital asset has been successfully delivered. These events will return the transaction ID, which you can use to generate a link to view the digital asset 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.

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

import { useCrossmintEvents } from "@crossmint/client-sdk-react-ui";
import Image from "next/image";
import React from "react";

interface MintingProps {
    orderIdentifier: string;
}

const Minting: React.FC<MintingProps> = ({ orderIdentifier }) => {
    const [status, setStatus] = React.useState<string>("pending"); // ["pending", "success", "failure"]
    const [result, setResult] = React.useState<any>(null);
    const environment = process.env.NEXT_PUBLIC_ENVIRONMENT as string;
    const { listenToMintingEvents } = useCrossmintEvents({
        environment: environment,
    });

    if (status === "pending") {
        listenToMintingEvents({ orderIdentifier }, (event) => {
            switch (event.type) {
                case "transaction:fulfillment.succeeded":
                    setStatus("success");
                    setResult(event.payload);
                    break;
                case "transaction:fulfillment.failed":
                    setStatus("failure");
                    break;
                default:
                    break;
            }
            console.log(event.type, ":", event);
        });
    }

    return (
        <>
            <div className="text-black font-mono p-5 text-center">
                {status === "pending" && (
                    <>
                        <h3>Minting your digital asset...</h3>
                        <Image
                            src="/sphere.gif"
                            width={256}
                            height={256}
                            className="shrink mx-auto mt-10"
                            alt="processing animation"
                        />
                        This may take up to a few minutes
                    </>
                )}
                {status === "success" && (
                    <>
                        <h3>Digital Asset Minted Successfully!</h3>
                        <div className="mt-10">
                            <a
                                target="_blank"
                                className="block bg-[#2081e2] rounded-lg mt-3 p-3 text-white"
                                href={`https://testnets.opensea.io/assets/amoy/${result?.contractAddress}/${result?.tokenIds[0]}`}
                            >
                                View on OpenSea
                            </a>
                            <a
                                target="_blank"
                                className="block bg-[#663399] rounded-lg mt-3 p-3 text-white"
                                href={`https://amoy.polygonscan.com/tx/${result?.txId}`}
                            >
                                View on Polygonscan
                            </a>
                            <a
                                target="_blank"
                                className="block bg-[#81feab] rounded-lg mt-3 p-3 text-black"
                                href={`https://staging.crossmint.com/user/collection/poly:${result?.contractAddress}:${result?.tokenIds[0]}`}
                            >
                                View in Crossmint
                            </a>
                        </div>
                    </>
                )}
                {status === "failure" && (
                    <>
                        <h3>Failed to Mint Digital Asset</h3>
                        <p>Something went wrong. You will be refunded if the mint cannot be fulfilled successfully.</p>
                    </>
                )}
            </div>
        </>
    );
};

export default Minting;

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 digital asset.

Remember this demo is built on staging, so the digital assets will show up on the testnets. To launch on production, check the production launch checklist. You will need to contact Sales to enable the embedded checkout on production.

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:

Introduction

Wallets

Authentication

Tokenization (Minting)

Verifiable Credentials

Checkout

Quickstart ⚡

Introduction

Prerequisites

Integration Steps

Set up the Project

Integrate the embedded checkout

Organize Project Files

Update the UI based on the purchase status

All Set!

Next Steps

SDK Reference

Launch in Production

Crypto Payments

Localization

Multi-purchases

USDC support

​Introduction

​Prerequisites

​Integration Steps

​Set up the Project

​Integrate the embedded checkout

​Organize Project Files

​Update the UI based on the purchase status

​All Set!

​Next Steps

SDK Reference

Launch in Production

Crypto Payments

Localization

Multi-purchases

USDC support

Introduction

Prerequisites

Integration Steps

Set up the Project

Integrate the embedded checkout

Organize Project Files

Update the UI based on the purchase status

All Set!

Next Steps