Enterprise feature. Contact us for access.

​
Introduction

This guide will show you how to accept credit card payments using Crossmint’s Embedded Checkout for memecoin sales. You’ll learn how to:
  • Set up credit card payments for Solana memecoin purchases in JavaScript
  • Implement an embedded checkout UI using Crossmint’s React components
  • Track order status and delivery

​
Important Notes

Compliance Checks

Crossmint runs compliance checks on all tokens to ensure they do not qualify as securities or currencies under applicable regulations. Transactions for tokens that are determined to be too similar to securities or currencies will fail.

Supported Tokens

Currently, memecoin checkout only supports Solana network. You can check which tokens are supported by using the fungibleCheckoutAvailable endpoint. A more in depth guide on token support is here.

Delivery to External Wallets Only

Memecoin checkout only delivers memecoins to EOAs (Externally Owned Accounts), not Crossmint supported delivery solutions, such as on-the-fly wallet creation (both Crossmint custodial wallets and smart wallet), delivery to Twitter handle, etc.

Merchant of Record

Crossmint remains the merchant of record for all transactions. Your buyers will still receive delivery receipts and transaction confirmations from Crossmint.

​
Prerequisites

1

Solana Wallet

Have a Solana wallet address ready to receive purchased memecoins
2

Get API Keys

Get your API keys from the Crossmint Console
Navigate to the "Integrate" section on the left navigation bar, and ensure you're on the "API Keys" tab.Within the Client-side keys section, click the "Create new key" button in the top right.On the authorized origins section, enter http://localhost:3000 and click "Add origin".Next, check the scopes labeled orders.create.Finally, create your key and save it for subsequent steps.

​
Fungible Token Specification

To define which fungible token you'd like to purchase, you'll need to specify the tokenLocator in the format:
  • For Solana: solana:${tokenMintHash}
    • Example: solana:6p6xgHyF7AeE6TZkSmFsko444wqoP15icUSqi2jfGiPN
    • tokenMintHash: The token mint hash (commonly known as contract address, CA, or mint hash)
  • For EVM chains (Ethereum, Polygon, Arbitrum, Base, etc.): <blockchain>:<contractAddress>:<tokenId>
    • Example: ethereum:0x1234567890123456789012345678901234567890:1
    • blockchain: The chain name (ethereum, polygon, arbitrum, base, etc.)
    • contractAddress: The token contract address (40 hexadecimal characters)
    • tokenId: For fungible tokens, use "1" as a placeholder value (required by validation schema)
EVM Fungible Token Format: While fungible tokens don't conceptually have individual token IDs, Crossmint's validation schema requires the 3-part format <blockchain>:<contractAddress>:<tokenId> for all EVM tokens. For fungible tokens (memecoins), use "1" as the tokenId value.

​
Embedded Memecoin Checkout

The fastest way to start selling memecoins is to use our embedded checkout solution adapted for fungible tokens.

​
Important Parameters

Before implementing the checkout, note these key parameters:
  • receiptEmail: Required for delivering payment receipts
  • executionParameters.mode: Set to “exact-in” for memecoin purchases (specifies exact USD amount to spend). “exact-out” is for NFTs, while “exact-in” is for fungible tokens.
  • maxSlippageBps: Optional slippage tolerance (default is typically 500 BPS or 5% if not specified)
Memecoins are testable in staging using the xmeme token on Solana devnet (7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu). For production launch with live memecoin tokens, contact our sales team.

​
Integration Steps

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:

​
Set up the Project

1

Create a new Next.js application

npx create-next-app@latest
If you see this message, type y and press Enter to proceed:
Need to install the following packages:
  create-next-app@latest
Ok to proceed? (y)
2

Name your app `crossmint-embedded-checkout-demo` and accept the default options

What is your project named? crossmint-embedded-checkout-demo
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias? No
3

Change into the directory created in previous steps

cd crossmint-embedded-checkout-demo
4

Install @crossmint/client-sdk-react-ui

npm i @crossmint/client-sdk-react-ui
5

Open the project in your preferred code editor

​
Memecoin Embedded Integration

Next, we will set up a project file with Crossmint’s embedded checkout to accept memecoin purchases.
1

Add environment variables

