Behio Storefront SDK
React Hooks

Cart & Checkout Hooks

React hooks for cart management and checkout

useCart

const { data: cart, isLoading } = useCart();
// cart: { items, bundleLines, subtotal, grandTotal, currency }

useAddToCart

const addItem = useAddToCart();

<button onClick={() => addItem.mutateAsync({ productId: id, quantity: 1 })}>
  Add to Cart
</button>

useUpdateCartItem

const updateQty = useUpdateCartItem();

await updateQty.mutateAsync({ itemId: 'cart-item-id', quantity: 3 });

useRemoveCartItem

const removeItem = useRemoveCartItem();

await removeItem.mutateAsync('cart-item-id');

useCheckout

const checkout = useCheckout();

const handleSubmit = async (formData) => {
  try {
    const order = await checkout.mutateAsync({
      email: formData.email,
      shippingAddress: formData.address,
      redeemLoyaltyPoints: formData.loyaltyPoints,
    });
    router.push(`/thank-you?order=${order.orderNumber}`);
  } catch (err) {
    // Handle error (stock, gift card, etc.)
  }
};

Loading States

All mutation hooks provide isPending for button states:

const addItem = useAddToCart();

<button disabled={addItem.isPending}>
  {addItem.isPending ? 'Adding...' : 'Add to Cart'}
</button>

On this page