Ajax UI
Components/Payment Method Picker

Payment Method Picker

Large touch buttons for picking how the customer pays - and, with showDetails, the full capture panel each method needs to execute: card number/expiry/CVC + holder + installments, cash received + change, the Pix QR, or voucher code.

Total da compra: R$ 129,90

Interaja com o painel do método selecionado - o estado chega via onDetailsChange.

Installation

npx @ajax-ui/cli add payment-method-picker

Props

  • methods - array of { id, label, kind?, icon?, badge?, disabled? }. kind ("cash" | "credit" | "debit" | "pix" | "voucher" | "other") picks the built-in SVG icon and the capture panel; icon overrides the icon.
  • showDetails - renders the selected method's capture panel below the tiles. Panel state resets when the method changes, so card digits never leak across methods.
  • totalCents - purchase total in minor units; enables change math (cash) and installments (credit).
  • pixPayload - BR Code rendered by the Pix panel's QR.
  • onDetailsChange(details) - discriminated union by kind; every variant carries complete so the POS can enable its charge button.
  • value + onValueChange for controlled selection; defaultValue for uncontrolled.
  • size "sm" | "md" | "lg" · layout "grid" | "list" · columns 2 | 3 | 4 · currency / locale.

Composition

The panels reuse the finance primitives - MoneyInput (cash), CreditCardInput + InstallmentsSelector (cards) and PixQr (Pix) - so behavior, validation, and the integer-cents contract stay identical whether you use them composed here or standalone. Icons are built-in inline SVGs (never emoji, per the design system's hard rule).

Accessibility

Tiles render as role="radiogroup" with each option role="radio" aria-checked; panel fields are native labeled inputs inheriting each primitive's accessibility (numeric keyboards, aria-invalid, password-type CVC).