shadcn.io is not affiliated with official shadcn/ui
Multi-Step Checkout Block for React Aria
A three-step checkout for garden furniture that skips what it already knows: a saved-details switch marks Shipping and Payment done and opens on Review, which reads back the address and card with an Edit per group.
Installation
Overview
Shorten the wizard for people you already know, with this multi-step checkout for React with React Aria. A header from Elderglen, a garden furniture shop, sits over a hairline frame. A Switch, "Use my saved details", starts on: the three Steps, Shipping, Payment and Review, show the first two already done with the saved street and card under their titles, and the wizard opens on Review. Review lists the order lines with drawn thumbnails and a group for where it goes and what pays, each with an Edit button. Turn the switch off, or press Edit, and Shipping and Payment become real steps: Next checks only its own step (a name, street, city and ZIP; an email and a card that checks out), shows each problem under its field and moves focus to the first. Place order is the only Shine Button, its label carrying the total, and the foot keeps the total, tax and delivery in whole cents. It's built from Steps, Switch, Field, Input, Input Group, Data List and Guides. For repeat customers, reorders and any flow where a step is sometimes already answered.
FAQ
How does the saved-details switch decide what to skip?
While it is on, Shipping and Payment read their values from the saved address and the saved Visa instead of from fields, so they have nothing to check and the Steps indicator marks them complete. Turning it off clears anything typed and reopens Shipping as an empty step. Turning it on again returns to Review. In your app, the saved values come from the signed-in customer's profile, and the switch is simply absent for guests.
What does Edit in the review do?
Edit on "Ship to" switches saved details off, fills the address fields with the saved address so you change only what you need, and goes to Shipping. Edit on "Pay with" goes to Payment with empty card fields, because the demo never keeps card digits and says so in the status line. Back and the step buttons also work, up to the furthest step reached.
What does Next check?
Only the step you are on. Shipping needs a name, a street, a city and a five-digit ZIP; Payment needs an email and a card whose number passes the Luhn sum, whose expiry is not before October 2026 and whose CVC has the right length for the brand. Next is never disabled: a press with problems shows each one under its field in words, says how many in the status line and moves focus to the first.
Can I use this to take real card payments?
No, and the code says so. It checks a card in the tab's memory (brand by the first digits, the Luhn sum, the expiry against a fixed month) so you can see the pattern. A real page never lets card digits reach its own code: it uses the fields your payment provider hosts, an iframe of theirs, with this layout, labels and error wording around them and the real autocomplete tokens (cc-number, cc-exp, cc-csc, cc-name) that those fields set themselves. Autocomplete is off in the demo so a browser never offers a real saved card to it. Test card 4242 4242 4242 4242 passes with any future expiry (checked against October 2026); a number that fails the Luhn sum, a past expiry or a CVC of the wrong length says so under the field.
What stays local, and how do I connect it for real?
Everything: placing the order only changes this block's state, and nothing is charged, shipped or saved. To connect it, read the saved address and card summary from your customer API, send the order with your provider's payment token when the last step passes, and show the provider's error in the same status line. The totals use whole cents and a typed tax rate; compute them on the server as well.