Skip to main content

​
CartPanel

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.
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