Cost Breakdown Pricing Block for React

Edit the LINE_ITEMS array at the top of the file. Each item has a label, a description, a quantity and a unitPrice; its amount is the quantity times the unit price. The subtotal, the discount and the total are worked out from that list and DISCOUNT_PERCENT, so they never disagree with the rows above them. BILLING holds the two options of the switch, CURRENCY is the symbol written before every amount and CURRENCY_CODE the label in the bill's corner. The plan's features are the FEATURES array of plain strings.

Only the discount. With annual billing chosen, which is the default, the discount row takes 20% off the subtotal, the total drops to match and the line under it reads "Billed annually as $1,080 a year". With monthly billing the discount row falls to $0 and the line reads "Billed monthly, cancel any time". The line items don't change. A polite live region reads the new total once for each change.

Both call-to-action buttons are real links to the same place: the one in the plan panel from md up and the one in the sticky bar below md, where the panel's own button is hidden. It's a ShineButton with render set to an a element and nativeButton={false}. Point them at your checkout route with the quantities and the billing period in the query, for example /checkout?plan=business&users=3&payroll=8&billing=annual, and let your server rebuild the same line items from your price list before it charges anything: never trust amounts sent from the page.

The bill is a description list under its own h3, so each row is read as a term and its value: "Extra users, $8 per extra user, Quantity 3, $24". The multiplication sign is hidden and replaced by the word "Quantity", "/mo" is read as "per month", and the discount is read as "20% off" and "minus $22 per month" instead of a bare dash. The plan is an h3 under the section's h2, and its features are a list.

From the lg breakpoint the bill and the plan sit side by side, the bill a little wider, split by a rule; below it they stack, bill first, under a single rule. Below md the plan panel drops its button and a sticky bar at the bottom of the section carries the total and the button instead. Amounts use tabular figures and a shared minimum width, so the right-hand column lines up, and each amount with its sign and unit, such as "−$22/mo", is kept in one left-to-right run so it doesn't break apart on a right-to-left page.

Use a breakdown when the price is built from several parts, such as users, payroll and storage: showing each part and the discount earns trust before the visitor reaches checkout. Plan cards suit fixed tiers, where itemising a single price would only add noise.