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 |
Order Confirmation Best Practices
Creating an effective order confirmation page is crucial for customer satisfaction and retention:
Key Elements to Include
- Order summary - List of purchased items, quantities, and prices
- Order ID / reference number - For customer support queries
- Shipping information - Delivery address and estimated arrival
- Payment details - Payment method used, billing address
- Next steps guidance - Order tracking information and "Continue shopping" option