Payment Methods
Saved cards as selectable rows with brand marks, expiry warnings, a Default badge and a per-card menu.
payment-methods.tsxpayment-methods.css
Checking access…
Overview
Pick the card to pay with; the selected row tightens its outline. Cards expiring soon get a quiet warning, expired ones are disabled with an Update link.
Each row’s menu sets it as default or removes it, and an Add card row sits at the bottom.
When to use
- Checkout, subscription billing, wallet settings.
When not to use
- Collecting a new card: use a card form.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/payment-methods.json$
npx shadcn@latest add https://sundaeui.dev/r/payment-methods.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/payment-methods.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/payment-methods.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy payment-methods.tsx and payment-methods.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { PaymentMethods } from '@/components/sundae/payment-methods'
<PaymentMethods />Props
| Prop | Type | Default |
|---|---|---|
cards*Saved cards; exp as MM/YY. | { id: string; brand: string; last4: string; exp: string; default?: boolean }[] | — |
onSelect / onAdd / onRemove / onMakeDefaultRow actions. | callbacks | — |
nowReference date for expiry checks. | Date | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Cards are a radiogroup; expired cards are aria-disabled with the reason in their label.
- Row menus are menu buttons with labelled items.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-pmt; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Payment Methods free?
- Payment Methods is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Payment Methods?
- Run npx shadcn@latest add https://sundaeui.dev/r/payment-methods.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Payment Methods support keyboard and screen readers?
- Cards are a radiogroup; expired cards are aria-disabled with the reason in their label. Row menus are menu buttons with labelled items.
- Does Payment Methods respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined - Pro
Seat Checkout
Checkout · Understated - Pro
Currency Swap
Checkout · Refined - Pro
Billing Toggle
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Tip Selector
Checkout · Refined