caliper uidocs
DemoSign inGet Pro

Payment methods

Pro

The cards on an account and a form to add one: brand detected as you type, the number checked before sending, expiry warnings, a bank confirmation step, and a default that cannot be removed by accident.

Installs components/ui/payment-methods.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/payment-methods

Payment methods

  • Visa ending 4242Expires 08/28Default
  • Mastercard ending 4444Expires 11/26 · update it before then

Test numbers: 4242 4242 4242 4242 adds; 4000 0000 0000 3220 asks the bank; 4000 0025 0000 3155 is declined.

When to use #

Use it for

  • Billing settings.
  • Any account that keeps a card on file.

Skip it when

  • A one-off checkout; use the checkout form.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/payment-methods

Adds its 10 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source. It is built from cardBrand, luhn and PaymentMethods.

example.tsx
import { cardBrand, luhn, PaymentMethods } from "@/components/ui/payment-methods"

The worked example comes with Pro

The 42-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

cardBrand

component

No props of its own; it accepts the native props of its root element.

luhn

component

No props of its own; it accepts the native props of its root element.

PaymentMethods

component
PropTypeDefaultDescription
cards *readonly SavedCard[]—
todaystringnew Date().toISOString().slice(0, 10)
countriesreadonly { value: string; label: string; }[][{ value: "PT", label: "Portugal" }, { value: "GB", label: "United Kingdom" }, { value: "DE", label: "Germany" }, { value: "US", label: "United States" }]
onAdd *(card: NewCard) => Promise<AddCardResult>—Send the card to your payment provider. Return what happened; throw to show an error.
onConfirmAction(() => Promise<SavedCard>)—Called when the cardholder says they approved it in their bank app.
onSetDefault((id: string) => void | Promise<void>)—
onRemove((id: string) => void | Promise<void>)—
classNamestring—

Accessibility #

It exposes group, alert and status semantics, with aria-hidden, aria-labelledby, aria-label and aria-disabled kept in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.