Choose a version:

CartProvider
component

The CartProvider component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the useCart() hook anywhere.

There are props that trigger when a call to the Storefront API is made, such as onLineAdd={} when a line is added to the cart. There are also props that trigger when a call to the Storefront API is completed, such as onLineAddComplete={} when the fetch request for adding a line to the cart completes.

The CartProvider component must be a descendant of the ShopifyProvider component .

Anchor to propsProps

Anchor to children children React.ReactNode required: Any ReactNode elements.
Anchor to numCartLines numCartLines number: Maximum number of cart lines to fetch. Defaults to 250 cart lines.
Anchor to onCreate onCreate () => void: A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API.
Anchor to onLineAdd onLineAdd () => void: A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API.
Anchor to onLineRemove onLineRemove () => void: A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API.
Anchor to onLineUpdate onLineUpdate () => void: A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API.
Anchor to onNoteUpdate onNoteUpdate () => void: A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API.
Anchor to onBuyerIdentityUpdate onBuyerIdentityUpdate () => void: A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API.
Anchor to onAttributesUpdate onAttributesUpdate () => void: A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API.
Anchor to onDiscountCodesUpdate onDiscountCodesUpdate () => void: A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API.
Anchor to onCreateComplete onCreateComplete () => void: A callback that is invoked when the process to create a cart completes
Anchor to onLineAddComplete onLineAddComplete () => void: A callback that is invoked when the process to add a line item to the cart completes
Anchor to onLineRemoveComplete onLineRemoveComplete () => void: A callback that is invoked when the process to remove a line item to the cart completes
Anchor to onLineUpdateComplete onLineUpdateComplete () => void: A callback that is invoked when the process to update a line item in the cart completes
Anchor to onNoteUpdateComplete onNoteUpdateComplete () => void: A callback that is invoked when the process to add or update a note in the cart completes
Anchor to onBuyerIdentityUpdateComplete onBuyerIdentityUpdateComplete () => void: A callback that is invoked when the process to update the buyer identity completes
Anchor to onAttributesUpdateComplete onAttributesUpdateComplete () => void: A callback that is invoked when the process to update the cart attributes completes
Anchor to onDiscountCodesUpdateComplete onDiscountCodesUpdateComplete () => void: A callback that is invoked when the process to update the cart discount codes completes
Anchor to data data PartialDeep<CartType, {recurseIntoArrays: true}>: An object with fields that correspond to the Storefront API's Cart object.
Anchor to cartFragment cartFragment string: A fragment used to query the Storefront API's Cart object for all queries and mutations. A default value is used if no argument is provided.
Anchor to customerAccessToken customerAccessToken string: A customer access token that's accessible on the server if there's a customer login.
Anchor to countryCode countryCode CountryCode: The ISO country code for i18n.
Anchor to languageCode languageCode LanguageCode: The ISO luanguage code for i18n.

CartProviderProps

children
Any `ReactNode` elements.
```
React.ReactNode
```
numCartLines
Maximum number of cart lines to fetch. Defaults to 250 cart lines.
```
number
```
onCreate
A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API.
```
() => void
```
onLineAdd
A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API.
```
() => void
```
onLineRemove
A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API.
```
() => void
```
onLineUpdate
A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API.
```
() => void
```
onNoteUpdate
A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API.
```
() => void
```
onBuyerIdentityUpdate
A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API.
```
() => void
```
onAttributesUpdate
A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API.
```
() => void
```
onDiscountCodesUpdate
A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API.
```
() => void
```
onCreateComplete
A callback that is invoked when the process to create a cart completes
```
() => void
```
onLineAddComplete
A callback that is invoked when the process to add a line item to the cart completes
```
() => void
```
onLineRemoveComplete
A callback that is invoked when the process to remove a line item to the cart completes
```
() => void
```
onLineUpdateComplete
A callback that is invoked when the process to update a line item in the cart completes
```
() => void
```
onNoteUpdateComplete
A callback that is invoked when the process to add or update a note in the cart completes
```
() => void
```
onBuyerIdentityUpdateComplete
A callback that is invoked when the process to update the buyer identity completes
```
() => void
```
onAttributesUpdateComplete
A callback that is invoked when the process to update the cart attributes completes
```
() => void
```
onDiscountCodesUpdateComplete
A callback that is invoked when the process to update the cart discount codes completes
```
() => void
```
data
An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-01/objects/cart).
```
PartialDeep<CartType, {recurseIntoArrays: true}>
```
cartFragment
A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided.
```
string
```
customerAccessToken
A customer access token that's accessible on the server if there's a customer login.
```
string
```
countryCode
The ISO country code for i18n.
```
CountryCode
```
languageCode
The ISO luanguage code for i18n.
```
LanguageCode
```

{
  /** Any `ReactNode` elements. */
  children: React.ReactNode;
  /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
  numCartLines?: number;
  /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */
  onCreate?: () => void;
  /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */
  onLineAdd?: () => void;
  /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */
  onLineRemove?: () => void;
  /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */
  onLineUpdate?: () => void;
  /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */
  onNoteUpdate?: () => void;
  /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */
  onBuyerIdentityUpdate?: () => void;
  /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */
  onAttributesUpdate?: () => void;
  /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
  onDiscountCodesUpdate?: () => void;
  /** A callback that is invoked when the process to create a cart completes */
  onCreateComplete?: () => void;
  /** A callback that is invoked when the process to add a line item to the cart completes */
  onLineAddComplete?: () => void;
  /** A callback that is invoked when the process to remove a line item to the cart completes */
  onLineRemoveComplete?: () => void;
  /** A callback that is invoked when the process to update a line item in the cart completes */
  onLineUpdateComplete?: () => void;
  /** A callback that is invoked when the process to add or update a note in the cart completes */
  onNoteUpdateComplete?: () => void;
  /** A callback that is invoked when the process to update the buyer identity completes */
  onBuyerIdentityUpdateComplete?: () => void;
  /** A callback that is invoked when the process to update the cart attributes completes */
  onAttributesUpdateComplete?: () => void;
  /** A callback that is invoked when the process to update the cart discount codes completes */
  onDiscountCodesUpdateComplete?: () => void;
  /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-01/objects/cart). */
  data?: PartialDeep<CartType, {recurseIntoArrays: true}>;
  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2024-01/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
  cartFragment?: string;
  /** A customer access token that's accessible on the server if there's a customer login. */
  customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
  /** The ISO country code for i18n. */
  countryCode?: CountryCode;
  /** The ISO luanguage code for i18n. */
  languageCode?: LanguageCode;
}

Was this section helpful?

Example code

import {CartProvider, useCart} from '@shopify/hydrogen-react';

export function App() {

<CartProvider

onLineAdd={() => {

console.log('a line is being added');

}}

onLineAddComplete={() => {

console.log('a line has been added');

}}

</CartProvider>;

}

function CartComponent() {

const {linesAdd, status} = useCart();

const merchandise = {merchandiseId: '{id-here}'};

return (

<div>

Cart Status: {status}

<button onClick={() => linesAdd([merchandise])}>Add Line</button>

</div>

);

}

examples

Example code

description

I am the default example

JavaScript

import {CartProvider, useCart} from '@shopify/hydrogen-react';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

TypeScript

import {CartProvider, useCart} from '@shopify/hydrogen-react';
import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise: CartLineInput = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

Anchor to relatedRelated

useCart

ShopifyProvider

CartProvidercomponent

Anchor to propsProps

CartProviderProps

examples

Example code

description

JavaScript

TypeScript

Anchor to relatedRelated

CartProvider
component