Billing Prepaid Credits
A one-time credit bundle purchase card for token- or credit-based products. Bundles are shown as selectable cards with the price per credit called out, so larger bundles can visibly undercut smaller ones. Selecting a bundle updates the price shown on the Buy button. Built as a real radio group so selection works with keyboard and screen readers, not just pointer clicks.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, button dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-prepaid-credits.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing98.tsx instead.
Usage
The file also exports billing98Demo, 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 { Billing98, billing98Demo } from "@/components/blocks/billing/billing98"; export default function Page() { return <Billing98 {...billing98Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| heading | string | "Buy credits" | Heading shown above the bundle grid. |
| description | string | none | Optional supporting text under the heading. |
| currentBalance | string | none | When set, shows the user's current credit balance in the top-right corner. |
| bundles | CreditBundle[] | none | Bundles rendered as selectable cards, two per row. |
| defaultBundleId | string | bundles[0].id | Which bundle is selected on first render. |
| ctaLabel | string | "Buy credits" | Label on the purchase button, before the selected bundle's price is appended. |
| validityNote | string | none | Optional fine print next to the Buy button, for example an expiration or validity note. |
| className | string | none | Extra classes for the outer container. |
Types
interface CreditBundle { id: string; credits: number; price: string; pricePerCredit: string; badge?: string; }
Behavior notes
- Selected bundle is local state; clicking a card updates the checked bundle and the price shown on the Buy button.
- Bundle cards are real buttons inside a role=radiogroup, so selection works with arrow-key navigation and screen readers, not just a mouse click.
- The Buy button is disabled only if no bundle is selected, which can't happen once a defaultBundleId or a non-empty bundles array is supplied.
- Clicking Buy doesn't call out to anything by itself, it's on the caller to read the selected bundle from their own state and start a checkout flow.
- pricePerCredit is a plain formatted string per bundle rather than something the component derives from credits and price, so you control the rounding and decimal places.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.