Payment Method Sheet

ProNew

A bottom sheet that lists saved cards as a radio group with their last four digits and expiry, marks the default and lets the person add a new card. Use this when a checkout on a phone needs one payment method chosen from a short list.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

Guide and examples

When to use it

Use it when a checkout on a phone needs one payment method chosen from a short list.

Do not use it for entering a full card form (use the card form pattern) or for more than about eight saved methods.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`methods`	`PaymentMethod[]`	`required`	`{ id, brand, last4, expires, isDefault? }`.
`value`	`string`	`required`	The chosen method id.
`onValueChange`	`(id: string) => void`	`required`	Called when a card is chosen.
`onAdd`	`() => void`	`-`	Called when "Add a new card" is pressed.

Accessibility

A radio group named "Payment method"; each option's accessible text is "Visa ending 4242, expires 04/28, default".
Choosing a method closes the sheet and focus returns to the trigger, which shows the choice.
"Add a new card" is a button outside the radio group, so it is never mistaken for a method.

Testing

The pattern ships with a Testing Library test (payment-method-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when a checkout on a phone needs one payment method chosen from a short list.

Do not use it for entering a full card form (use the card form pattern) or for more than about eight saved methods.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`methods`	`PaymentMethod[]`	`required`	`{ id, brand, last4, expires, isDefault? }`.
`value`	`string`	`required`	The chosen method id.
`onValueChange`	`(id: string) => void`	`required`	Called when a card is chosen.
`onAdd`	`() => void`	`-`	Called when "Add a new card" is pressed.

Accessibility

A radio group named "Payment method"; each option's accessible text is "Visa ending 4242, expires 04/28, default".
Choosing a method closes the sheet and focus returns to the trigger, which shows the choice.
"Add a new card" is a button outside the radio group, so it is never mistaken for a method.

Testing

The pattern ships with a Testing Library test (payment-method-sheet.test.tsx) that drives it through roles and the keyboard.