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

> Create a fully customized checkout experience with credit cards.

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

## Introduction

In this quickstart you'll learn how to accept credit card payments (including Apple and Google Pay) using Crossmint's headless APIs to purchase an NFT on the `polygon-amoy` testnet

## Prerequisites

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

## Integration Steps

<Snippet file="headless-credit-card-integration-steps-intro.mdx" />

### 1. Create an Order

<Snippet file="headless-create-order-preamble.mdx" />

```json theme={null}
{
    "payment": {
        "method": "card",
    },
    "lineItems": [
        {
            "collectionLocator": "crossmint:<collectionId>", // Use the collectionId you created in the Prerequisites section
            "callData": {
                "totalPrice": "0.0001"
            }
        }
    ]
}
```

<Accordion title="Example Response">
  ```json theme={null}
  {
    "clientSecret": "_removed_",
    "order": {
      "orderId": "cc40e6af-f8dc-4ac2-8e26-d91a32f271cf",
      "phase": "quote",
      "locale": "en-US",
      "lineItems": [
        {
          "chain": "polygon-amoy",
          "quantity": 1,
          "callData": {
            "quantity": 1
          },
          "metadata": {
            "name": "Headless Demo",
            "description": "NFT Checkout Demo",
            "imageUrl": "https://utfs.io/f/cd8545b7-3410-4fcd-988d-cd11951ed53c-g287ok.png"
          },
          "quote": {
            "status": "requires-recipient",
            "charges": {
              "unit": {
                "amount": "0.000169004",
                "currency": "eth"
              }
            },
            "totalPrice": {
              "amount": "0.000169004",
              "currency": "eth"
            }
          },
          "delivery": {
            "status": "awaiting-payment"
          }
        }
      ],
      "quote": {
        "status": "requires-recipient",
        "quotedAt": "_DATE_",
        "expiresAt": "_DATE_",
        "totalPrice": {
          "amount": "0.000169004",
          "currency": "eth"
        }
      },
      "payment": {
        "status": "requires-quote",
        "method": "basis-theory",
        "preparation": {},
      }
    }
  }
  ```
</Accordion>

<Snippet file="headless-create-order-ending.mdx" />

### 2. Update the Order with Recipient

<Snippet file="headless-update-order-preamble.mdx" />

<Warning>
  Legally, for card payments, **an email *must* be specified** in order to deliver a receipt to your user, either in
  `recipient.email` or in `payment.receiptEmail`. If one is not specified, the API will not return the fields
  necessary to collect the user's payment.
</Warning>

<Tabs>
  <Tab title="Email recipient">
    ```json theme={null}
    {
        "recipient": {
            "email": "test@example.com"
        }
    }
    ```
  </Tab>

  <Tab title="Wallet recipient with receipt email">
    ```json theme={null}
    {
        "recipient": {
            "walletAddress": "0xabcd1234..."
        },
        "payment": {
            "method": "card", // When updating the payment, you must pass the complete object
            "receiptEmail": "test@example.com"
        }
    }
    ```
  </Tab>
</Tabs>

### 3. Render the Crossmint Embedded Component

After creating an order, you'll need to render the Crossmint Embedded Component to collect payment information. This secure, embeddable UI component lets you accept payment methods, validates input, and handles errors:

```tsx theme={null}
import { CrossmintEmbeddedCheckout, CrossmintProvider } from "@crossmint/client-sdk-react-ui";

export function MyCheckoutPage({ clientSecret, order, recipientWalletAddress, receiptEmail }) {
  return (
    <div className="w-full">
      <CrossmintProvider apiKey="<YOUR CLIENT SIDE KEY>">
        <CrossmintEmbeddedCheckout 
          recipient={{ walletAddress: recipientWalletAddress}}
          clientSecret={clientSecret}
          orderId={order.orderId}
          payment={{
            crypto: {
                enabled: false,
            },
            fiat: {
                enabled: true,
            },
            defaultMethod: "fiat",
            receiptEmail: receiptEmail,
          }}
          appearance={{
              rules: {
                  DestinationInput: {
                      display: "hidden",
                  },
                  ReceiptEmailInput: {
                      display: "hidden",
                  },
              },
          }} />
      </CrossmintProvider>
    </div>
  );
}
```

<Tip>
  The `CrossmintEmbeddedCheckout` component is highly customizable. You can adjust colors, styling, layout, and behavior to match your brand. Learn more in our [UI customization guide](/payments/embedded/guides/ui-customization).
</Tip>

### 4. Poll for Status Updates

<Snippet file="poll-for-status-updates.mdx" />

## Next Steps

<Snippet file="headless-next-steps.mdx" />