Skip to main content

CartPanel

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.
A slide-out side panel that shows all items in the customer’s cart, order summary with subtotal/tax/total, and a checkout button.

Preview

Import

Usage

Props

Cart
required
The cart object containing items, totals, and applied discounts.
(itemId: string, quantity: number) => void
required
Callback to update an item’s quantity.
(itemId: string) => void
required
Callback to remove an item from the cart.
() => void
required
Callback fired when the checkout button is clicked.
boolean
required
Controls the panel’s open/closed state.
() => void
required
Callback to close the panel.

Behavior

  • Slides in from the right with backdrop overlay
  • Each item row shows name, modifiers summary, quantity stepper, and line total
  • Order summary section with subtotal, tax, discounts, and total
  • Empty state with illustration and “Browse menu” CTA
  • Traps focus when open for accessibility