Skip to main content
Crossmint enables checkout flows that let users buy on-chain items (like NFTs) using FIAT currency through traditional payment methods such as credit cards, Google Pay, and Apple Pay.

AGW Crossmint Demo Application

View a demo application that uses AGW and Crossmint to test the flow.

AGW Crossmint Example Repo

Use our example repo to quickly get started with AGW and Crossmint.

​
Integrating Crossmint

1

Create a Crossmint Token Collection

Create a Crossmint Token Collection via the Crossmint Console:
Crossmint New Collection
2

Configure the Collection

Create a new collection or import an existing one using the Crossmint Console. Follow the Crossmint Guide for more details.
Crossmint Collection Info
3

Embed the Checkout Widget

Embed the Crossmint Checkout Widget in your application using the following steps.Create and populate the following environment variables in your application:
NEXT_PUBLIC_CROSSMINT_API_KEY=your_crossmint_client_api_key  # From API Keys page
NEXT_PUBLIC_CROSSMINT_COLLECTION_ID=your_collection_id  # From Collection details page
Wrap your application in the CrossmintProvider component:
"use client";

import { AbstractWalletProvider } from "@abstract-foundation/agw-react";
import { CrossmintProvider } from "@crossmint/client-sdk-react-ui";
import { abstractTestnet } from "viem/chains";

export default function AbstractWalletWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <AbstractWalletProvider chain={abstractTestnet}>
        <CrossmintProvider apiKey={process.env.NEXT_PUBLIC_CROSSMINT_API_KEY}>
          {children}
        </CrossmintProvider>
    </AbstractWalletProvider>
  );
}
Use the CrossmintEmbeddedCheckout component to present the checkout widget:
<CrossmintEmbeddedCheckout
    lineItems={{
      collectionLocator: `crossmint:${process.env.NEXT_PUBLIC_CROSSMINT_COLLECTION_ID}`,
      // Your price and quantity information
      callData: {
        totalPrice: "0.001",
        quantity: 1,
        to: address, // use the useAccount hook to get the user's address
      },
    }}
    recipient={{
      walletAddress: address, // Pre-populate the user's wallet address with the useAccount hook
    }}
    payment={{
      crypto: { enabled: false }, // e.g. disable crypto payments
      fiat: { enabled: true }, // e.g. enable fiat payments
    }}
/>
Test your integration using the card numbers below.
  • Success: 4242 4242 4242 4242
  • Decline: 4000 0000 0000 0002