PaymentMethod

Usage

import { PaymentMethod } from '@epasslive/design-system'

const methods = [
  { id: 'card_visa', label: 'Visa •••• 4242', description: 'Expire 12/27', icon: <VisaIcon /> },
  { id: 'apple_pay', label: 'Apple Pay', description: 'Validation Face ID' },
]

{methods.map((m) => (
  <PaymentMethod
    key={m.id}
    id={m.id}
    name="payment_method"
    label={m.label}
    description={m.description}
    icon={m.icon}
    selected={selected === m.id}
    onSelect={setSelected}
  />
))}

When to use

• CheckoutSummary payment selector (Visa / MC / Apple Pay / Nuvei).
• Saved payment methods in the account dashboard.
• Admin deposit / payout method picker.

Accessibility

Each row is a real <label> wrapping the radio input \u2014 the entire row is the click target, so touch and keyboard users both get a large hit area. The icon is decorative (the label carries the meaning). Selected state is exposed via the underlying checked attribute.

Props