shadcn.io is not affiliated with official shadcn/ui
Next Payment Preview Billing Block for React Aria
The next charge with its subtotal, tax and total, eight day chips to move it within a week, a sentence that says how many days you would have to fix a declined card, and a button that says whether it will move the date or pay now.
Installation
Overview
Let a customer see the next charge and move it, with this next payment for React with React Aria. A compact header explains the week the studio allows. Inside a hairline frame with a plus mark on each corner, a native list shows the subtotal, the tax at 10% and the total as the biggest figure, with the card named beside a two-letter tile. Under it, eight day chips (native radios, 1 to 8 Nov) move the charge: each one rewrites a held sentence that says when Bellhurst charges, until when bookings stay open and how many days that leaves to fix a declined card. "Pay today instead" is a toggle Button that swaps the plan for paying now. The only Shine Button says what it will do: "Keep Sun 1 Nov", "Move to Thu 5 Nov" or "Pay $198.00 now". The bands are ruled by Guides and the foot is pinned on a phone, where the chips wrap to two rows of four. It's built from Button, Shine Button and Guides, with a CSS entrance only. For billing pages of products that bill by the month.
FAQ
How do I fill it from my billing system?
The constants at the top hold it: DUE (the original date), DAYS (the days you allow, here eight), SERVICE_END (the last day of service), FOLLOWING (the charge after this one), the amounts in cents, TAX_PERCENT and the card. Everything else, including weekdays, the days between and the sentences, is worked out from them. Send the chosen date to your server and refuse one outside the window there too.
What are the rules it shows?
Only the week from the due date to the last day of service can be chosen, and moving the charge inside it doesn't change the amount. The sentence under the chips counts the days between the new date and the end of service, which is how long you would have to fix a declined card before bookings pause. Change consequenceOf if your terms differ, such as a late fee after a date.
What stays local?
Nothing is charged or moved on a server: the button changes the dates in the demo and says so in the status line ("Moved to Thu 5 Nov in this demo."). Paying now marks the charge paid and shows the following charge. In production, collect or change cards only in your payment provider's hosted fields; this block shows only the brand and the last four digits.
Why does the button's label change?
So the one button always names the consequence. With the original date chosen it reads "Keep Sun 1 Nov" and answers that nothing has changed; with another date it reads "Move to Thu 5 Nov"; with Pay today instead it reads "Pay $198.00 now". It keeps a minimum width so nothing around it shifts when the label changes.
Is it accessible?
The chips are a native radio group in a fieldset with a legend, so arrow keys move between days and each chip's name is its weekday and date. "Pay today instead" reports whether it is pressed. The sentence and the status line are polite live text, and the sentence keeps its space whichever day is chosen.