# Payment Card

Physical or virtual bank card that flips over and tilts under your finger. A long press can reveal the full number and CVV, freezing drains it to grey, and unfreezing brings the colour back.

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

## Install

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

## Import

```tsx
import { PaymentCard } from "@/components/ui/payment-card/payment-card";
```

## Variants

- `controls` — Controls: `npx @lumioui/cli add pro/payment-card-controls`
- `virtual` — Virtual: `npx @lumioui/cli add pro/payment-card-virtual`
- `wallet` — Wallet: `npx @lumioui/cli add pro/payment-card-wallet`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `number` | `string` | Full card number — spaces optional. Only the last four show until revealed. |
| `holder?` | `string` | Name embossed on the card. |
| `expiry?` | `string` | "MM/YY". |
| `cvv?` | `string` | Security code printed on the back. |
| `issuer?` | `string` | Bank or product name, top left. |
| `label?` | `string` | Short tag beside the issuer — "Virtual", "Travel", "Joint". |
| `network?` | `string` | Plain wordmark, bottom right — "Debit", "Credit", "Business". Never a logo. |
| `kind?` | `"physical" | "virtual"` | Physical cards show a chip and contactless mark. Default "physical". |
| `finish?` | `"ink" | "light" | "accent" | "color"` | Card face: ink, light (titanium), accent (follows `<Accent>`) or a custom `color`. Default "ink". |
| `color?` | `string` | Face colour when `finish="color"` — content colour, any CSS colour. |
| `onColor?` | `"light" | "dark"` | Text tone on a custom `color` face. Default "light". |
| `revealed?` | `boolean` | Controlled number reveal. |
| `defaultRevealed?` | `boolean` | Uncontrolled initial reveal. Default false. |
| `onRevealedChange?` | `(revealed: boolean) => void` | Fires when a long-press toggles the reveal. |
| `revealOnLongPress?` | `boolean` | Long-press the card to show / hide the full number. Default true. |
| `flipped?` | `boolean` | Controlled flip — true shows the back. |
| `defaultFlipped?` | `boolean` | Uncontrolled initial flip. Default false. |
| `onFlippedChange?` | `(flipped: boolean) => void` | Fires when a tap flips the card. |
| `flipOnPress?` | `boolean` | Tap to flip. Default true when a `cvv` is given. |
| `frozen?` | `boolean` | Frozen — frost overlay, details masked, flip disabled. |
| `frozenLabel?` | `string` | Copy under the lock while frozen. Default "Frozen". |
| `tilt?` | `boolean` | Press and move to tilt the card under a following highlight. Default true. |
| `className?` | `string` | — |

## Icons rendered

- `lock` — /icons.html?i=lock

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