Gift Subscription Pricing Block for React

Edit LENGTHS at the top of the file: each entry is a number of months and the price of the whole gift in dollars. MONTHLY is the plan's regular monthly price. Everything else is computed from those: the price per month, the amount saved and its percentage on each choice, the breakdown and the total. Rounding happens in whole cents, so the lines always add up. BEST_MONTHS picks which length carries the "Best value" tag.

In your own checkout. The button is a submit button for the form: it checks the fields and, when they're valid, calls submit. The comment there marks the spot to create your payment session (a hosted checkout, a payment element) with the length, the recipient, the message and the delivery date, then send the buyer to pay. As shipped, submit shows the confirmation panel so the flow can be tried. The button is the only primary element on the page.

The visitor's today is read in an effect once the page runs in their browser, never while rendering, so the prerendered page can't show the server's day. The date input's earliest date is that day and it opens a week ahead. The card says "Arrives today" or "Arrives" and the day, formatted in the visitor's language. Send the chosen date as a plain YYYY-MM-DD and schedule the email in your own time zone rules; the block doesn't send anything.

It checks that the first name has at least two characters, that the email looks like an email and that a date, when chosen, isn't in the past. The form has noValidate so the messages are ours: each sits under its field, is tied to it with aria-describedby and aria-invalid, and the first problem takes focus. The length and delivery choices are native radio groups inside fieldsets with legends, so arrow keys and screen readers work as they do everywhere. A polite status line reads the length, total and arrival whenever they change.

Below the lg breakpoint the panel is one column: the form, then the gift card and the price breakdown. The three lengths become rows with the price on the right, and the panel's own button is hidden. A sticky bar stays at the bottom of the screen with the chosen length and the "Buy the gift" button naming the total, so there is one primary button on screen at a time. The bar goes away once the order is confirmed.

Yes. It's built from tokens and follows your theme, light or dark. It stands out as a raised card (bg-card, a shadow and a hairline ring) rather than by colour: a faint glow and three hairline rings around one corner, with a Lucide icon beside the wordmark. Swap the icon and the word "Cadence" for your own mark, or lay your artwork in the card behind the -z-10 layers. The message is clamped to its reserved lines, so a long note can't change the card's height.