---
title: Interface: UseCart
slug: chord-ui/interface-usecart
docTags: 
createdAt: 2023-11-06T15:03:31.906Z
---

[react-autonomy](docId\:zoZ6W56ubpPACr0PO0GLS).UseCart

`UseCart` contains the data and methods returned by the [useCart](docId\:kgn9cl0x0Uu5x8r67I-XU) hook.

## Hierarchy

- `Omit`\<`RootInitialState`\[`"cart"`], `"data"`>

  ↳&#x20;

## Properties

### addCrossSell

• **addCrossSell**: (`options`: [`CrossSell`](docId\:yUcK1z8ZIa3cFJL4U9gYj)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `addCrossSell` function takes an array of line items post-checkout and
adds them to the order, charging the card again in the process.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const CrossSellCheckoutButton = ({ orderID, orderToken, lineItemsAttributes }) => {
  const { addCrossSell } = useCart()

  const purchaseCrossSells = async () => addCrossSell({
    lineItemsAttributes,
    cart: {
      number: orderID,
      token: orderToken,
    },
  })

  return <button onClick={purchaseCrossSells}>Buy</button>
}
```

### Parameters

| Name      | Type                                        |
| --------- | ------------------------------------------- |
| `options` | [`CrossSell`](docId\:yUcK1z8ZIa3cFJL4U9gYj) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:154](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L154)

***

### addPromoCode

• **addPromoCode**: (`options`: [`AddPromoCode`](docId\:t7O8Q0LJlG16jM9OIdDN_)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `addPromoCode` function applies a promo code to the current shopping
cart.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const PromoCodeForm = () => {
  const { cart, addPromoCode } = useCart()
  const onSubmit = async ({ promoCode }) => {
    try {
      await addPromoCode(promoCode)
    } catch(error) {
      console.error('Error applying promo code.')
    }
  }
}
```

### Parameters

| Name      | Type                                           |
| --------- | ---------------------------------------------- |
| `options` | [`AddPromoCode`](docId\:t7O8Q0LJlG16jM9OIdDN_) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:176](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L176)

***

### addSubscription

• **addSubscription**: (`subscription`: [`AddSubscriptionItem`](docId\:AYiZ8VVYHliiZe23RA-I6)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`subscription`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `addSubscription` function adds a subscription item to the customer's
cart.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const AddSubscriptionToCartButton = ({
  sku,
  quantity,
  endDate,
  intervalUnit,
  intervalLength,
}) => {
  const { addSubscription } = useCart()

  const addToCart = async () => addSubscription({
    sku,
    quantity,
    endDate,
    interval: {
      length: intervalLength,
      unit: intervalUnit,
    },
  })

  return <button onClick={addToCart}>Add To Cart</button>
}
```

### Parameters

| Name           | Type                                                  |
| -------------- | ----------------------------------------------------- |
| `subscription` | [`AddSubscriptionItem`](docId\:AYiZ8VVYHliiZe23RA-I6) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:209](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L209)

***

### addToCart

• **addToCart**: (`items`: [`AddToCartItem`](docId\:sSShuROp-MkAfs9-TKtzS) | [`AddToCartItem`](docId\:sSShuROp-MkAfs9-TKtzS)\[]) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`items`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `addToCart` function adds a product variant to the current shopping cart
(creating a line item).



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { addToCart } = useCart()
  const onSubmit = ({ sku, quantity }) => {
    addToCart({
      sku,
      quantity,
      metadata: {
        brand: 'the-plant-store',
      }
    })
  }
}
```

### Parameters

| Name    | Type                                                                                                  | Description                   |
| ------- | ----------------------------------------------------------------------------------------------------- | ----------------------------- |
| `items` | [`AddToCartItem`](docId\:sSShuROp-MkAfs9-TKtzS) \| [`AddToCartItem`](docId\:sSShuROp-MkAfs9-TKtzS)\[] | The items to add to the cart. |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves once the items are added to the cart.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:235](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L235)

