Billing Failed Payment Alert

Installation

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

Usage

The file also exports billing2Demo, 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 { Billing2, billing2Demo } from "@/components/blocks/billing/billing2";

export default function Page() {
  return <Billing2 {...billing2Demo} />;
}

Props

Behavior notes

• Built on the Alert primitive with variant="destructive", which already sets role="alert" so screen readers announce it on mount without any extra markup here.
• The update-payment-method button only renders when updatePaymentHref is passed; leave it out for a retry-only alert.
• Both buttons render as next/link elements via the Button component's render prop, so retryHref and updatePaymentHref should be real routes, not onClick handlers.
• There's no dismiss control and no client-side state. The alert stays visible for as long as the parent chooses to render it, which is usually driven by the account's payment status.
• message is a single string, not structured data. Build the specific decline reason or countdown into that string before passing it in.

Frequently asked questions