Components•Payment method card
Components•Payment method card
Payment method card
Saved payment methods. The selected card tilts under the pointer and flips for billing details; the list below picks, defaults and removes cards and flags expired or expiring ones.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/payment-method-cardHow to use
import { PaymentMethodCard, type PaymentMethod } from "@/components/bjork-ui/cards/payment-method-card";const methods: PaymentMethod[] = [ { id: "pm_1", network: "Orbit", issuer: "Halden", last4: "4821", holder: "Mara Okonjo", expMonth: 8, expYear: 2028, finish: "graphite", // "ember" | "sand" | "ink" billingPostal: "94110", addedOn: "2025-03-12", },];<PaymentMethodCard defaultMethods={methods} defaultDefaultId="pm_1" onDefaultChange={(id) => api.setDefault(id)} onRemove={(id) => api.detach(id)} onAdd={() => openCheckout()}/>
Payment methods
Halden
•••• •••• •••• 4821
Card holder
Mara Okonjo
Expires
08/28
Orbit
CVC •••
- Billing postal code
- 94110
- Added
- Mar 12, 2025
- Issued by
- Halden
Orbit •••• 4821Expires 08/28Default
Lumen •••• 0937Expires 11/26Expires soon
Orbit •••• 5502Expired 04/26Expired