> ## 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 - NFTs (React)

> Embed a onchain checkout into a web app in under 5 minutes

<Frame type="simple" caption="You will build this demo">
  <img src="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" alt="Crossmint Embedded Checkout Demo" width="1390" height="1206" data-path="images/payments/embedded-v3/quickstart/hello-world.png" />
</Frame>

## Introduction

In this guide, you will create a web app with Next.js which allows customers to buy NFTs with credit card and crypto payments, using Crossmint's embedded checkout. Crossmint also supports payments for [crypto onramp](/onramp/quickstarts/react), [memecoins](/payments/headless/quickstarts/credit-card-memecoin-cko), and other onchain assets (ERC20 tokens, ERC721 tokens, and ERC1155 tokens).

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.

<Snippet file="embedded-checkout-v3-prereqs.mdx" />

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

### Basic Integration

Perfect for getting started quickly with a simple checkout flow.

<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_COLLECTION_ID="_YOUR_COLLECTION_ID_"      # From Collection details page
    ```
  </Step>

  <Step title="Create the checkout page">
    Replace your home page (e.g `{root_dir}/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 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>
        );
    }
    ```
  </Step>

  <Step title="Run your app">
    Navigate to the directory your package.json is to run the app

    ```bash theme={null}
    cd embedded-checkout/crossmint-embedded-checkout-demo
    ```

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

### 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", // NFTs 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_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 NFTs in one checkout - Purchase status tracking - Preferred payment
  methods and currencies - Email-based NFT delivery - Language settings Learn more in our guides: - [Payment
  Methods](/payments/embedded/guides/payment-methods) - [Multi-purchases](/payments/pay-button/guides/item-selection#multiple-item-orders) -
  [React Hooks](/payments/embedded/guides/hooks)
</Note>

### Testing Your Integration

<Note>
  This demo uses the staging environment: - Use [test credit
  cards](/payments/advanced/testing-tips#test-credit-card-numbers) for payments - Get test USDC from our
  [faucet](/payments/advanced/testing-tips#getting-test-tokens) - Check [price
  limits](/payments/advanced/testing-tips#limits-in-staging) for staging
</Note>

## All Set!

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

<Frame type="simple">
  <img src="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" width="1390" height="1206" data-path="images/payments/embedded-v3/quickstart/hello-world.png" />
</Frame>

<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 launch checklist](/payments/advanced/production-launch). You will need to contact
  [Sales](https://www.crossmint.com/contact/sales) to enable the embedded checkout on production.
</Note>

## Next Steps

### Customize the UI and Behavior Further

<CardGroup cols={3}>
  <Card title="UI Customization" icon="paintbrush" iconType="duotone" href="/payments/embedded/guides/ui-customization">
    Learn how to customize the look and feel of your checkout
  </Card>

  <Card title="Payment Methods" icon="credit-card" iconType="duotone" href="/payments/embedded/guides/payment-methods">
    Configure available payment options for your users
  </Card>

  <Card title="React Hooks" icon="code" iconType="duotone" href="/payments/embedded/guides/hooks">
    Use React hooks to build custom checkout experiences
  </Card>
</CardGroup>

### Advanced Topics

<CardGroup cols={3}>
  <Card title="SDK Reference" icon="gear" iconType="duotone" color="9E9E9E" href="/payments/embedded/reference/react" />

  <Card title="Launch in Production" icon="ship" iconType="duotone" color="3AA9D8" href="/payments/advanced/production-launch" />

  <Card title="Localization" icon="globe" iconType="duotone" color="1983EF" href="/payments/embedded/customize/localization" />

  <Card title="Multi-purchases" icon="cart-plus" iconType="duotone" color="FF7C9F" href="/payments/pay-button/guides/item-selection#multiple-item-orders" />
</CardGroup>