CheckoutComponent

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

Preview

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

​CheckoutComponent

​Preview

​Import

​Usage

​Props

​Behavior

CheckoutComponent

Preview

Import

Usage

Props

Behavior