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

# React - Webview

> Embed a card checkout for NFTs or tokens into a web app in under 5 minutes

![Crossmint Embedded Checkout Demo](https://mintcdn.com/crossmint/ZW9iqt6NGtSVc_iV/images/payments/embedded-v3/quickstart/hello-world.png?fit=max\&auto=format\&n=ZW9iqt6NGtSVc_iV\&q=85\&s=2f4e0c7ca04730faed92ecb9943492a4)

You will build this demo

## Introduction

In this guide, you will create a web app with Next.js which allows customers to buy NFTs or tokens with credit card and crypto payments, using Crossmint's embedded checkout.

If you want to get started immediately, you can clone a repo with a functioning embedded checkout here: [https://github.com/Crossmint/crossmint-embedded-demo](https://github.com/Crossmint/crossmint-embedded-demo). If you want to get started step by step, continue following the guide below.

> [tab] NFTs
>
> <Snippet file="embedded-checkout-v3-prereqs.mdx" />

> [tab] Memecoins & Tokens
>
> <Snippet file="enterprise-feature.mdx" />
>
> <Snippet file="memecoins_important_notes.mdx" />
>
> <Snippet file="memecoins_prerequisites.mdx" />
>
> <Snippet file="memecoins_fungible_token_specification.mdx" />

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

**1. Add environment variables**

Create `.env.local` in your project root:

> [tab] NFTs
>
> ```bash theme={null}
> NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY="<your-client-api-key>"    # From API Keys page
> NEXT_PUBLIC_COLLECTION_ID="<your-collection-id>"      # From Collection details page
> ```

> [tab] Memecoins & Tokens
>
> ```bash theme={null}
> NEXT_PUBLIC_CROSSMINT_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
> ```
>
> > [!NOTE]
> >
> > **Testing in Staging?** Use the XMEME test token:
> > `solana:7EivYFyNfgGj8xbUymR7J4LuxUHLKRzpLaERHLvi7Dgu`. Production tokens will not work in the staging
> > environment.

**2. Create the checkout page**

Replace your home page (e.g `{root_dir}/app/page.tsx`) with:

> [tab] NFTs
>
> ```tsx theme={null}
> "use client";
>
> import { CrossmintProvider, CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";
>
> export default function Home() {
>     const clientApiKey = process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY as string;
>     const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID 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
>                         lineItems={{
>                             collectionLocator: `crossmint:${collectionId}`,
>                             callData: {
>                                 totalPrice: "0.001",
>                                 quantity: 1,
>                             },
>                         }}
>                         payment={{
>                             crypto: { enabled: true },
>                             fiat: { enabled: true },
>                         }}
>                     />
>                 </div>
>             </CrossmintProvider>
>         </div>
>     );
> }
> ```

> [tab] Memecoins & Tokens
>
> ```tsx theme={null}
> "use client";
> import { CrossmintProvider, CrossmintEmbeddedCheckout } from "@crossmint/client-sdk-react-ui";
>
> export default function Home() {
>     const clientApiKey = process.env.NEXT_PUBLIC_CROSSMINT_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 tokens
>                         }}
>                         lineItems={{
>                             tokenLocator: `solana:${tokenAddress}`, // Token address in format solana:tokenAddress
>                             executionParameters: {
>                                 mode: "exact-in", // 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>
>     );
> }
> ```
>
> Note the key parameters: `executionParameters.mode` is `"exact-in"` for fungible token purchases (the
> exact USD amount to spend; `"exact-out"` is for NFTs), and `maxSlippageBps` sets an optional slippage
> tolerance. For more details on `tokenLocator` formatting, see the [item selection
> guide](https://docs.crossmint.com/payments/guides/select-items.md).

**3. Run your app**

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

**4. Test your app**

Test purchases in staging using test credit cards, like `4242424242424242` (Visa). More information on testing can be found [here](https://docs.crossmint.com/payments/advanced/testing-tips.md#test-credit-card-numbers).

## Advanced Integration

Need purchase tracking, multiple NFT purchases at once, or more customization? Here's a complete setup with additional features:

```tsx theme={null}
"use client";

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

// Component with purchase tracking
function Checkout() {
    const { order } = useCrossmintCheckout();
    const collectionId = process.env.NEXT_PUBLIC_COLLECTION_ID as string;

    useEffect(() => {
        if (order && order.phase === "completed") {
            console.log("Purchase completed!");
            // Handle successful purchase
        }
    }, [order]);

    return (
        <CrossmintEmbeddedCheckout
            lineItems={[
                {
                    collectionLocator: `crossmint:${collectionId}`,
                    callData: {
                        totalPrice: "0.001",
                        quantity: 1,
                    },
                },
                {
                    collectionLocator: `crossmint:${collectionId}`,
                    callData: {
                        totalPrice: "0.002",
                        quantity: 2,
                    },
                },
            ]}
            payment={{
                crypto: {
                    enabled: true,
                    defaultChain: "polygon", // Set preferred blockchain
                    defaultCurrency: "matic", // Set preferred crypto
                },
                fiat: {
                    enabled: true,
                    defaultCurrency: "usd", // Set preferred fiat currency
                    allowedMethods: {
                        card: true,
                        applePay: true,
                        googlePay: true,
                    },
                },
                receiptEmail: "receipt@example.com", // Optional: Set receipt email
            }}
            recipient={{
                email: "buyer@example.com", // Items will be delivered to this email's wallet
                // Or use walletAddress: "0x..." for direct delivery
            }}
            locale="en-US" // Set interface language
        />
    );
}

// Main component with providers
export default function Home() {
    const clientApiKey = process.env.NEXT_PUBLIC_CROSSMINT_CLIENT_API_KEY as string;

    return (
        <div className="flex flex-col items-center justify-start min-h-screen p-6">
            <CrossmintProvider apiKey={clientApiKey}>
                <CrossmintCheckoutProvider>
                    <Checkout />
                </CrossmintCheckoutProvider>
            </CrossmintProvider>
        </div>
    );
}
```

> [!NOTE]
>
> This advanced example showcases multiple items in one checkout, purchase status tracking, preferred payment methods
> and currencies, email-based delivery, and language settings. Learn more: [Payment
> Methods](https://docs.crossmint.com/payments/concepts/payment-methods.md) · [Select Items](https://docs.crossmint.com/payments/guides/select-items.md) · [Hooks &
> Events](https://docs.crossmint.com/payments/guides/hooks-and-events.md)

### Testing Your Integration

> [!NOTE]
>
> This demo uses the staging environment:
>
> * Use [test credit cards](https://docs.crossmint.com/payments/advanced/testing-tips.md#test-credit-card-numbers) for payments
> * Get test USDC from the [faucet](https://docs.crossmint.com/payments/advanced/testing-tips.md#getting-test-tokens)
> * Check [price limits](https://docs.crossmint.com/payments/advanced/testing-tips.md#limits-in-staging) for staging

## All Set!

You've successfully integrated card and crypto payments with the Crossmint Embedded Checkout!

![](https://mintcdn.com/crossmint/ZW9iqt6NGtSVc_iV/images/payments/embedded-v3/quickstart/hello-world.png?fit=max\&auto=format\&n=ZW9iqt6NGtSVc_iV\&q=85\&s=2f4e0c7ca04730faed92ecb9943492a4)

> [!NOTE]
>
> Remember this demo is built on staging, so the digital assets will show up on the testnets. To launch on production,
> check the [production checklist](https://docs.crossmint.com/payments/guides/production-checklist.md). You will need to contact
> [Sales](https://www.crossmint.com/contact/sales) to enable the embedded checkout on production.

## Next Steps

> [card] [Appearance](https://docs.crossmint.com/payments/guides/appearance.md)
>
> Customize the look and feel of your checkout

> [card] [Payment Methods](https://docs.crossmint.com/payments/concepts/payment-methods.md)
>
> Configure available payment options for your users

> [card] [Hooks & Events](https://docs.crossmint.com/payments/guides/hooks-and-events.md)
>
> Use React hooks to build custom checkout experiences

> [card] [Localization](https://docs.crossmint.com/payments/guides/localization.md)
>
> Set the checkout language and payment currency