This is a Crossmint demo project that you can build using following the quickstart guide: https://docs.crossmint.com/nft-checkout/embedded/quickstart

Built with Next.js and bootstrapped with create-next-app.

Getting Started

To skip the walkthrough and get this app running immediately you can clone the repo and run locally. If you want to build it step by step (< 10 min), follow the quickstart guide instead.

# copy the repo to your local machine
git clone https://github.com/Crossmint/crossmint-embedded-demo.git

# change into the directory
cd crossmint-embedded-demo

# install dependencies / yarn or npm obviously work too xD
pnpm install

You'll also need to create an .env.local file, which you can do by by copying env.sample to .env.local and adding the values from your Crossmint staging or production collection.

You can also use the projectId and collectionId values here to test things out right away.

Note

The Crossmint projectId and collectionId values are not sensitive and can be exposed.

NEXT_PUBLIC_PROJECT_ID="42c43e55-f92d-4b25-bc99-d8309b6e1f38"
NEXT_PUBLIC_COLLECTION_ID="c42568b5-3edb-4627-87bb-c7408fd747fb"
NEXT_PUBLIC_ENVIRONMENT="staging"

Once you have the environment file setup you can run the app locally to test it out.

# run the app locally and open in your browser
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Learn More

• Checkout the Crossmint NFT Checkout Embeddedd docs

FAQ

Q: My projectID and collectionID are valid, but the purchase button is greyed out. A: This may be because the projectID has smart wallets enabled, which requires the recipient prop to be set. The boilerplate code block that displays the email,

 emailInputOptions={{
              show: true,
            }}

Is not compatible with smart wallets. You can hardcode an email to mint with smart wallets to using the {recipient} prop, described here.

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.