Payment Method

Pro

Saved payment method as a list row, card tile or checkout row with official network and wallet marks. Expired cards can’t be picked, and an add-new row is included.

Preview

Installation

npx @lumioui/cli add pro/payment-method

Usage

import { PaymentMark, PaymentMethodItem, PaymentMethodAdd } from "@/components/ui/payment-method/payment-method";
<PaymentMethod />

Also exported: PaymentMark, PaymentMethodItem, PaymentMethodAdd.

Examples

Add new

The payment methods page of an account.

Checkout row

The bottom of a food-delivery basket.

Radio list

The "Pay with" step of a checkout.

API reference

PaymentMark

Prop Type Default
network* PaymentNetwork —
size "sm" | "md" | "lg"

sm 34×24 · md 46×32 · lg 58×40. Default "md".

 "md"
sheen number

Bump to send one sheen across the mark (e.g. when it is picked).

 0
className string —

PaymentMethodItem

Prop Type Default
network* PaymentNetwork —
label string

Title override — "Joint account", "Work Amex".

 —
last4 string

Last four digits of the card or account.

 —
expiry string

"08/28".

 —
description string

Second line override — "Ends 0418 · Harbor Bank".

 —
isDefault boolean

Shows a "Default" badge.

 false
expired boolean

Expired card — red expiry line, not selectable.

 false
selected boolean

Selected state for radio / check / tile.

 false
onSelect () => void

Fires when the viewer picks this method.

 —
layout "row" | "tile" | "compact"

row 64pt · tile mini card · compact 52pt one-liner. Default "row".

 "row"
control
"radio" | "check" +2 "radio" | "check" | "chevron" | "none"

Trailing control on row. Default "radio" when onSelect is set, else "none".

 —
actionLabel string

Compact layout's trailing action. Default "Change".

 "Change"
onAction () => void

Compact layout's action (defaults to onSelect).

 —
separator boolean

Hairline under a row, inset to the text.

 false
filled boolean

Tile layout: the picked tile becomes a filled accent card (spring.glide) instead of taking a ring. Default false.

 false
className string —

PaymentMethodAdd

Prop Type Default
label string

Default "Add payment method".

 "Add payment method"
description string

Second line — "Debit, credit or bank account".

 —
layout "row" | "tile"

row matches PaymentMethodItem rows; tile matches its cards. Default "row".

 "row"
className string —