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

> 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 `payment.preparation` object that your
    application uses to render the Stripe payment element.
  </Step>

  <Step title="Render Stripe Payment Element">
    Use the `stripePublishableKey` and `stripeClientSecret` returned in the API response to render the credit card
    checkout form.
  </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.

See below the full list of possible statuses:

| Payment Status                      | Explanation                                        |
| ----------------------------------- | -------------------------------------------------- |
| `requires-quote`                    | still in the quote phase                           |
| `awaiting-payment`                  | ready to submit payment                            |
| `completed`                         | order is in the delivery or order completion phase |
| `completed` with `payment.refunded` | payment was completed but has been refunded        |

### Render the Stripe Payment Element

When the order is ready to accept payment, the API response will include an `order.payment.preparation` object, which contains two important properties to render the payment element. These properties are named: `stripePublishableKey` and `stripeClientSecret`. You can use these with the [Stripe Payment Element](https://docs.stripe.com/payments/payment-element) package 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": "stripe-payment-element",
        "currency": "usd",
        "preparation": {
          "stripeClientSecret": "pi_returned_secret_",
          "stripePublishableKey": "pk_test_publishable_key_value"
        }
      }
    }
  }
  ```
</Accordion>

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

### Handle Payment Confirmation

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

### 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",
                "txId": "0x1234abcd...",
                "chain": "ethereum"
            }
        }
    }
}
```

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

* `amount`: The amount that was refunded
* `currency`: The currency of the refund
* `txId`: The on-chain transaction ID the refund was sent in
* `chain`: The blockchain where the refund transaction occurred

When you encounter this state, your application should:

1. Display an appropriate message to the user indicating that their payment was refunded
2. Provide the transaction ID (`txId`) so users can verify the refund on-chain
3. Prevent any further actions related to the order (such as delivery expectations)
4. 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.