Hosted Checkout Quickstart

Live Demo | Docs | See all quickstarts

Introduction

Allow your customers to buy NFTs with credit card and crypto payments, using Crossmint's hosted checkout. This quickstart provides a seamless integration for accepting payments in your dApp.

Key features:

• Accept fiat payments via credit, debit card, Apple Pay and Google Pay
• Accept crypto payments
• Deliver NFTs directly to a buyer's wallet or email address
• Detect the on-chain delivery and show a success screen linking to the transaction on the block explorer

Prerequisites

• Create a developer account in the Staging Console.
• Create a new collection or import yours in the console, and have your collectionId ready.
• Make sure your collection has at least one NFT configured
• From the detail view of your collection, navigate to the Checkout tab to configure the pricing settings and enable Credit Card and Crypto payments.

Deploy

Easily deploy the template to Vercel with the button below. You will need to set the required environment variables in the Vercel dashboard.

Setup

1. Clone the repository and navigate to the project folder:

   git clone https://github.com/crossmint/hosted-checkout-quickstart.git && cd hosted-checkout-quickstart

2. Install all dependencies:

   npm install
   # or
   yarn install
   # or
   pnpm install
   # or
   bun install

3. Set up the environment variables by copying the template file:

   cp .env.template .env

4. Add your Crossmint collectionId to the .env file.

   NEXT_PUBLIC_CROSSMINT_COLLECTION_ID=your_collection_id

5. Get your client-side API key from the Crossmint Console Overview and add it to the .env file.

   NEXT_PUBLIC_CROSSMINT_API_KEY=your_api_key

6. Run the development server:

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev
   # or
   bun dev

How delivery detection works

The hosted checkout runs on Crossmint's page, so this app doesn't receive a callback when the order completes. Instead, when the buyer opens the checkout, the app resolves the recipient email to its wallet address (via a draft order quote, using the same public client API key) and polls public RPCs for the incoming ERC-721 transfer. The matching log provides the mint transaction hash shown on the success screen. See lib/delivery-watcher.ts. No server-side API key or extra environment variables required.

The demo is configured for Base Sepolia. To use another chain, update the CHAIN, RPC_URLS and EXPLORER_BASE_URL constants in lib/delivery-watcher.ts and the defaultChain payment option in app/page.tsx. The recipient email the watcher tracks is also set in app/page.tsx.

Using in production

1. Create an account in the Production Console, add your collection and configure the payment settings from the Checkout tab.
2. Verify your account as the project owner and verify your collection. Learn more about verifications.
3. Update your .env file with your production variables.
4. Deploy your application to a production environment.

Advanced Usage

For advanced usage, refer to the Crossmint documentation:

• Customize the UI: https://docs.crossmint.com/payments/pay-button/guides/ui-customization
• Edit payment methods: https://docs.crossmint.com/payments/pay-button/guides/payment-methods