***

### cart

• **cart**: `Partial`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

An object representing the current shopping cart.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:129](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L129)

***

### checkRedemptionCodeValidity

• **checkRedemptionCodeValidity**: (`code`: `string`, `email`: `string`) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`code`, `email`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `checkRedemptionCodeValidity` function checks the validity of a gift
card redemption code or prepaid subscription redemption code. It does not
require the customer to be logged in. It will return the order the
redemption code is valid for such that a redemption code form can be filled
in or products can be displayed dynamically.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const RedemptionCodeForm = () => {
  const { checkRedemptionCodeValidity } = useCart()
  const params = new URLSearchParams(window.location.search)
  const code = params.get('code')

  const { data: order, error } = useAsyncEffect(() => {
    return checkRedemptionCodeValidity(code)
  }, [checkRedemptionCodeValidity, code])

  if (error) {
    return <p>Invalid redemption code.</p>
  }

  return <Items items={order.lineItems} />
}
```

### Parameters

| Name    | Type     |
| ------- | -------- |
| `code`  | `string` |
| `email` | `string` |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves with the order the redemption code is valid for.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:268](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L268)

***

### emptyCart

• **emptyCart**: () => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `emptyCart` function clears the customer's cart contents (line items,
promo codes, metadata) while keeping the same order number.

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:276](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L276)

***

### error

• **error**: `Error`

### Inherited from

Omit.error

### Defined in

[packages/react-autonomy/src/redux/store/initial-state.ts:59](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/redux/store/initial-state.ts#L59)

***

### forgetCart

• **forgetCart**: () => \{ `type`: `string` = FORGET\_CART }

### Type declaration

▸ (): `Object`

The `forgetCart` function clears the customer's cart.

### Returns

`Object`

| Name   | Type     |
| ------ | -------- |
| `type` | `string` |

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:280](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L280)

***

### isFetching

• **isFetching**: `boolean`

### Inherited from

Omit.isFetching

### Defined in

[packages/react-autonomy/src/redux/store/initial-state.ts:57](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/redux/store/initial-state.ts#L57)

***

### isLoaded

• **isLoaded**: `boolean`

### Inherited from

Omit.isLoaded

### Defined in

[packages/react-autonomy/src/redux/store/initial-state.ts:58](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/redux/store/initial-state.ts#L58)

***

### loadCart

• **loadCart**: () => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `loadCart` function loads the current cart based on the current browser
session and populates the cart in Redux. `loadCart` is automatically called
on page load so this should not be called except in exceptional
circumstances.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { cart, loadCart } = useCart()

  useEffect(() => {
    loadCart().catch(error => {
      console.error(error.message)
    })
  }, [loadCart])
}
```

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves when the cart object has been added to Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:304](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L304)

***

### modifyCart

