Amount Presets Donation Contact Block for React

Edit PRESETS for the four amounts, MEALS_PER_DOLLAR for the meals in the big number, and FAMILY_WEEK for the gift that stocks one family's groceries for a week. MIN_GIFT and MAX_GIFT bound the custom field, and FEE_RATE is the card fee a donor can cover. The food bank, its eleven pantries and the rates are invented: use your own figures or drop the claims.

They are one value. A preset writes its amount into the custom field, and typing in the field lights a preset only when the number matches one, so there is never a second, hidden state to disagree with what you see. The field keeps the amount between the minimum and the maximum when you leave it.

Yes. Every price is a single left-to-right span ($50.00), the custom field keeps its "$" in front of the digits, and the sentence under the meal count is isolated with bdi.

No. The submit handler waits 800 milliseconds, then shows the thank-you, which says a payment link will be emailed and nothing is charged until it is used. Replace the timer in submit with a call to your payment provider (it has the amount, the monthly flag and whether the fee is covered). Never collect card numbers in this form yourself.

A box that is already ticked adds money without the donor choosing it. Here it starts off, shows the exact fee in its hint, and the list under it says "Greenhaven pays" while it is off.

The presets are a named group of single-choice buttons that report which one is chosen, and arrow keys move between them. The switch and the box are named by their visible text, and the custom field is a named, required number field. Each error is attached to its control and the first invalid one takes focus on submit. A status line reads the gift ("$50.00 a month: 200 meals and a week of groceries for 2 families") a moment after the visitor changes it, and the confirmation is a status region that takes focus when it appears.