# Payment Button

Wallet and card pay buttons with the official marks in their own colours. While paying, the label turns into loading dots and then a check, and the button never changes size.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/payment-button
```

## Import

```tsx
import { PaymentButton } from "@/components/ui/payment-button/payment-button";
```

## Variants

- `donate` — Donation: `npx @lumioui/cli add pro/payment-button-donate`
- `express` — Express checkout: `npx @lumioui/cli add pro/payment-button-express`
- `ride` — Ride booking: `npx @lumioui/cli add pro/payment-button-ride`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `method?` | `PaymentMethod` | Wallet / rail. Default "apple". |
| `type?` | `PaymentButtonType` | Lead verb — "buy" → "Buy with", "plain" → wordmark only. Default "plain". |
| `appearance?` | `PaymentAppearance` | Colourway. "auto" picks the wallet default for the scheme (black on light, white on dark for Apple/Google; gold for PayPal; accent for card). Default "auto". |
| `label?` | `string` | Card only: the full label — "Pay $64.20". Default "Pay with card". |
| `size?` | `"md" | "lg"` | Height: md 44 · lg 52. Default "lg". |
| `radius?` | `"md" | "pill"` | Corner radius: "md" 12 · "pill" fully round. Default "md". |
| `onPress?` | `((e: GestureResponderEvent) => void) | ((e: GestureResponderEvent) => Promise<unknown>) | null` | Press handler. A returned Promise shows the processing state until it settles. |
| `status?` | `PaymentStatus` | Controlled status. Omit to derive from an async onPress. |
| `successLabel?` | `string` | Label shown on success. Default "Done". |
| `successDuration?` | `number` | Return an auto (uncontrolled) success to idle after this many ms. Omit  and the button keeps its paid state — the button is the receipt. |
| `onSettled?` | `() => void` | Fires once the success has held (~700ms) and the button has settled paid. |
| `className?` | `string` | — |

## Icons rendered

- `credit-card` — /icons.html?i=credit-card

Source: https://lumioui.com/components/payment-button