> ## Documentation Index
> Fetch the complete documentation index at: /docs/llms.txt
> Use this file to discover all available pages before exploring further.

# <CheckoutComponent />

> Top-level checkout orchestrator that manages the multi-step checkout flow.

# CheckoutComponent

<Snippet file="api-key-location.mdx" />

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

## Preview

Desktop

Mobile

## Import

```tsx theme={null}
import { CheckoutComponent } from '@/components/CheckoutComponent'
```

## Usage

```tsx theme={null}
<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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.