Checkout (multi-step)

When to use it

Cart with shipping, multiple payment methods, or address validation.

• Each step <30s
• Back navigation never loses entered data
• Trust signals on every step

Layout regions

• header
• main
• form
• summary

States

• default
• partial
• loading
• error
• success

Example

Next.js — server components per step, sessionStorage persistence

'use client'
import { useState, useEffect } from 'react'
import { z } from 'zod'

const KEYS = ['shipping', 'payment', 'review'] as const
const stored = () => typeof window !== 'undefined' ? JSON.parse(sessionStorage.getItem('checkout') ?? '{}') : {}

export default function Checkout() {
  const [state, setState] = useState(stored())
  const [step, setStep] = useState(0)
  useEffect(() => sessionStorage.setItem('checkout', JSON.stringify(state)), [state])

  const StepComp = [ShippingStep, PaymentStep, ReviewStep][step]
  return (
    <Container variant="lg">
      <Stepper current={step} steps={['Shipping', 'Payment', 'Review']} />
      <Grid cols={2} className="gap-8 mt-6">
        <StepComp value={state} onChange={setState} onNext={() => setStep((s) => s + 1)} onBack={() => setStep((s) => s - 1)} />
        <CartSummarySticky />
      </Grid>
    </Container>
  )
}

The full Checkout (multi-step) pattern specifies 3 exact microcopy strings, 1 motion spec, 4 composition rules, 2 more code examples — all gated behind the full recipe. Get the full recipe.

Related