Checkout Wizard with ?step
Hard · Search Params
Build a 3-step checkout wizard where the current step lives in the URL (?step=1, ?step=2, ?step=3), so the browser back button moves between steps. The form data lives in component state and is shared by all steps.
- Show <p className="step">Step N of 3</p>. A missing or invalid step (anything but 1, 2 or 3) means step 1.
- Step 1 has <input name="name"> and <input name="address">; step 2 has <input name="card">; step 3 shows <p className="summary">Ship to <name>, <address> - card ending <last 4 digits></p> and a Place order button that replaces the summary with <p className="done">Order placed!</p>.
- Validation (values trimmed): Name is required, Address is required, and on step 2 Card number must have 16 digits (spaces allowed, e.g. 4242 4242 4242 4242). A step is complete when its fields are valid.
- Next (steps 1 and 2) validates the current step. With errors, show each one as <p className="error"> and stay. Otherwise router.push the next step (/?step=2).
- Back (steps 2 and 3) calls router.back(), so it behaves exactly like the browser button. Errors from another step are never shown.
- Opening a later step directly (for example /?step=3) while an earlier step is incomplete must router.replace the URL with the first incomplete step (/?step=1). Never show a step whose previous steps are incomplete.