Payment method pickerPro

Saved cards, wallets and bank accounts with masked numbers, expiry warnings and a new card added inline.

Markdown

On this page

ProSaved cards, a wallet and a bank account, one expiring soon and one expired, with a new card added inline.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/payment-method-picker

Usage

tsx

import { PaymentMethodPicker } from "@/components/ui/chatcn/pro/payment-method-picker"

<PaymentMethodPicker
  methods={wallet.methods}
  amount={164.5}
  onPay={(id) => checkout.pay(id)}
  onAddCard={(card) => wallet.addCard(card)}
/>

Cards show a small drawn card with the last four on it, never a network logo; pass mark to use your own. A card that expires within soonMonths says so in amber, and an expired card stays in the list, greyed, with its date and how to fix it, instead of silently vanishing. unavailable greys a method with your reason. The new card form is one field shaped like a card: the number groups itself as you type (four four four four, or four six five), ticks once it passes the checksum, and the expiry fills its own separator. Errors appear after a field is left, and say what to check. The Pay button names the amount and the method.

Examples

States

ProA declined payment with an unavailable method, nothing saved, loading, disabled.

Props

Prop	Type	Notes
`methods`	`{ id, kind: "card" \| "wallet" \| "bank", label, network?, mark?, last4?, expiry?, note?, unavailable? }[]`	Expiry as MM/YY
`value`, `defaultValue`, `onValueChange`	`string`	The chosen method id
`amount`	`number`	Named in the header and on Pay
`currency`, `locale`	`string`	Prices format with `Intl`, tabular figures. Default `USD`, `en-US`
`onPay`	`(id) => unknown \| Promise<unknown>`	Reject with an Error to show it
`onAddCard`	`({ number, expiry, cvc, save }) => PaymentMethod \| undefined \| Promise<...>`	Shows Add a card; resolve with the saved method to select it
`now`, `soonMonths`	`Date`, `number`	For expiry checks. Default now and 2
`loading`, `disabled`	`boolean`	States
`labels`	`Partial<PaymentMethodPickerLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	Into the methods (one stop), Add a card, then Pay
Arrow keys	Move between methods (native radios)
Enter	Submit the new card form

Accessibility

Methods are a radio group named by the title; each radio is named with the label and the last four.
Expired and unavailable reasons are linked with aria-describedby; expired cards add how to fix it.
Card fields have real labels, autocomplete card hints and aria-invalid with the error linked.
The paid line is a status message; a declined payment is an alert that says nothing was charged.

Motion

The radio dot scales in 150 ms. The card form and the paid line fade up 4 px in 180 ms; the number tick fades in 150 ms. Reduced motion keeps the fades only.