Order Confirmation in Storefront

In this guide, you'll learn how to show the different order details on the order confirmation page.

After the customer completes the checkout process and places an order, you can show an order confirmation page to display the order details.

Retrieve Order Details#

To show the order details, you need to retrieve the order by sending a request to the Get an Order API route.

You need the order's ID to retrieve the order. You can pass it from the complete cart step or store it in the localStorage.

The following example assumes you already have the order ID:

In the above example, you retrieve the order's details from the Get an Order API route. Then, in the React example, you show the order details like the order ID, order date, and customer email.

The rest of this guide will expand on the React example to show more order details.

Show Order Items#

An order has an items field that contains the order items. You can show the order items on the order confirmation page.

For example, add to the React component a formatPrice function to format prices with the order's currency:

Code
1const formatPrice = (amount: number): string => {2  return new Intl.NumberFormat("en-US", {3    style: "currency",4    currency: order?.currency_code,5  })6  .format(amount)7}

Since this is the same function used to format the prices of products and cart totals, you can define the function in one place and re-use it where necessary. In that case, make sure to pass the currency code as a parameter.

Then, you can show the order items in a list:

Code
1return (2  <div>3    {loading && <span>Loading...</span>}4    {!loading && order && (5      <div>6        {/* ... */}7        <p>8          <span>Order Items</span>9          <ul>10            {order.items?.map((item) => (11              <li key={item.id}>12                {item.title} - {item.quantity} x {formatPrice(item.unit_price)}13              </li>14            ))}15          </ul>16        </p>17        {/* TODO show more details */}18      </div>19    )}20  </div>21)

In the above example, you show the order items in a list, displaying the item's title, quantity, and unit price formatted with the formatPrice function.

Locale of Order Items#

When you complete the cart, items in the order will be in the locale that was set for the cart. This ensures that the customer sees the order details in their preferred language.

If no locale was set for the cart, then the order's items will be in the original product content.

Show Order Totals#

An order has various fields for the order totals, which you can check out in the Order schema in the Store API reference. The most commonly used fields are:

You can show these totals on the order confirmation page. For example:

Code
1return (2  <div>3    {loading && <span>Loading...</span>}4    {!loading && order && (5      <div>6        {/* ... */}7        <div>8          <span>Order Totals</span>9          <ul>10            <li>11              <span>Subtotal (excl. taxes)</span>12              <span>{formatPrice(order.subtotal ?? 0)}</span>13            </li>14            <li>15              <span>Discounts</span>16              <span>{formatPrice(order.discount_total ?? 0)}</span>17            </li>18            <li>19              <span>Shipping</span>20              <span>{formatPrice(order.shipping_total ?? 0)}</span>21            </li>22            <li>23              <span>Taxes</span>24              <span>{formatPrice(order.tax_total ?? 0)}</span>25            </li>26            <li>27              <span>Total</span>28              <span>{formatPrice(order.total ?? 0)}</span>29            </li>30          </ul>31        </div>32      </div>33    )}34  </div>35)

In the above example, you show the order totals in a list, displaying the subtotal, discounts, shipping, taxes, and total amount formatted with the formatPrice function.