useCartPunchout hook

This feature is only available for stores using B2B Buyer Portal, which is currently available to selected accounts.

The useCartPunchout hook allows you to access cart data and perform mutations that are reflected across the Checkout data layer.

This hook is only available in some extension points.

Usage


_10import { useCartPunchout } from '@vtex/checkout'
_10
_10const TotalItems = () => {
_10  const cart = useCartPunchout()
_10
_10  return <div>Items: {cart.items.length}</div>
_10}

You can also use useCartPunchout to update the cart by mutating the items list:

//src/index.tsx


_12import { useCartPunchout } from '@vtex/checkout'
_12
_12const AddItemExample = () => {
_12  const cart = useCartPunchout()
_12  const addItem = () => cart.addItem({
_12    quantity: 1,
_12    seller: '1',
_12    id: '8392'
_12  })
_12
_12  return <button onClick={addItem}>Add to cart</button>
_12}

You can also remove items from the cart:

//src/index.tsx


_12import { useCartPunchout, useCartItem } from '@vtex/checkout'
_12
_12const RemoveItemExample = () => {
_12  const cart = useCartPunchout()
_12  const cartItem = useCartItem()
_12
_12  const removeItem = () => cart.removeItem({
_12    originalIndex: cartItem.originalIndex
_12  })
_12
_12  return <button onClick={removeItem}>Remove from cart</button>
_12}

useCartPunchout does not expose every operation supported by the Checkout API. If you update Checkout data through the Checkout API directly, call sync() afterward to refresh the UI and ensure it reflects the latest cart state.

This is useful for actions not covered by the hook, such as updating shipping information through POST Add shipping address and select delivery option endpoint.

//src/index.tsx


_12import { useCartPunchout } from '@vtex/checkout'
_12
_12const MyComponent = () => {
_12  const cart = useCartPunchout()
_12
_12  const handleClick = async() => {
_12    // Performs some interaction with some VTEX API
_12    await cart.sync();
_12  }
_12
_12  return <button onClick={handleClick}>Add to cart</button>
_12}

Parameters

The useCartPunchout hook does not accept any parameters.

Returns

The useCartPunchout hook returns an object with the following properties:

items

items: CartItem[]

The current list of items in the cart.

addItem

addItem: (data: AddItemData) => Promise<void>

The AddItemData type is an object with the following structure:


_10type AddItemData = {
_10   quantity: number;
_10   id: string;
_10   seller: string;
_10};

removeItem

removeItem: (data: RemoveItemData) => Promise<void>

The RemoveItemData type is an object with the following structure:


_10type RemoveItemData = {
_10   originalIndex: number;
_10};

sync

sync: () => Promise<void>

Extension Points

This hook is available in the following extension points:

punchout.cart-item.after
punchout.order-summary.cta