Skip to main content

​
CheckoutComponent

Need storefront configuration?

Use the public API origin, merchant slug, and location ID. Storefront components never receive a Crave API key; register each exact browser origin before making requests.
The main checkout container that orchestrates the multi-step checkout flow — customer details, fulfillment selection, payment, and order confirmation.

​
Preview

​
Import

​
Usage

​
Props

​
Cart
required
The finalized cart to check out.
​
string
required
The location ID for this order.
​
(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