Layaway Storefront Block for React

The down payment is 20 percent of the price. The rest is split into equal payments (12 weekly, 6 fortnightly or 3 monthly), and the last one takes the odd cents, so the plan always adds up to the price; the bar shows the total it sums to. Weekly and fortnightly dates add days to a fixed day in UTC, and monthly dates add calendar months.

It is the date of the last payment. Monthly is later than the other two, because three months are longer than twelve weeks. Change RHYTHMS to give your shop a different length of plan.

They are sample wording for the demo: a week of grace, a 14-day hold, a 10 percent holding fee on cancelling. Replace them with your own terms in TERMS, and have them checked where you sell.

Everything. Activate plan only notes the choice in the status line: nothing is charged, reserved or sent. To make it real, charge the down payment and create the schedule at your payment provider in the click handler, then show its answer in the same line.

The three figures stack as rows, the bar stays one line, the dated cells go two to a row and the Activate button is pinned at the bottom.

The frequency control is a labelled group of choices that the arrow keys move through. The bar is decorative, because the same plan is in the list of dated cells with real dates. The accordion headers are buttons inside headings, and the status line is a polite live region.