Currency Select Pricing Block for React

Add the currency to CURRENCIES with its ISO code, a name, its symbol and the number of decimals its prices show (0 for yen and rupees, 2 for dollars), and add the code to the CurrencyCode type. Every plan keeps one price per currency in monthly and annual (the monthly amount when billed yearly), so TypeScript flags a plan that is missing one. They are local price points set on purpose, such as €6.49 rather than $6.99 converted, so you choose what each market pays. A free plan uses the shared FREE prices.

Each call to action is a real link to its plan's href. It's a ShineButton with render set to an a element and nativeButton={false}. Add the plan, the period and the currency to it, such as /checkout?plan=voyager&billing=yearly&currency=EUR, and have your server pick the matching price at your payment provider, where each plan has a price per currency. The amounts on the page are only a preview.

Yes. The currency chips are a Segment Group, a radio group named "Currency": Tab reaches the selected chip and the arrow keys move and select. Each chip is read with its code and its full name, such as "EUR Euros", and the symbol is decorative. The billing switch is a radio group named "Billing period". Prices aren't live regions, so switching doesn't interrupt a screen reader, each price reads as "per month", and every call to action names its plan, as in "Try 14 days free, Voyager plan".

The chips fill the width, five equal segments, so each stays easy to tap, and the billing switch sits under them. Below the md breakpoint a second switch named "Plan" shows one plan at a time, starting on the popular one, so the price and the filled button come within the first screen and a half. From md the three plans sit side by side in the band and the plan switch is gone.

The digits are tabular, so a price only grows sideways when it gains a digit, and the cells keep their height. The line under each price keeps the room of the longer of its two texts, the monthly one and the yearly one, so switching never pushes the button down. On wide screens the three cells share their rows through CSS subgrid, so names, prices, buttons and feature lists line up whatever the descriptions' lengths.

Yes, where you can tell. Pass the currency worked out on your server, from the request's country or the account, to useState<CurrencyCode> instead of "USD", so the first render is already right and nothing changes after loading. Keep the chips: travellers and teams paying from another country need to choose for themselves.