Using Crossmint

Integrating Crossmint

Create a Crossmint Token Collection

Create a Crossmint Token Collection via the Crossmint Console:

Crossmint Console: Abstract Mainnet
Crossmint Staging Console: Abstract Testnet

Configure the Collection

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

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.

Test Card Numbers

Success: 4242 4242 4242 4242
Decline: 4000 0000 0000 0002

Abstract Global Wallet

Library Integrations

Abstract Client

Wallet Actions

Session Keys

FIAT On-ramp

Utils

AGW Crossmint Demo Application

AGW Crossmint Example Repo

Integrating Crossmint

AGW Crossmint Demo Application

AGW Crossmint Example Repo

​Integrating Crossmint

Integrating Crossmint