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

> Payment acceptance phase of the order lifecycle for credit cards.

The order lifecycle can be summarized as follows:

<Steps>
  <Step title="Order Creation or Update">
    Your application determines recipient info for the buyer. It can be an email wallet or wallet address. Create or
    update an order with this info to proceed to next step.
  </Step>

  <Step title="API Response">
    The API response returned from create/update order call(s) will include a `clientSecret` and `order` object that your
    application uses to render the Crossmint Embedded Component.
  </Step>

  <Step title="Render Crossmint Embedded Component">
    Use the `clientSecret` and `order.orderId` returned in the API response to render the Crossmint Embedded Component
    for credit card checkout.
  </Step>

  <Step title="User Completes Payment">The buyer completes checkout via credit card.</Step>

  <Step title="Poll for Status">
    Your application will poll the GET order status and update the UI as the order progresses to the next phase.
  </Step>
</Steps>

<Note>During the initial `quote` phase of the order the payment status will be `requires-quote`.</Note>

Once the quote phase is completed, the order enters the payment phase and will have the status `awaiting-payment`, which indicates that the order is ready to be paid.

For the complete, authoritative list of payment statuses and their meanings, see the [Status Codes](/payments/headless/guides/status-codes) page. |

### Render the Crossmint Embedded Component

When the order is ready to accept payment, the API response will include a `clientSecret` and `order` object. You can use these with the Crossmint Embedded Component to collect the user's credit card payment.

<Accordion title="Example response">
  ```json theme={null}
  {
    "clientSecret": "_YOUR_CLIENT_SECRET_",
    "order": {
      "orderId": "5ddc0090-7f63-4f6a-b68d-a91f8253b02e",
      "phase": "payment",
      "locale": "en-US",
      "lineItems": [], // removed for brevity
      "quote": {
        "status": "valid",
        "quotedAt": "_timestamp_",
        "expiresAt": "_timestamp_",
        "totalPrice": {
          "amount": "0.5",
          "currency": "usd"
        }
      },
      "payment": {
        "status": "awaiting-payment",
        "method": "basis-theory",
        "currency": "usd",
        "preparation": {},
        "receiptEmail": "test@example.com"
      }
    }
  }
  ```
</Accordion>

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,
                allowedMethods: {
                    card: true,
                    applePay: false,
                    googlePay: false,
                },
            },
            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>

### Poll for Status Updates

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

### Handling Refunded Payments

When polling for order status, you may encounter a situation where `payment.status` is `completed` but the order also contains a `payment.refunded` property. This indicates that the payment was initially successful but has since been refunded.

```json theme={null}
{
    "order": {
        "payment": {
            "status": "completed",
            "refunded": {
                "amount": "1.00",
                "currency": "usd"
            }
        }
    }
}
```

The `payment.refunded` object includes the following fields:

* `amount`: The amount that was refunded
* `currency`: The currency of the refund

When you encounter this state, your application should:

1. Display an appropriate message to the user indicating that their payment was refunded
2. Prevent any further actions related to the order (such as delivery expectations)
3. Provide options for the user to place a new order if desired

This state typically occurs when there was an issue with processing the order after payment was received, such as insufficient liquidity for memecoin purchases or compliance issues.