> ## Documentation Index
> Fetch the complete documentation index at: https://crossmint-wallets-docs-2-5.mintlify.site/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": "stripe-payment-element"
    },
    "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",
        "preparation": {
          "stripePublishableKey": "pk_test_51KIdg4..."
        }
      }
    }
  }
  ```
</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": "stripe-payment-element", // When updating the payment, you must pass the complete object
            "receiptEmail": "test@example.com"
        }
    }
    ```
  </Tab>
</Tabs>

### 3. Render the Stripe Payment Element

After a recipient and/or a receipt email has been specified, the API will return the fields necessary to render the [Stripe Payment Element](https://docs.stripe.com/payments/payment-element) and collect the user's payment. The two fields are `stripePublishableKey` and `stripeClientSecret`, which can be found within `order.payment.preparation`.

<Snippet file="stripe-render-payment-element.mdx" />

### 4. Submitting Payment

<Snippet file="stripe-submit-payment.mdx" />

### 6. Poll for Status Updates

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

## Next Steps

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