Pay-What-You-Can Nonprofit Pricing Block for React

Edit the constants at the top of the file. LIST_PRICE is the top of the slider and the price in the header, SUGGESTED is where the slider starts, and STOPS lists the marked prices with their names; each one becomes a shortcut under the track at its place on the scale. Everything that shows a price, the riding number, the shortcuts, the call to action and what a screen reader hears, is computed from these, so they can't disagree.

fundsFor returns the sentence at the foot of the slider panel for a price: free, below the suggested price, at it, between it and the supporter price, above that, and at the list price. Change the sentences or the thresholds there; the panel keeps room for two lines, so a longer sentence doesn't move the layout.

The call to action is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from price, for example /signup?seat_price=12, and create the subscription at that price on your server. A price of $0 says "Start for free", so you can send those sign-ups to a plan with no payment step.

Yes. The slider is named "Your price per seat" and reads its value in words, "$12 per seat a month, suggested", and it moves with the arrow keys, Page Up and Page Down, Home and End. The shortcuts are buttons named for their price ("Supporter, $24 per seat a month"). Once a drag or a key press ends, a polite live region says the new price and what it funds, so a screen reader hears it once rather than at every step. The large riding number repeats the slider's value, so it's hidden from assistive technology.

The two panels stack, the slider first, and the call to action still lands on the first screen and a half of an iPhone. The riding price never leaves the panel: it's pulled back by its own position, so at $0 it starts at the track's start and at the list price it ends at the track's end. The three shortcut labels fit side by side at 320 pixels. In right-to-left pages the scale and the riding price mirror, and the prices stay left to right.

A fixed discount asks every nonprofit to prove its status and still pay the same reduced price, which shuts out the smallest groups. A sliding scale lets them pay nothing, while organizations that can afford more cover their own seat or someone else's, and saying what each price funds is what makes people choose the higher ones. Keep a suggested price close to what a seat costs you, so the default is fair to both sides.