Skip to main content

​
CheckoutComponent

Need an API key?

Get one from Crave Dashboard > Developers > API Development > Step 1 - API Keys. Copy the matching locationId from Step 2 - Location IDs on the same page.
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