Credit top upPro

Credit packs with price per credit and the best value marked, a custom amount, auto top up with a threshold, processing and failed states, and a receipt where the new balance rolls in.

Markdown

On this page

ProPacks with price per credit, a custom amount and auto top up, then a receipt where the balance rolls in.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/credit-top-up

Usage

tsx

import { CreditTopUp } from "@/components/ui/chatcn/pro/credit-top-up"

<CreditTopUp
  packs={packs}
  balance={account.credits}
  custom={{ min: 500, max: 100000, pricePerCredit: 0.0095 }}
  paymentMethod="card ending 4242"
  onPurchase={(purchase) => billing.buyCredits(purchase)}
/>

The best value pack is the lowest price per credit unless you set bestValue. Prices per credit show three significant digits, so packs compare honestly. Resolve onPurchase with { receiptId, balance, paidAt } for the receipt; reject it with an error message that says how to fix the problem and the form shows it with Try again.

Examples

States

ProProcessing, a declined card with how to fix it, and the receipt with auto top up on.

Props

Prop	Type	Notes
`packs`	`CreditPack[]`	`id`, `credits`, `price`, `label?`
`value`, `defaultValue`, `onValueChange`	`string`	Pack id or `custom`
`custom`	`{ min, max, pricePerCredit } \| false`	Custom amount option
`bestValue`	`string`	Override the marked pack
`autoTopUp`, `defaultAutoTopUp`, `onAutoTopUpChange`	`{ enabled, threshold }`
`thresholds`	`number[]`	Default 100, 250 and 500
`balance`, `unit`	`number`, `string`	Header line and receipt
`paymentMethod`	`string`	Under the total and on the receipt
`onPurchase`	`(purchase) => Promise<CreditReceipt>`	Reject to show the failed state
`status`, `error`, `receipt`		Control the states yourself
`onDone`, `onDownloadReceipt`		Receipt actions
`currency`, `locale`	`string`	Default USD
`labels`	`Partial<CreditTopUpLabels>`	Every string the top up shows or announces, for translation

Keyboard

Key	Action
Arrow keys	Move between packs (native radio group)
`Space`	Toggle auto top up
`Enter`	Buy, from the button

Accessibility

Packs are native radios; the selection ring is backed by a filled radio dot and forced colors outline.
Processing and the receipt are announced through status regions; a failure is an alert.

Motion

The total rolls when the pack changes. The receipt fades in with 4 px of rise in 200 ms, then the balance rolls from the old value to the new one.
Reduced motion keeps the fade and drops the rise and the roll.