Show Cart Totals

In this guide, you'll learn how to show the cart totals in the checkout flow. This is usually shown as part of the checkout and cart pages.

Cart Total Fields#

The Cart object has various fields related to its totals, which you can check out in the Store API reference.

The fields that are most commonly used are:

Example: Show Cart Totals in React Storefront#

Here's an example of how you can show the cart totals in a React component:

Code
1"use client" // include with Next.js 13+2
3import { useCart } from "@/providers/cart"4
5export default function CartTotals() {6  const { cart } = useCart()7
8  const formatPrice = (amount: number): string => {9    return new Intl.NumberFormat("en-US", {10      style: "currency",11      currency: cart?.currency_code || "USD",12    })13    .format(amount)14  }15
16  return (17    <div>18      {!cart && <span>Loading...</span>}19      {cart && (20        <ul>21          <li>22            <span>Subtotal (excl. taxes)</span>23            <span>{formatPrice(cart.subtotal ?? 0)}</span>24          </li>25          <li>26            <span>Discounts</span>27            <span>{formatPrice(cart.discount_total ?? 0)}</span>28          </li>29          <li>30            <span>Shipping</span>31            <span>{formatPrice(cart.shipping_total ?? 0)}</span>32          </li>33          <li>34            <span>Taxes</span>35            <span>{formatPrice(cart.tax_total ?? 0)}</span>36          </li>37          <li>38            <span>Total</span>39            <span>{formatPrice(cart.total ?? 0)}</span>40          </li>41        </ul>42      )}43    </div>44  )45}

In the example, you first retrieve the cart using the Cart Context. Then, you define the formatPrice function to format the total amounts.

Finally, you render the cart totals in a list, showing the subtotal, discounts, shipping, taxes, and the total amount.

Retrieve and Show Cart Item Totals#

You can also show the totals specific to each item in the cart. This is useful when you want to show the price breakdown for each item, such as price before and after discounts.

The cart item totals aren't included by default in the cart object. You need to explicitly expand the items.* relation when retrieving the cart. This will add item totals like total, subtotal, tax_total, and discount_total to each item object in the cart. You can learn about other total fields in the Store API reference.

For example, when retrieving the cart, you can expand the items.* relation like this:

Code
1sdk.store.cart.retrieve(cartId, {2  fields: "+items.*",3  // TIP: You can also expand both items and shipping methods at the same time4  // fields: "+items.*, +shipping_methods.*",5})6.then(({ cart: dataCart }) => {7  setCart(dataCart)8})

Then, you can show the item totals in a React component like this:

Code
1"use client" // include with Next.js 13+2
3import { HttpTypes } from "@medusajs/types"4
5type CartItemTotalsProps = {6  cart: HttpTypes.StoreCart7}8
9export default function CartItemTotals({10  cart,11}: CartItemTotalsProps) {12  const formatPrice = (amount: number): string => {13    return new Intl.NumberFormat("en-US", {14      style: "currency",15      currency: cart.currency_code,16    })17    .format(amount)18  }19
20  return (21    <ul>22      {cart.items.map((item) => (23        <li key={item.id}>24          <span>{item.title}</span>25          <span>{formatPrice(item.total!)}</span>26          <span>(Subtotal: {formatPrice(item.subtotal!)})</span>27          <span>(Discounts: {formatPrice(item.discount_total!)})</span>28          <span>(Taxes: {formatPrice(item.tax_total!)})</span>29        </li>30      ))}31    </ul>32  )33}

In the example, you receive the cart with the expanded item totals as a prop. Then, you define the formatPrice function to format the total amounts.

Finally, you render the cart items in a list, showing each item's title, total, subtotal, discounts, and taxes.

Retrieve and Show Shipping Method Totals#

You can also show the totals specific to each shipping method in the cart. This is useful when you want to show the price breakdown for each shipping method, such as price before and after discounts.

The cart shipping method totals aren't included by default in the cart response. You need to explicitly expand the shipping_methods.* relation when retrieving the cart. This will add shipping method totals like total, subtotal, tax_total, and discount_total to each shipping method object in the cart. You can learn about other total fields in the Store API reference.

For example, when retrieving the cart, you can expand the shipping_methods.* relation like this:

Code
1sdk.store.cart.retrieve(cartId, {2  fields: "+shipping_methods.*",3  // TIP: You can also expand both items and shipping methods at the same time4  // fields: "+items.*, +shipping_methods.*",5})6.then(({ cart: dataCart }) => {7  setCart(dataCart)8})

Then, you can show the shipping method totals in a React component like this:

Code
1"use client" // include with Next.js 13+2
3import { HttpTypes } from "@medusajs/types"4
5type CartShippingMethodTotalsProps = {6  cart: HttpTypes.StoreCart7}8
9export default function CartShippingMethodTotals({10  cart,11}: CartShippingMethodTotalsProps) {12  const formatPrice = (amount: number): string => {13    return new Intl.NumberFormat("en-US", {14      style: "currency",15      currency: cart.currency_code,16    })17    .format(amount)18  }19
20  return (21    <ul>22      {cart.shipping_methods.map((method) => (23        <li key={method.id}>24          <span>{method.name}</span>25          <span>{formatPrice(method.total!)}</span>26          <span>(Subtotal: {formatPrice(method.subtotal!)})</span>27          <span>(Discounts: {formatPrice(method.discount_total!)})</span>28          <span>(Taxes: {formatPrice(method.tax_total!)})</span>29        </li>30      ))}31    </ul>32  )33}

In the example, you receive the cart with the expanded shipping method totals as a prop. Then, you define the formatPrice function to format the total amounts.

Finally, you render the cart shipping methods in a list, showing each method's name, total, subtotal, discounts, and taxes.