Quickstart ⚡

Allow your users to buy stablecoins with credit cards in under 5 minutes

Before you start

Set up your project and get an API key.

Onramp Embedded Quickstart

See a full working example.

You can start testing Onramp in staging. Once you are ready to go live, reach out to sales to enable the feature in production

Crossmint’s Embedded Checkout API lets you build a seamless onramp so users can buy crypto with a credit card.

In this guide, you’ll learn how to:

• Create a Crossmint order for a user authenticated in your app
• Use Crossmint’s embedded checkout component to handle KYC, payment, and delivery automatically

1. Prerequisites

1. Install the SDK

   Install the Crossmint client SDK:

   npm install @crossmint/client-sdk-react-ui
   
2. Create API keys

   Create a server-side API key with the orders.create and orders.read scopes enabled.

   
   

   Create a client-side API key for the embedded checkout component.

3. Add environment variables

   Add environment variables to your .env.local:

   NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY="_YOUR_CLIENT_API_KEY_"
   CROSSMINT_SERVER_SIDE_API_KEY="_YOUR_SERVER_API_KEY_"
   CROSSMINT_ENV="staging"
   

2. Create Order

Use the Create Order API to initiate the purchase process.

Use the following token addresses for USDC:

Chain	Staging	Production
Solana	4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU	EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
Base	0x036CbD53842c5426634e7929541eC2318f3dCF7e	0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913

🚨 IMPORTANT: The user email you send as a parameter (on payment.receiptEmail) must correspond to a user authenticated by your application. This email is used by Crossmint to determine whether KYC is required for the order.

Here’s an example API call:

const serverApiKey = process.env.CROSSMINT_SERVER_SIDE_API_KEY; // Server-side API key
const tokenLocator = "solana:4zMMC9srt5Ri5X14GAgXhaHii3GnPAEERYPJgZJDncDU"; // USDC staging address
const receiptEmail = "[e-mail]"; // Replace with actual recipient authenticated email
const walletAddress = "example-wallet-address"; // Replace with actual recipient wallet address
const tokenAmount = "5"; // Replace with desired amount

const response = await fetch("https://staging.crossmint.com/api/2022-06-09/orders", {
    method: "POST",
    headers: {
        "Content-Type": "application/json",
        "x-api-key": serverApiKey,
    },
    body: JSON.stringify({
        lineItems: [
            {
                tokenLocator,
                executionParameters: {
                    mode: "exact-in",
                    amount: tokenAmount,
                },
            },
        ],
        payment: {
            method: "card",
            receiptEmail,
        },
        recipient: {
            walletAddress,
        },
    }),
});

const data = await response.json();

Example Response

{
  "clientSecret": "example-client-secret",
  "order": {
    "orderId": "example-order-id",
    "phase": "payment",
    "locale": "en-US",
    "lineItems": [
      {
        "chain": "solana",
        "metadata": {
          "name": "USDC",
          "description": "USDC Token",
          "imageUrl": "https://cryptologos.cc/logos/usd-coin-usdc-logo.svg?v=040"
        },
        "quote": {
          "status": "valid",
          "charges": {
            "unit": {
              "amount": "1.47",
              "currency": "usd"
            }
          },
          "totalPrice": {
            "amount": "2",
            "currency": "usd"
          },
          "quantityRange": {
            "lowerBound": "1.36",
            "upperBound": "1.36"
          }
        },
        "delivery": {
          "status": "awaiting-payment",
          "recipient": {
            "locator": "solana:example-wallet-address",
            "walletAddress": "example-wallet-address"
          }
        },
        "executionMode": "exact-in",
        "maxSlippageBps": "0",
        "executionParams": {
          "mintHash": "example-mint-hash",
          "mode": "exact-in",
          "amount": "2"
        }
      }
    ],
    "quote": {
      "status": "valid",
      "quotedAt": "2025-03-07T23:04:11.996Z",
      "expiresAt": "2025-03-07T23:14:11.996Z",
      "totalPrice": {
        "amount": "2",
        "currency": "usd"
      }
    },
    "payment": {
      "method": "checkoutcom-flow",
      "currency": "usd",
      "status": "requires-kyc",
      "preparation": {
        "kyc": {
          "provider": "persona",
          "templateId": "example-template-id",
          "referenceId": "example-reference-id"
        }
      }
    }
  }
}

3. Use Embedded Checkout

Once you have the order response with orderId and clientSecret, use Crossmint’s embedded checkout component to handle the entire KYC, payment and delivery flow automatically:

"use client";

import { CrossmintProvider, CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";

const CLIENT_API_KEY = process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY;
if (CLIENT_API_KEY == null) {
    throw new Error("NEXT_PUBLIC_CROSSMINT_CLIENT_SIDE_API_KEY is not set");
}
<CrossmintProvider apiKey={CLIENT_API_KEY}>
    <div className="max-w-[450px] w-full mx-auto">
        <CrossmintEmbeddedCheckout
            orderId={orderId}
            clientSecret={clientSecret}
            payment={{
                receiptEmail,
                crypto: { enabled: false },
                fiat: { enabled: true },
                defaultMethod: "fiat",
            }}
        />
    </div>
</CrossmintProvider>;

4. Transaction Completion

Upon successful payment:

• The purchased tokens (minus fees) are sent directly to the user’s wallet
• User receives an email receipt from [e-mail]
• The embedded checkout component handles all the complexity of KYC verification and payment processing automatically

5. Next Steps

• Explore our Payment Methods Guide to learn about different payment options
• Check out our Production Launch Guide for going live