Payment Schedule Pricing Block for React

Edit TUITION, SCHEDULES and COHORT at the top of the file. A schedule has its count of payments and the payment each costs. The total is count × payment and the plan fee is the total minus the tuition, so they can't disagree with the chips. COHORT is the first payment's date; later payments fall on the same day of each following month. SLOTS lists the twelve calendar cells, so add months there if a schedule runs longer than a year.

They're worked out from COHORT, which you set for the cohort you are selling (the block ships with a January 2027 start). Nothing reads the visitor's clock, so the server and the browser always write the same dates, formatted with a fixed locale in UTC. When a cohort starts, change COHORT; if you sell on a rolling basis, compute the first payment's date on your server and pass it in.

The chips are a radio group named "Number of payments": Tab reaches the chosen one and the arrow keys move and select. The calendar is an ordered list named "Payment dates" whose items are only the payments, each reading its date and amount; the blank months are marked aria-hidden and left out. A polite live region says the new schedule once when it changes ("6 payments of $620, $3,720 in total"), and the total itself isn't announced as it rolls.

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 the chosen schedule, for example /enrol?payments=6, and create the subscription schedule on your server. Work the amounts out again there; never trust a price sent from the page.

The chips become a two-by-two grid under the sentence and the twelve cells run in three columns, four rows, so the call to action lands within the first screen and a half of an iPhone. The cells grow to four columns at sm, six at md and twelve at lg, always separated by one hairline. Every line that changes with the schedule keeps its room, so switching schedules never moves what's below.

Buyers compare the installment total with the price they were quoted. Saying plainly that 12 payments of $315 come to $3,780, $180 over paying once, builds trust, and it keeps the first choice honest. If your plan adds no fee, set each payment to the tuition divided by the count, and change the "Includes a flat fee" line in the summary row, which assumes one.