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>