Credit Top Up Billing Block for React

WALLET at the top of the file holds the balance in credits, the card's last four digits and the credits spent a day, which gives "About 12 days at 105 a day". RATE is how many credits a dollar buys, AMOUNTS are the chips, and TOP_UPS are the rows of the table, each with its dollars, ISO date and source. Replace them with your wallet and ledger, and pass them in as props if the page fetches them.

It's a link and does not charge anything: point it at your checkout, and pass the amount along (amount is the dollars, added the credits). The total, the "after this top-up" balance and the button's digits all come from that one amount, so they can't disagree. Custom amounts are held between $5 and $1,000.

The switch turns the two inputs on and off; while it is off they are disabled and the line under them says so. When on, the line spells out the rule ("Adds $25 whenever the balance drops below 250 credits"). The block keeps the values in its own state, so save them from your own code. The balance threshold moves in steps of 50 credits and the dollar amount in steps of $5.

The section is headed by an h2, with each band's title an h3. The chips are one named group, "Top-up amount", and every number input has a name that says its unit, such as "Recharge amount, in dollars". The rolling digits are read as the plain number. The table has column headers, and on React Aria it is a grid you move through with the arrow keys.

The balances stack, the chips wrap and the two bands of controls become one column. The total and the pay button are a bar pinned to the bottom of the screen, so the button is always in reach while you pick an amount; it joins the page's flow once you scroll to it, and from the tablet width up it is an ordinary band. The table keeps three columns, with the source under the date.