Create .env.local in your project root:
NEXT_PUBLIC_CLIENT_API_KEY="_YOUR_CLIENT_API_KEY_"                    # From API Keys page
NEXT_PUBLIC_TOKEN_ADDRESS="7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu" # xmeme token for staging testing
NEXT_PUBLIC_RECIPIENT_WALLET_ADDRESS="YOUR_SOLANA_WALLET_ADDRESS"     # Add desired recipient wallet
NEXT_PUBLIC_RECEIPT_EMAIL="YOUR_EMAIL"                               # Add desired recipient email
2

Create the checkout page

Create /src/app/page.tsx with:
"use client";
import { CrossmintProvider, CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";

export default function Home() {
    const clientApiKey = process.env.NEXT_PUBLIC_CLIENT_API_KEY as string;
    const tokenAddress = process.env.NEXT_PUBLIC_TOKEN_ADDRESS as string;
    const recipientWalletAddress = process.env.NEXT_PUBLIC_RECIPIENT_WALLET_ADDRESS as string;

    return (
        <div className="flex flex-col items-center justify-start h-screen p-6 bg-white">
            <CrossmintProvider apiKey={clientApiKey}>
                <div className="max-w-[450px] w-full">
                    <CrossmintEmbeddedCheckout
                        recipient={{
                            walletAddress: recipientWalletAddress, // Wallet address to receive the memecoins
                        }}
                        lineItems={{
                            tokenLocator: `solana:${tokenAddress}`, // Token address in format solana:tokenAddress (e.g., solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu for xmeme token)
                            executionParameters: {
                                mode: "exact-in", // The execution method for the order. It tells Crossmint to operate in buying fungibles mode
                                amount: "5", // Amount in USD
                                maxSlippageBps: "500" // Optional - default slippage will be applied if not specified
                            }
                        }}
                        payment={{
                            receiptEmail: process.env.NEXT_PUBLIC_RECEIPT_EMAIL as string, // Email address to receive the receipt
                            crypto: {
                                enabled: false, // Only fiat is supported for memecoin purchases
                            },
                            fiat: {
                                enabled: true,
                            },
                            defaultMethod: "fiat",
                        }}
                    />
                </div>
            </CrossmintProvider>
        </div>
    );
}
For more details on tokenLocator formatting and other item selection options, see our embedded item selection guide.
3

Run your app

npm run dev
Visit http://localhost:3000 to see your checkout!
4

Test your app

Test purchases in staging using test credit cards, like 4242424242424242 (Visa). More information on testing can be found here.For production launch with live memecoin tokens, contact our sales team.
Here’s how your embedded checkout will look after implementation: Embedded Memecoin Checkout Note the quote expiration timer above the checkout button. 🎉 Congratulations! You’ve successfully set up your embedded memecoin checkout. Check out the Next Steps section below to learn how to customize your integration.

​
Understanding the Code

Quote Expiration

Price quotes are valid for 30 seconds. After expiration, you'll need to request a new quote from the embedded checkout component

Slippage

Crossmint applies the slippage specified in your executionParameters.maxSlippageBps. If not provided, Crossmint will use the default slippage configuration (typically 500 BPS or 5%) from Crossmint's provider

​
Next Steps

Customize UI

Learn how to customize the embedded checkout experience

Handle Webhooks

Implement webhook handling for order updates

​
Order Lifecycle

The order goes through several phases: Learn more about order phases in the headless checkout guide or embedded checkout guide A summary of the phases is below:
  1. Quote Phase (30-second validity)
    • Initial price quote generated
    • Requires recipient information to proceed
  2. Payment Phase
    • Collect payment information (via Crossmint's embedded UI, or your own Checkout.com Flow component if using headless checkout)
    • Process credit card payment
    • Handle payment completion and errors
  3. Delivery Phase
    • Purchase memecoin with USDC
    • Apply specified slippage tolerance
    • Send transfer transaction to recipient wallet
  4. Completion
    • Order marked as completed
    • Receipt email sent to recipient
    • Memecoins have been delivered to the recipient wallet
If the quote expires (after 30 seconds), the embedded checkout will automatically refresh the quote. You can customize this behavior using the checkout hooks.

​
FAQ