PaymentMethods

Saved cards, shown by their last four digits, with make default and remove.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { PaymentMethods, Toaster } from '@kerf-js/veneer'import type { PaymentMethod } from '@kerf-js/veneer'export function Saved() {  const cards = state<readonly PaymentMethod[]>(CARDS)  return (    <>      <PaymentMethods        methods={cards}        onDefault={(card) =>          (cards.value = cards.value.map((c) => ({            ...c,            default: c.id === card.id,          })))        }        onRemove={(card) =>          (cards.value = cards.value.filter(            (c) => c !== card,          ))        }        onRestore={(card) =>          (cards.value = [...cards.value, card])        }      />      <Toaster />    </>  )}const CARDS: PaymentMethod[] = [  {    id: 'visa',    brand: 'Visa',    last4: '4242',    expires: '08/28',    default: true,  },  {    id: 'mc',    brand: 'Mastercard',    last4: '4444',    expires: '02/27',  },]

Installation

npm install @kerf-js/veneer

Usage

tsx

import { PaymentMethods } from '@kerf-js/veneer'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`methods`	`readonly PaymentMethod[] \| State<readonly PaymentMethod[]>`	—	The cards.

Event	Type	Default	Description
`onAdd`	`(() => void)`	—	Shows Add method.
`onDefault`	`(m: PaymentMethod) => void`	—	Makes one the default.
`onRemove`	`(m: PaymentMethod) => void`	—	Removes one.
`onRestore`	`((m: PaymentMethod) => void)`	—	Undo for a removal.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="item"]

item

RelatedPay frame Invoices