Checkout Flow

The checkout is a multi-step flow with a progress indicator. Each step is a separate route under /checkout/.

Flow Overview

Cart (/cart) → Checkout Review (/checkout) → Shipping (/checkout/shipping) → Payment (/checkout/payment) → Confirmation (/order-confirmation)

Cart

Route: /cart

• Line items with product image, name, variant, quantity, price
• CartLineItem component with quantity adjustment and remove button
• OrderSummary component showing subtotal, shipping, tax, and total
• "Proceed to Checkout" CTA

import { CartLineItem } from "@/components/storefront/cart-line-item"
import { OrderSummary } from "@/components/storefront/order-summary"

Checkout Review

Route: /checkout

Cart summary review before entering shipping details. Shows the same OrderSummary sidebar with a "Continue to Shipping" button.

Shipping

Route: /checkout/shipping

• Shipping address form (name, address, city, state, zip, country)
• Shipping method selection (standard, express, overnight)
• Cost calculated per method
• CheckoutSteps progress indicator showing current step

Payment

Route: /checkout/payment

• Payment method selection (credit card, PayPal, Apple Pay)
• Credit card form (number, expiry, CVV)
• Billing address (same as shipping toggle)
• Order summary sidebar
• "Place Order" CTA

Order Confirmation

Route: /order-confirmation

• Success state with order number
• Order details summary
• Shipping address confirmation
• Estimated delivery date
• "Continue Shopping" and "View Order" CTAs

Checkout Steps Component

The CheckoutSteps layout component renders a horizontal progress indicator:

import { CheckoutSteps } from "@/components/layout/checkout-steps"

// Steps: Review → Shipping → Payment → Confirmation
<CheckoutSteps currentStep={2} /> // Highlights up to "Shipping"

Connecting to a Payment Provider

The payment page includes placeholder form fields. To integrate a real payment provider:

1. Stripe: Replace the card form with Stripe Elements (@stripe/react-stripe-js)
2. PayPal: Add the PayPal JS SDK button
3. Custom: Wire the form's onSubmit to your payment API

Note: All checkout pages are client components ("use client") since they handle form state and user interactions.