PaymentMethod

molecules

Payment method row — radio + icon + label + description + extra info. Used in CheckoutSummary payment selector.

ARIA Role: radio

Demo

Demo for PaymentMethod (molecules)

Payment method row — radio + icon + label + description + extra info. Used in CheckoutSummary payment selector.

Props

Prop	Type	Required	Default
`id`	`string`	Yes	`—`
`selected`	`boolean`	Yes	`—`
`onSelect`	`() => void`	Yes	`—`

TypeScript Interface

interface PaymentMethodProps {
  id: string;
  label: string;
  description?: string;
  icon: React.ReactNode;
  selected: boolean;
  onSelect: () => void;
  badge?: string;
  fee?: number;
  currency?: string;
}

Assertions (NASA Rule 5)

[type]id, selected, onSelect required(NASA Rule 5)
[aria]role='radio' inside role='radiogroup'(WAI-ARIA Radio Pattern)

Usage

Import

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

Basic

<Paymentmethod />

With Variants

<Paymentmethod variant="primary" size="md" />