Checkout requires four or fewer logical steps

Every additional checkout step sheds buyers. Baymard's large-sample checkout research shows conversion rate falls measurably with each extra page between cart and confirmation. Forcing shoppers through Address, Shipping, Billing, Coupon, Payment, Review, and Confirm as seven distinct pages is a self-inflicted revenue cut. Long flows also amplify error-recovery pain — a validation failure on step six means re-traversing the whole sequence — and mobile users drop off at the highest rates on multi-page flows.

Collapse related concerns into single pages in src/app/checkout/. Combine shipping address and shipping method on one page, keep payment and review on a second, and use the confirmation as step three. For small catalogs, render the full flow in src/app/checkout/page.tsx as a single page with section-based validation.

{step === 'shipping' && <ShippingForm />}
{step === 'payment' && <PaymentForm />}
{step === 'review' && <ReviewOrder />}

• ID: ecommerce-cart-ux.checkout-flow.step-count

• Severity: high

• What to look for: Enumerate every distinct checkout page or step by tracing the checkout route structure (e.g., src/app/checkout/, pages/checkout/). List all steps in order from cart exit to order confirmation. Count distinct logical steps — multi-field forms on a single page count as 1 step; separate pages or conditionally rendered step components each count as 1. "Cart" itself is not a checkout step. Quote the route paths or step component names found.

• Pass criteria: Checkout flow contains no more than 4 logical steps total from first form to confirmation. Report the count: "Checkout has X steps: [list steps]. Threshold is 4." A single-page checkout counts as 1 step and passes.

• Fail criteria: Checkout requires more than 4 steps (e.g., Address → Shipping Method → Billing Address → Coupon Code → Payment → Review → Confirm = 7 steps).

• Skip (N/A) when: The project has no checkout flow (e.g., informational site, lead-generation only, no payment processing).

• Detail on fail: Example: "Checkout is 6 steps: /checkout/address → /checkout/shipping → /checkout/billing → /checkout/coupon → /checkout/payment → /checkout/review. Exceeds 4-step target by 2 steps."

• Cross-reference: For checkout form complexity, see the minimal-fields check in Address & Form Handling. For step navigation integrity, see the step-navigation check below.

• Remediation: Combine related steps in your checkout pages, typically under src/app/checkout/:

  Before:  Address → Shipping → Billing → Payment → Review → Confirm (6 steps)
  After:   Shipping Info → Payment → Review (3 steps)
  

  Or implement single-page checkout at src/app/checkout/page.tsx:

  // src/app/checkout/page.tsx
  function Checkout() {
    const [step, setStep] = useState('shipping')
  
    return (
      <>
        {step === 'shipping' && <ShippingForm />}
        {step === 'payment' && <PaymentForm />}
        {step === 'review' && <ReviewOrder />}
      </>
    )
  }