Order Confirmation

This guide explains how to create effective order confirmation pages and manage order status updates after successful checkout.

Understanding Order Data Flow in Elastic Path

When designing your checkout customer journey, it's important to consider that the security limitations of the implicit token (as used by your storefront) mean you cannot retrieve detailed order information directly from the storefront after checkout. This means that to provide a cohesive order confirmation page, you must retain information from the checkout process and pass it to your order confirmation page or component.

Retaining Checkout Information

During the checkout process, capture and store the order details before redirecting to the confirmation page.

First, if you need to retrieve your cart data (since carts are persisted in Elastic Path), here's how you do it:

import { getACart, getCartId } from "@epcc-sdk/sdks-shopper";

// Retrieve current cart data with items
async function getCurrentCartData() {
  const cartId = getCartId();
  if (!cartId) {
    throw new Error("No cart found. Please add items to your cart first.");
  }

  const cartResponse = await getACart({
    path: {
      cartID: cartId,
    },
    query: {
      include: "items",
    },
  });

  const cartData = cartResponse.data;
  if (!cartData?.data || cartData.data.length === 0) {
    throw new Error("Cart is empty. Please add items before checkout.");
  }

  return cartData;
}

Constructing Order Data

The orderData object should contain all the information needed to display the order confirmation. You need to build this during the checkout process by combining data from multiple sources:

// Example: Building orderData during checkout
async function buildOrderData(customerData, cartData, paymentResponse) {
  const orderData = {
    // Order identifiers - from payment response
    id: paymentResponse.data?.data?.order?.id,
    reference: paymentResponse.data?.data?.order?.reference,
    status: paymentResponse.data?.data?.order?.status,
    completed_at: new Date().toISOString(),

    // Financial information - from payment response
    total:
      paymentResponse.data?.data?.order?.meta?.display_price?.with_tax
        ?.formatted,
    subtotal:
      paymentResponse.data?.data?.order?.meta?.display_price?.without_tax
        ?.formatted,
    tax: paymentResponse.data?.data?.order?.meta?.display_price?.tax?.formatted,

    // Items purchased - from original cart data
    items: cartData.data, // Cart items with their pricing and details

    // Customer information - from checkout form data
    customer: {
      name: customerData.customer?.name,
      email: customerData.customer?.email,
    },

    // Address information - from checkout form data
    billing_address: customerData.billing_address,
    shipping_address: customerData.shipping_address,
  };

  return orderData;
}

// Usage during checkout:
const cartData = await getCurrentCartData(); // Get cart items
const paymentResponse = await paymentSetup({
  /* ... */
}); // Complete payment
const orderData = buildOrderData(customerData, cartData, paymentResponse);

Data Sources Breakdown:

Type	Source
Order details	`paymentSetup()` response
Financial totals	`paymentSetup()` response
Items purchased	Cart data via `getCurrentCartData()`
Customer info	Checkout form input
Addresses	Checkout form input