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: 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,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. shipping & 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.