Skip to main content

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:

TypeSource
Order detailspaymentSetup() response
Financial totalspaymentSetup() response
Items purchasedCart data via getCurrentCartData()
Customer infoCheckout form input
AddressesCheckout form input

Order Confirmation Best Practices

Creating an effective order confirmation page is crucial for customer satisfaction and retention:

Key Elements to Include

  1. Order summary - List of purchased items, quantities, and prices
  2. Order ID / reference number - For customer support queries
  3. Shipping information - Delivery address and estimated arrival
  4. Payment details - Payment method used, billing address
  5. Next steps guidance - Order tracking information and "Continue shopping" option

Next Steps