Billing Sms Credit Recharge

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

Usage

The file also exports billing124Demo, 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 { Billing124, billing124Demo } from "@/components/blocks/billing/billing124";

export default function Page() {
  return <Billing124 {...billing124Demo} />;
}

Props

Behavior notes

• The credit balance, selected top-up amount, auto-recharge state, threshold, and purchase status are all local component state; nothing here calls a real API.
• Selecting a different top-up amount recalculates the cost preview immediately as topUpAmount times pricePerCredit.
• Clicking Buy credits sets a purchasing state for about 800ms, then adds the selected top-up amount to the displayed balance and shows an "Added" confirmation, resetting whenever a different top-up amount is chosen.
• The auto-recharge switch is a real button with role="switch" and aria-checked, not a native checkbox, matching the rest of the site's toggle pattern since there's no Switch primitive in the UI kit.
• Toggling auto-recharge on reveals a range-input slider for the recharge threshold; toggling it off hides the slider without losing its value.
• The low-balance warning is derived from currentCredits versus lowThreshold on every render, not a separate flag you have to set yourself.

Frequently asked questions