Skip to main content

​
CheckoutComponent

The main checkout container that orchestrates the multi-step checkout flow — customer details, fulfillment selection, payment, and order confirmation.

​
Preview

View in Storybook

​
Import

import { CheckoutComponent } from '@/components/CheckoutComponent'

​
Usage

<CheckoutComponent
  cart={cart}
  locationId={locationId}
  onOrderComplete={handleOrderComplete}
/>

​
Props

​
cart
Cart
required
The finalized cart to check out.
​
locationId
string
required
The location ID for this order.
​
onOrderComplete
(order: Order) => void
required
Callback fired when the order is successfully placed.

​
Behavior

  • Multi-step flow: Customer Details → Fulfillment → Payment → Confirmation
  • Progress indicator at the top showing current step
  • Validates each step before allowing progression
  • Handles payment processing errors with retry
  • Displays order summary sidebar on desktop