In this guide, you will create a web app with Next.js which allows customers to buy digital assets with credit card and
crypto payments using Crossmint’s hosted checkout. We will add a button that opens a checkout hosted in a pop-up or new
tab.
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:
If you see this message, type y and press Enter to proceed:
Need to install the following packages: create-next-app@latestOk to proceed? (y)
2
Name your app `crossmint-embedded-checkout-demo` and accept the default options
What is your project named? crossmint-embedded-checkout-demoWould you like to use TypeScript? YesWould you like to use ESLint? YesWould you like to use Tailwind CSS? YesWould you like to use `src/` directory? NoWould you like to use App Router? (recommended) YesWould you like to customize the default import alias? No
3
Change into the directory created in previous steps
Need purchase tracking, multiple line items, or more customization? Here’s a complete setup with additional features:
"use client";import { useEffect } from "react";import { CrossmintProvider, CrossmintCheckoutProvider, CrossmintHostedCheckout, useCrossmintCheckout,} from "@crossmint/client-sdk-react-ui";// Component with purchase trackingfunction Checkout() { const { order } = useCrossmintCheckout(); const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID as string; useEffect(() => { if (order && order.phase === "completed") { console.log("Purchase completed!"); // Handle successful purchase } }, [order]); return ( <CrossmintHostedCheckout lineItems={[ { collectionLocator: `crossmint:${collectionId}`, callData: { totalPrice: "0.001", quantity: 1, }, }, { collectionLocator: `crossmint:${collectionId}`, callData: { totalPrice: "0.002", quantity: 2, }, }, }, ]} appearance={{ display: "new-tab", // Open in a new tab overlay: { enabled: false, // Disable overlay }, theme: { button: "dark", // Dark button theme checkout: "dark", // Dark checkout theme }, }} payment={{ crypto: { enabled: true, defaultChain: "polygon", // Set preferred blockchain defaultCurrency: "matic", // Set preferred crypto }, fiat: { enabled: true, defaultCurrency: "usd", // Set preferred fiat currency }, receiptEmail: "receipt@example.com", // Optional: Set receipt email }} recipient={{ email: "buyer@example.com", // Digital assets will be delivered to this email's wallet // Or use walletAddress: "0x..." for direct delivery }} locale="en-US" // Set interface language />);}// Main component with providersexport default function Home() { const clientApiKey = process.env.NEXT_PUBLIC_CLIENT_API_KEY as string; return ( <div className="flex flex-col items-center justify-start min-h-screen p-6"> <CrossmintProvider apiKey={clientApiKey}> <CrossmintCheckoutProvider> <Checkout /> </CrossmintCheckoutProvider> </CrossmintProvider> </div> );}
"use client";import { useEffect } from "react";import { CrossmintProvider, CrossmintCheckoutProvider, CrossmintHostedCheckout, useCrossmintCheckout,} from "@crossmint/client-sdk-react-ui";// Component with purchase trackingfunction Checkout() { const { order } = useCrossmintCheckout(); const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID as string; useEffect(() => { if (order && order.phase === "completed") { console.log("Purchase completed!"); // Handle successful purchase } }, [order]); return ( <CrossmintHostedCheckout lineItems={[ { collectionLocator: `crossmint:${collectionId}`, callData: { totalPrice: "0.001", quantity: 1, }, }, { collectionLocator: `crossmint:${collectionId}`, callData: { totalPrice: "0.002", quantity: 2, }, }, }, ]} appearance={{ display: "new-tab", // Open in a new tab overlay: { enabled: false, // Disable overlay }, theme: { button: "dark", // Dark button theme checkout: "dark", // Dark checkout theme }, }} payment={{ crypto: { enabled: true, defaultChain: "polygon", // Set preferred blockchain defaultCurrency: "matic", // Set preferred crypto }, fiat: { enabled: true, defaultCurrency: "usd", // Set preferred fiat currency }, receiptEmail: "receipt@example.com", // Optional: Set receipt email }} recipient={{ email: "buyer@example.com", // Digital assets will be delivered to this email's wallet // Or use walletAddress: "0x..." for direct delivery }} locale="en-US" // Set interface language />);}// Main component with providersexport default function Home() { const clientApiKey = process.env.NEXT_PUBLIC_CLIENT_API_KEY as string; return ( <div className="flex flex-col items-center justify-start min-h-screen p-6"> <CrossmintProvider apiKey={clientApiKey}> <CrossmintCheckoutProvider> <Checkout /> </CrossmintCheckoutProvider> </CrossmintProvider> </div> );}
"use client";import { useEffect } from "react";import { CrossmintProvider, CrossmintCheckoutProvider, CrossmintHostedCheckout, useCrossmintCheckout,} from "@crossmint/client-sdk-react-ui";// Component with purchase trackingfunction Checkout() { const { order } = useCrossmintCheckout(); useEffect(() => { if (order && order.phase === "completed") { console.log("Purchase completed!"); // Handle successful purchase } }, [order]); return ( <CrossmintHostedCheckout lineItems={[ { // For Solana NFTs tokenLocator: "solana:4oDd...x6NC", callData: { totalPrice: "0.1", buyerCreatorRoyaltyPercent: 100 } }, { // For EVM NFTs (Ethereum, Polygon, etc) tokenLocator: "ethereum:0xbC...307e:7777", callData: { totalPrice: "0.2" } } ]} appearance={{ display: "new-tab", // Open in a new tab overlay: { enabled: false, // Disable overlay }, theme: { button: "dark", // Dark button theme checkout: "dark", // Dark checkout theme }, }} payment={{ crypto: { enabled: true, defaultChain: "solana", // Set preferred blockchain defaultCurrency: "sol", // Set preferred crypto }, fiat: { enabled: true, defaultCurrency: "usd", // Set preferred fiat currency }, }} locale="en-US" // Set interface language /> );}// Main component with providersexport default function Home() { const clientApiKey = process.env.NEXT_PUBLIC_CLIENT_API_KEY as string; return ( <div className="flex flex-col items-center justify-start min-h-screen p-6"> <CrossmintProvider apiKey={clientApiKey}> <CrossmintCheckoutProvider> <Checkout /> </CrossmintCheckoutProvider> </CrossmintProvider> </div> );}
This advanced example showcases: - Multiple NFTs in one checkout - Purchase status tracking - Preferred payment
methods and currencies - Email-based digital asset delivery - Language settings Learn more in our guides: - Payment
Methods - Multi-purchases
You’ve successfully integrated a hosted checkout with credit card and crypto payment methods!
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.