--- title: CartProvider description: >2- 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 . api_version: 2023-04 api_name: hydrogen-react source_url: html: 'https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartprovider' md: >- https://shopify.dev/docs/api/hydrogen-react/2023-04/components/cartprovider.md --- # Cart​Provider 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 . ## Props * **children** **ReactNode** **required** Any `ReactNode` elements. * **numCartLines** **number** Maximum number of cart lines to fetch. Defaults to 250 cart lines. * **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. * **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. * **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. * **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. * **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. * **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. * **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. * **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. * **onCreateComplete** **() => void** A callback that is invoked when the process to create a cart completes * **onLineAddComplete** **() => void** A callback that is invoked when the process to add a line item to the cart completes * **onLineRemoveComplete** **() => void** A callback that is invoked when the process to remove a line item to the cart completes * **onLineUpdateComplete** **() => void** A callback that is invoked when the process to update a line item in the cart completes * **onNoteUpdateComplete** **() => void** A callback that is invoked when the process to add or update a note in the cart completes * **onBuyerIdentityUpdateComplete** **() => void** A callback that is invoked when the process to update the buyer identity completes * **onAttributesUpdateComplete** **() => void** A callback that is invoked when the process to update the cart attributes completes * **onDiscountCodesUpdateComplete** **() => void** A callback that is invoked when the process to update the cart discount codes completes * **data** **PartialObjectDeep\** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart). * **cartFragment** **string** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. * **customerAccessToken** **string** A customer access token that's accessible on the server if there's a customer login. * **countryCode** **CountryCode** The ISO country code for i18n. ### Cart ```ts PartialDeep ``` ### CartBase * id The cart's ID if it has been created through the Storefront API. ```ts string ``` * lines The cart lines. ```ts CartLine[] ``` * checkoutUrl The checkout URL for the cart, if the cart has been created in the Storefront API. ```ts string ``` * note The cart's note. ```ts string ``` * buyerIdentity The cart's buyer identity. ```ts CartBuyerIdentity ``` * attributes The cart's attributes. ```ts Attribute[] ``` * discountCodes The discount codes applied to the cart. ```ts CartDiscountCode[] ``` * cost The cost for the cart, including the subtotal, total, taxes, and duties. ```ts CartCost ``` * totalQuantity The total number of items in the cart, across all lines. If there are no lines, then the value is 0. ```ts number ``` Examples ### Examples * #### Example code ##### Description I am the default example ##### JavaScript ```jsx import {CartProvider, useCart} from '@shopify/hydrogen-react'; export function App() { { console.log('a line is being added'); }} onLineAddComplete={() => { console.log('a line has been added'); }} > ; } function CartComponent() { const {linesAdd, status} = useCart(); const merchandise = {merchandiseId: '{id-here}'}; return (
Cart Status: {status}
); } ``` ##### TypeScript ```tsx import {CartProvider, useCart} from '@shopify/hydrogen-react'; import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types'; export function App() { { console.log('a line is being added'); }} onLineAddComplete={() => { console.log('a line has been added'); }} > ; } function CartComponent() { const {linesAdd, status} = useCart(); const merchandise: CartLineInput = {merchandiseId: '{id-here}'}; return (
Cart Status: {status}
); } ``` ## Related [- useCart](https://shopify.dev/api/hydrogen-react/hooks/useCart) [- ShopifyProvider](https://shopify.dev/api/hydrogen-react/components/shopifyprovider)