Billing Payment Failure Recovery

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/billing85.tsx instead.

Usage

The file also exports billing85Demo, 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 { Billing85, billing85Demo } from "@/components/blocks/billing/billing85";

export default function Page() {
  return <Billing85 {...billing85Demo} />;
}

Props

Behavior notes

• This is a static alert, not a live retry form. retryHref and addCardHref are real links (rendered through the Button component's render prop), so wire them to your actual retry endpoint and add-card flow.
• cardBrand and cardLast4 only render when both are provided, so the alert still reads fine if you don't have the failed card's details on hand.
• The reason text is passed through as-is, so use your payment gateway's own decline message (for example "Insufficient funds" or "Incorrect CVC") rather than a generic string.
• supportHref is optional; the support link is omitted entirely when it isn't passed, rather than rendering a dead link.
• The alert renders with role="alert" so assistive tech announces the failure as soon as it mounts.

Frequently asked questions