Billing Update Card Modal

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dialog, input, label, 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/billing144.tsx instead.

Usage

The file also exports billing144Demo, 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 { Billing144, billing144Demo } from "@/components/blocks/billing/billing144";

export default function Page() {
  return <Billing144 {...billing144Demo} />;
}

Props

Behavior notes

• Card brand is detected locally from the entered digits using simple prefix rules (4 for Visa, 51-55/22-27 for Mastercard, 34/37 for American Express) and shown as a label inside the card number field; it is never passed in as a prop or icon component.
• The card number and expiry inputs are reformatted on every keystroke, grouping the card number into 4-digit blocks and inserting the slash in MM/YY, both capped at their maximum digit length.
• Submit is disabled until the card number has at least 15 digits, the expiry has both parts filled in, the CVC has at least 3 digits, and a name is entered.
• Submitting moves through a form, processing, and success step with a 1 second simulated delay standing in for the real Stripe confirmCardSetup call. There's no real payment processing wired in.
• Closing the dialog resets all form fields and the step back to the start after the close animation finishes, so reopening it always begins from a blank form.

Frequently asked questions