Prepaid Credits Pricing Block for React

Edit the constants at the top of the file. CREDITS_PER_DOLLAR is how many credits one dollar buys before any bonus (10 here, so a credit costs 10 cents). AMOUNTS lists the chips. BONUS_TIERS lists the bonus rates with the lowest amount each applies from, highest first, so the chips, the custom field and the result all use the same rule. CUSTOM is the least and the most a custom top-up can be. Every number on the page, including the hours of dubbing and the cents a minute, is worked out from these.

Typing an amount selects it and clears the chip; choosing a chip empties the field. The amount is rounded to whole dollars and held between CUSTOM.min and CUSTOM.max, so $3 counts as $5 and $9,000 as $5,000, and the line under the panel says the limits. A custom amount earns the same bonus as the chip tier it falls in: $60 gets the 10% tier. An empty or invalid field is ignored and the chip stays selected. The field is a number input, so a phone shows a numeric keyboard.

The button is a real link: a ShineButton with render set to an a element and nativeButton={false}. Build its href from the amount, for example /checkout/top-up?amount=50, and work out the credits and the bonus again on your server: the page's numbers are for display. Add the credits to the account when your payment provider confirms the payment, never from the page.

Yes. The chips are a radio group named "Top-up amount", and each is named by its amount and its bonus ("$50, +10% bonus"); the arrow keys move between them. The field has a visible label. The display-size credits are decorative copies of a number that a screen reader reads once as plain text, and the bar is hidden from it. When a chip is chosen or the field is left, a polite live region says what the amount buys ("$50 adds 550 credits, including 50 bonus"), so typing digits doesn't speak at every key. The chosen chip has a dark border and a ring, not only a colour.

The four chips become a two-by-two, the other amount field takes a full row under them, and the result stacks under the choice: the credits, the bar, the line of figures and the button. The button is within the first screen and a half of an iPhone with the default amount chosen. The credits number is one size smaller than on a laptop, so even the largest top-up fits on one line at 320 pixels.

Use a picker when customers' needs vary widely and you'd rather not guess four pack sizes: they choose any amount, and the bonus tiers still reward bigger ones. Use fixed packs, such as Credit Packs, when you want each size to be a named product with its own price and a best-value tag. A picker has one primary button where packs have one per card, so it also suits a section with little room.