PaymentMethodCard

Usage

Render one card per saved payment method, usually inside a CardGrid (the account-page template composes exactly that). Wire both onSetDefault and onRemove — a card without callbacks renders as a pure display row with no actions.

import { PaymentMethodCard, CardGrid } from '@epasslive/design-system'

<CardGrid
  items={paymentMethods}
  keyExtractor={(pm) => pm.id}
  columns={2}
  renderItem={(pm) => (
    <PaymentMethodCard
      brand={pm.brand}
      last4={pm.last4}
      expiryMonth={pm.expiryMonth}
      expiryYear={pm.expiryYear}
      isDefault={pm.isDefault}
      onSetDefault={() => setDefault(pm.id)}
      onRemove={() => remove(pm.id)}
    />
  )}
  emptyMessage="No payment methods on file."
/>

Display card vs. selection card

PaymentMethodCard is a display card, not a selection control. It has no selected state, no onSelect, and no radio/aria-pressed semantics — it shows one saved method and manages it. When checkout needs to let a shopper choose between saved methods, that is a selection molecule’s job (the deprecated paymentmethod pattern carried the radio semantics; a replacement selection row is a separate need). Do not bolt selection onto this card by intercepting card clicks — keep the two concerns on separate components.

Accessibility

The root exposes role="group" with the accessible name "${brand} ending in ${last4}", so the card announces itself before its actions. Actions are native <button type="button"> elements (keyboard-operable by construction) with min-h-[var(--ep-tap-min)] tap targets (WCAG 2.5.5) and visible focus-visible rings — teal for Set-default, error-red for Remove. The Remove button carries the specific label Remove ${brand} ending in ${last4} so screen-reader users know which card will be removed. The brand is text (no logo <img>), so no alt-text is involved. After a successful Set-default, the "Default" badge appears via parent re-render; announce the change at the consumer level (e.g. a polite aria-live region) — the molecule itself does not own a live region.

Dark mode

Every color is token-driven (bg-ep-surface-card, border-ep-border, text-ep-text-heading/-muted/-teal, text-ep-semantic-error), and each token has a light and dark definition, so the card flips automatically under data-theme="dark". The Default badge tint stays AA in both themes (5.70:1 light / 4.75:1 dark).

Responsive

The header row (brand + badge … actions) is flex flex-wrap … gap-2: on narrow widths (a 320px viewport or a 2-column CardGrid) the action cluster wraps below a long brand such as "AMERICAN EXPRESS" instead of colliding with it.

Props