> ## Documentation Index
> Fetch the complete documentation index at: https://docs.crossmint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pay with Card - Memecoins (React)

> Create a fully customized embedded memecoin checkout experience that accepts credit cards

<Snippet file="enterprise-feature.mdx" />

## 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

<Snippet file="memecoins_important_notes.mdx" />

<Snippet file="memecoins_prerequisites.mdx" />

<Snippet file="memecoins_fungible_token_specification.mdx" />

## 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)

<Note>
  **Testing in Staging?** Use the XMEME test token: `solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu`. Production tokens will not work in the staging environment.
</Note>

<Snippet file="payments-setup.mdx" />

### Memecoin Embedded Integration

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

<Steps>
  <Step title="Add environment variables">
    Create `.env.local` in your project root:

    ```sh theme={null}
    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
    ```
  </Step>

  <Step title="Create the checkout page">
    Create `/src/app/page.tsx` with:

    ```tsx theme={null}
    "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](/payments/embedded/guides/item-selection#item-selection-examples).
  </Step>

  <Step title="Run your app">
    <Snippet file="run-your-app.mdx" />
  </Step>

  <Step title="Test your app">
    Test purchases in staging using test credit cards, like `4242424242424242` (Visa). More information on testing can be found [here](/payments/advanced/testing-tips#test-credit-card-numbers).

    For production launch with live memecoin tokens, [contact our sales team](https://www.crossmint.com/contact/sales).
  </Step>
</Steps>

Here's how your embedded checkout will look after implementation:

<img src="https://mintcdn.com/crossmint/ZW9iqt6NGtSVc_iV/images/memecoin-checkout/embedded-memecoin-finished.png?fit=max&auto=format&n=ZW9iqt6NGtSVc_iV&q=85&s=fc161990609e0c17c81e1d606d07ce11" alt="Embedded Memecoin Checkout" width="1020" height="1406" data-path="images/memecoin-checkout/embedded-memecoin-finished.png" />

Note the quote expiration timer above the checkout button.

🎉 Congratulations! You've successfully set up your embedded memecoin checkout. Check out the [Next Steps](#next-steps) section below to learn how to customize your integration.

<Snippet file="memecoins-understanding-the-code.mdx" />

## Next Steps

<CardGroup cols={2}>
  <Card title="Customize UI" icon="paintbrush" href="/payments/embedded/guides/ui-customization">
    Learn how to customize the embedded checkout experience
  </Card>

  <Card title="Handle Webhooks" icon="bell" href="/payments/advanced/webhooks">
    Implement webhook handling for order updates
  </Card>
</CardGroup>

<Snippet file="memecoins_order_lifecycle.mdx" />

<Note>
  If the quote expires (after 1 minute), the embedded checkout will automatically refresh the quote. You can
  customize this behavior using the checkout hooks.
</Note>

<Snippet file="memecoins_faq.mdx" />