Payment Method
A composable card for displaying saved payment methods like credit cards.
•••• 4242Expires 12/26
DefaultInstallation
npx shadcn@latest add "https://billui.com/r/payment-method.json"import { cva, type VariantProps } from "class-variance-authority";
import { CreditCard, MoreHorizontal, Pencil, Trash2 } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
// ... component codeExamples
Card Brands
Each card brand displays with its official logo.
•••• 4242Expires 12/26
•••• 5555Expires 08/25
•••• 0001Expires 03/27
Selected State
Use the selected variant to highlight the active payment method.
•••• 4242Expires 12/26
Default•••• 5555Expires 08/25
Expired Card
Show expired cards with visual indication.
•••• 1234Expires 01/23 (Expired)
With Actions
Include edit, delete, or more options buttons.
•••• 8888Expires 06/28
API Reference
PaymentMethod
The root container for the payment method card.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "selected" | "default" | Visual style variant |
PaymentMethodIcon
Displays the card brand logo (SVGs embedded inline for easy distribution).
| Prop | Type | Default | Description |
|---|---|---|---|
brand | "visa" | "mastercard" | "amex" | "generic" | "generic" | Card brand |
PaymentMethodNumber
Displays the masked card number.
| Prop | Type | Default | Description |
|---|---|---|---|
last4 | string | - | Last 4 digits of the card |
PaymentMethodExpiry
Displays the card expiration date.
| Prop | Type | Default | Description |
|---|---|---|---|
month | number | - | Expiration month (1-12) |
year | number | - | Expiration year |
expired | boolean | false | Shows expired indicator |
PaymentMethodAction
Action button for the payment method.
| Prop | Type | Default | Description |
|---|---|---|---|
action | "edit" | "delete" | "more" | "more" | Type of action |