PaymentMethods

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

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { PaymentMethods, Toaster } from '@weft-js/warp'import type { PaymentMethod } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { PaymentMethods } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp'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