Billing Wallet Recharge

Installation

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

Usage

The file also exports billing149Demo, 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 { Billing149, billing149Demo } from "@/components/blocks/billing/billing149";

export default function Page() {
  return <Billing149 {...billing149Demo} />;
}

Props

Types

interface RechargeAmount {
  id: string;
  amount: number;
  bonus?: string;
}

Behavior notes

• Selecting a preset clears the custom amount input, and typing in the custom input clears the preset selection, only one source of the amount is active at a time.
• The custom amount is validated against minCustomAmount and maxCustomAmount; an inline message appears once the typed value is out of range, and the recharge button stays disabled.
• The recharge button label appends the resolved amount (preset or custom) so the exact charge is visible before clicking.
• The 'New balance after recharge' line only appears once a valid amount is resolved, it's computed locally as currentBalance plus the chosen amount and is not fetched from a server.
• Clicking the recharge button does not call any payment API, wire it to your own Stripe (or other processor) flow and update currentBalance from the real result once the charge succeeds.

Frequently asked questions