Billing Payment Method Expiry

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing87.tsx instead.

Usage

The file also exports billing87Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Billing87, billing87Demo } from "@/components/blocks/billing/billing87";

export default function Page() {
  return <Billing87 {...billing87Demo} />;
}

Props

Types

export type PaymentMethodUrgency = "expiring" | "expired";

interface ExpiringPaymentMethod {
  id: string;
  brand: string;
  last4: string;
  expMonth: number;
  expYear: number;
  urgency: PaymentMethodUrgency;
  updateHref: string;
}

Behavior notes

• Rows are rendered in the order passed in the cards array; there's no built-in sorting by expiry date.
• The expMonth/expYear pair is only used for display, formatted as MM/YY. Whether a card counts as "expiring" or "expired" is decided by the urgency field you pass in, not computed from today's date.
• Urgency drives both the border/background tint and the icon: expiring cards use an amber CreditCard icon, expired cards use a red AlertTriangle icon.
• Each row's Update card action is a next/link rendered through the Button component, so it works with a direct settings URL out of the box.
• There's no dismiss or snooze action; once a card is passed in, its row stays until you remove it from the cards array yourself.

Frequently asked questions