shadcn.io is not affiliated with official shadcn/ui
Wallet Recharge Billing Block for React Aria
A wallet top-up with the fee worked out both ways: choose to pay an amount or to receive one, type whole dollars, pick card or bank transfer, and read the quote, with amounts over the method's limit refused.
Installation
Overview
Let customers add money to a wallet knowing exactly what it costs, with this wallet recharge panel for React with React Aria. It's the top-up screen of Quickwell, a laundry-pickup app. A Segment Group switches between "I want to pay" and "I want in my wallet", one Number Input takes whole dollars, and two radio cards choose the method with its fee and limit: card at 2.9% plus $0.30 up to $500, or bank transfer at 0.8% capped at $5.00 up to $2,000. The quote beside the inputs reads "Pay $103.30 to add $100.00" or "Add $96.80 for $100.00", with what you pay, the fee and the wallet total after. An amount over the method's limit is refused with a problem line under the field. The foot has the Shine Button, "Add $100.00", the only colored control, and a status line that says how you pay. For wallets, credits and any app that tops up a balance.
FAQ
What stays in the page, and how do I wire it for real?
Everything. The wallet balance, the fees and the limits are typed at the top of the file, and Add puts the money in the wallet figure in the page with a status message that says nothing was charged. To wire it, read the balance and each method's fee and limit from your payment provider, and have Add create the payment through its hosted fields, crediting the wallet only when the provider confirms. The block never takes a card number, and the card and account shown are examples.
How is the fee worked out both ways?
In pay mode the fee comes straight from the amount, and the wallet gets the rest. In wallet mode the block finds the smallest payment that leaves at least the amount after the fee, in whole cents, so $100.00 on a card needs $103.30. Both run in cents to avoid rounding drift, and the fee for bank transfer stops at $5.00.
What happens over a limit?
The method's limit applies to what leaves your account. Over it, a problem line appears under the field in a reserved space, so nothing moves, the label of the Shine Button stays, and pressing it says to fix the amount and moves focus back to the field. The quote asks you to lower the amount, and the field offers the other method in its message.
How does the number field behave?
It takes whole dollars from 5 to 2,000, with the stepper buttons and the keyboard. React Aria commits a typed value on blur, Enter or an arrow, so type the amount and press Tab to see the quote update. In a right-to-left page typed Arabic-Indic digits are read as digits.