• **modifyCart**: (`options`: [`ModifyCart`](docId\:bvt0TQygO4xw0EN6upCul)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `modifyCart` function modifies the current cart. It sends it's payload
to the [Chord OMS update order endpoint](https://chord.stoplight.io/docs/chord-oms/b3A6MTE3Nzk0Mjk-update-order).

### Parameters

| Name      | Type                                         |
| --------- | -------------------------------------------- |
| `options` | [`ModifyCart`](docId\:bvt0TQygO4xw0EN6upCul) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves when the `cart` object has been updated in
Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:312](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L312)

***

### modifyGiftCards

• **modifyGiftCards**: (`options`: [`GiftCardsInput`](docId\:bM82cy-wBhfZzpyrnbq1v)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `modifyGiftCards` function applies or removes gift cards from the current
cart.

The `giftCardsDetails` object is returned in the `lineItem` object if the
`lineItem` is a gift card. Additionally, newly redeemed gift cards are
available in the `user` object for indicating to the user that they have
received a gift.

The gift cards can be updated by including the gift card `id` along with any
of the following params: `recipientName, recipientEmail, giftMessage,`
`purchaserName, sendEmailAt.`The recipient email is a required field as that
will be the account used to redeem the gift cards.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

export default () => {
  const { modifyGiftCards } = useCart()
  const onSubmit = (event) => {
    modifyGiftCards({
      giftCardsDetails: [
        {
          recipientEmail: "test@chord.co",
          giftMessage: "Hi!",
          sendEmailAt: "2021-11-15",
          id: "49"
        },
        {
          recipientEmail: "admin@chord.co",
          giftMessage: "",
          sendEmailAt: "2021-11-16",
          id: "50"
        }
      ]
    })
  }
}
```

### Parameters

| Name      | Type                                             |
| --------- | ------------------------------------------------ |
| `options` | [`GiftCardsInput`](docId\:bM82cy-wBhfZzpyrnbq1v) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves when the `cart` object has been updated in
Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:364](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L364)

***

### modifyLineItem

• **modifyLineItem**: (`options`: [`ModifyLineItem`](docId\:KhcIw54vt64_-VoaSFoEQ)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `modifyLineItem` function updates a line item in the customer's cart.
It calls [Chord OMS's update order line item endpoint](https://chord.stoplight.io/docs/chord-oms/5ca7631abac5c-update-order-line-item).

### Parameters

| Name      | Type                                             |
| --------- | ------------------------------------------------ |
| `options` | [`ModifyLineItem`](docId\:KhcIw54vt64_-VoaSFoEQ) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A promise that resolves when the cart has been updated in Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:319](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L319)

***

### promoCode

• **promoCode**: `Object`

### Type declaration

| Name         | Type      |
| ------------ | --------- |
| `isFetching` | `boolean` |

### Inherited from

Omit.promoCode

### Defined in

[packages/react-autonomy/src/redux/store/initial-state.ts:60](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/redux/store/initial-state.ts#L60)

***

### purchasePrepaidSubscription

• **purchasePrepaidSubscription**: (`input`: [`PurchasePrepaidSubscription`](docId\:iWxuFvE0Me2ffQ0ux3Z1X)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`input`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `purchasePrepaidSubscription` function allows the customer to purchase
a prepaid/gift subscription. The process is the caller provides a input of
SKUs, quantities, installments, delivery frequency and shipping address
and is returned an order that is outside of react-autonomy's state
management ready to direct the customer straight to checkout. You should
pass `order.checkoutSessionId` to your checkout provider to direct the
customer to the next step.



This example is using Stripe for the checkout. It will allow the user to
purchase a yearlog gift subscription for someone else.

```javascript
import { useCart } from '@chordcommerce/react-autonomy'

// Make sure to call loadStripe outside of a component’s render to avoid
// recreating the Stripe object on every render.
const stripePromise = loadStripe(process.env.STRIPE_PK_KEY, {
  stripeAccount: process.env.STRIPE_CONNECTED_ACCOUNT
})

const GiftSubscriptionButton = ({ address }) => {
  const { purchasePrepaidSubscription } = useCart()

  const onClick = () => {
    const stripe = await stripePromise
    const order = await purchasePrepaidSubscription({
      sku: 'flower-club-subscription',
      quantity: 1,
      options: {
        prepaidSubscription: {
          installmentCount: 12,
          interval: {
            units: 'month',
            length: 1,
          },
          lineItems: [{
            sku: 'flower-club-subscription',
            quantity: 1,
          }],
          autoRedeem: true,
          actionableDate: new Date(),
          gift: true,
          recipient: {
            name: address.name,
            email: 'help@chord.co',
          },
          shipAddress: address,
        }
      }
    })
    stripe.redirectToCheckout({
      checkoutSessionId: order.checkoutSessionId,
    })
  }

  return <button onClick={onClick}>Buy Now!</button>
}
```

### Parameters

| Name    | Type                                                          |
| ------- | ------------------------------------------------------------- |
| `input` | [`PurchasePrepaidSubscription`](docId\:iWxuFvE0Me2ffQ0ux3Z1X) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A promise containing a new order with just the subscription in it.
You should pass it's `checkoutSessionId` to your checkout provider.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:429](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L429)

***

### redeemGiftCard

• **redeemGiftCard**: (`code`: `string`, `email`: `string`) => `Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

### Type declaration

▸ (`code`, `email`): `Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

The `redeemGiftCard` function redeems a gift card to the account matching
the email provided during the initial purchase. It does not require the
user to be logged in.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const RedemptionForm = () => {
  const { redeemGiftCard } = useCart()

  const submitHandler = async (e) => {
    const code = event.target.code
    await redeemGiftCard(code)
  }

  return (
    <form onSubmit={submitHandler}>
      <label>
        <span>Enter redemption code</span>
        <input type="text" name="code" />
      </label>
    </form>
  )
}
```

### Parameters

| Name    | Type     |
| ------- | -------- |
| `code`  | `string` |
| `email` | `string` |

### Returns

`Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:461](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L461)

***

### redeemPrepaidSubscription

• **redeemPrepaidSubscription**: (`payload`: [`RedeemPrepaidSubscriptionInput`](docId\:QPPZZECChPRqJIF7G7v-t)) => `Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

### Type declaration

▸ (`payload`): `Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

The `redeemPrepaidSubscription` function redeems a prepaid subscription
to the account  matching the email provided during the initial purchase. It
does not require the user to be logged in.



```javascript
import { useCart } from '@chordcommerce/react-autonomy'

const RedemptionForm = () => {
  const { redeemPrepaidSubscription } = useCart()

  const submitHandler = async (e) => {
    const { redemptionCode ...shipAddress } = Object.fromEntries(new FormData(event.target))
    await redeemGiftCard({
      redemptionCode,
      shipAddress,
    })
  }

  return (
    <form onSubmit={submitHandler}>
      <label>
        <span>Enter redemption code</span>
        <input type="text" name="redemptionCode" />
      </label>
      <AddressInputs />
    </form>
  )
}
```

### Parameters

| Name      | Type                                                             |
| --------- | ---------------------------------------------------------------- |
| `payload` | [`RedeemPrepaidSubscriptionInput`](docId\:QPPZZECChPRqJIF7G7v-t) |

### Returns

`Promise`\<[`GiftCardRedemption`](docId\:WaEmxxayWQ2dF_eaTOuyB)>

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:495](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L495)

***

### removeFromCart

• **removeFromCart**: (`options`: [`RemoveFromCart`](docId\:iZ4vkiklkV8kzgrPwfGzA)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `removeFromCart` function removes a line item from the cart.

### Parameters

| Name      | Type                                             |
| --------- | ------------------------------------------------ |
| `options` | [`RemoveFromCart`](docId\:iZ4vkiklkV8kzgrPwfGzA) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves when the `cart` object has been updated in
Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:504](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L504)

***

### removePromoCode

• **removePromoCode**: (`options`: [`RemovePromoCode`](docId\:SHNt0QkmsyMT06sQuHXfC)) => `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

### Type declaration

▸ (`options`): `Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

The `removePromoCode` function removes an applied promo code from the cart.

### Parameters

| Name      | Type                                              |
| --------- | ------------------------------------------------- |
| `options` | [`RemovePromoCode`](docId\:SHNt0QkmsyMT06sQuHXfC) |

### Returns

`Promise`\<[`OrderBig`](docId\:DVIAOg1oIcYzDwppPPgmo)>

A Promise that resolves when the `cart` object has been updated in
Redux.

### Defined in

[packages/react-autonomy/src/hooks/use-cart.ts:511](https://github.com/chordcommerce/chord-ui/blob/2b105e1/packages/react-autonomy/src/hooks/use-cart.ts#L511)