Per Transaction Pricing Block for React

Edit the constants at the top of the file. PAYMENT_TYPES lists the rows, each with its name and description. REGIONS lists the switch's options, each with its label, a short label for phones, currency code, symbol and rates: for every payment type a percent and a fixed fee in the region's currency, where 0 shows "no fixed fee", and an optional cap, the most one transaction can cost, which shows as "capped at" when there is no fixed fee. INCLUDED is the checklist, and DISCOUNT_FROM the monthly volume, in thousands, above which discounts apply.

Each row keeps the same number of decimals in every region, the most any region needs: bank debits cost 0.35% in Europe, so the row shows two decimals everywhere (0.80%, 0.35%, 0.50%) and the card rows show one (2.9%, 1.5%). Switching regions then rolls the digits in place instead of adding or removing one, so the row doesn't jump.

Yes. The switch is a SegmentGroup, a radio group named "Pricing region": Tab reaches the selected region and the arrow keys move and select. On a phone its labels shorten to US, EU and UK, and the accessible name follows what is shown. The rates are a list of h3 rows under the section's h2, each rolling number keeps its current value in visually hidden text, and the rates aren't a live region, so switching doesn't read four rows aloud.

The selected region is the value state, which starts at "us". Start it from your own data instead, such as the country your server detects from the request or the visitor's saved preference, passed in as the initial state. Keep the switch visible either way, since a business's region isn't always where its visitor is.

The header stacks: the headline and sentence, then the region switch, then the button, so the call to action stays within the first screen. Each row stacks its name and description over its rate, and the checklist goes from two columns to one. From the sm breakpoint each row puts its text on the left and its rate on the right, and from lg the checklist and the volume note share the last band, split by a vertical rule.

Charge per transaction when your revenue should follow your customers' sales: payment processing, marketplaces and point-of-sale, where a small seller pays little and a large one pays more. Charge a subscription when the product's value doesn't depend on payment volume, and consider a small platform fee on top of reduced rates for high-volume customers.