shadcn.io is not affiliated with official shadcn/ui
Checkout Stepper Billing Block for Solid
A four-step team checkout where you can edit any earlier step and only the steps that depend on your change reopen, each with its state in words and the reason it needs a second look.
Installation
Overview
Let customers go back in a checkout without redoing it, with this checkout stepper for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a rail of four steps (Plan, Billing, Payment, Review) at the start and the open step at the end. Each step on the rail has a numbered marker, its state in words (done, open now, needs a second look), a one-line summary and an Edit button. Editing an earlier step shows its two fields: Native Select and Number Input for plan and seats, a country and an optional tax ID, a payment method and an invoice Input. The dependencies are typed, so only what a change affects reopens: seats and plan feed Review, the billing country feeds Review through tax and feeds Payment when the chosen method (SEPA debit) needs a euro country, and the tax ID and invoice email feed nothing. A step that needs a second look says why. The Shine Button, the only colored control, follows the flow: "Continue to Payment", "Review and pay", then "Pay $X". It's built from Native Select, Number Input, Input, Field, Button, Shine Button and Guides, with a CSS entrance only. For team plans, seat-based products and any checkout people revisit.
FAQ
How do I change the steps and what depends on what?
The steps are in STEPS, and the plans, countries and methods in PLANS, COUNTRIES and METHODS. The dependencies live in one function, reopenedBy: it takes the field that changed and the new values and returns the steps to reopen. Add a field there, and the rail, the status line and the reason sentence follow. Prices are dollars per seat per month and tax rates are samples.
What exactly reopens when I change something?
Changing the plan or the seats marks Review as needing a second look. Changing the country marks Review, and also Payment if the chosen method is not offered there (SEPA debit needs a euro country). Changing the payment method marks Review. Changing the tax ID or the invoice email reopens nothing and says so. A step you are editing is never marked, and opening Review or continuing from a step clears its mark.
What stays local, and how do I wire it for real?
Nothing is purchased: "Pay" marks the order as paid in the page and says that nothing was charged. The payment method is a label, and card details are never typed here; collect them with your payment provider's hosted fields. In your app, charge on your server from the values, and check the dependencies there too.
How does it work with a keyboard and a screen reader?
The rail is a named ordered list, the open step is marked as the current step, and each Edit button is named for its step. Opening a step moves focus to its heading, and one polite status line says what changed and what reopened ("Seats changed. Review reopened."). Fields have labels, and the invoice email and payment method show their problem in text beside a red icon.