Order Success Page

Overview

The Order Success Page (OSP) provides users with a structured summary of their completed purchase. It confirms that the order was successfully placed and displays key details such as order information, purchased products, delivery details, and payment method. To ensure a seamless transition from checkout, the OSP follows a consistent layout, clear content structure, and intuitive navigation, aligning with the Basket and Checkout experience.

This page is only accessible for a limited time after the purchase, as its availability is controlled by the configurable token expiration setting.

Key Features

1. Order Summary
   Presents essential details, including the order date, order number, and customer ID, ensuring users can easily reference their purchase.
2. Payment
   Provides a transparent overview of payment method and billing details.
3. Product List
   Groups purchased items by package, preserving the original order structure.
4. Delivery Information
   Displays estimated delivery dates along with shipping provider details above the first product in each package.
5. Price Summary
   Shows a breakdown of costs, including subtotal, discounts, shipping, and taxes.
6. Call-to-Actions (CTAs)
   Encourages further engagement through “Continue Shopping” and “Order Details” buttons.

Delivery and Billing Address

If the billing and delivery addresses are the same, they are displayed in a single section under a unified label. If the addresses differ, they are shown separately, with clear distinctions. The recipient’s name, street address, and city with zip code are retrieved from the backend to provide an accurate and structured display.

Product List

The product list preserves the original order structure by grouping purchased items by package. Delivery details, including estimated delivery dates and shipping provider information, appear above the first product in each package. The backend provides a flat list of purchased products, which are displayed as separate entries, even if multiple units of the same variant were purchased.

Product Card

Each product is displayed using a detailed product card that includes:

• Product image, brand, and name for easy identification.
• Specifications such as size and color to provide clarity.
• Quantity and price to ensure accurate cost tracking.
• Subscription details, if applicable, retrieved from the backend.

Price Summary

The Price Summary offers a transparent breakdown of the total cost, ensuring users understand what they are paying for:

• Subtotal: The price before shipping.
• Delivery Costs: The shipping fee, retrieved directly from the order details.
• Final Price: The total amount after applying shipping costs.
• Taxes: The tax calculation dynamically adjusts based on the shop’s tax policy, displaying whether taxes are included or excluded accordingly.

Error State: Expired Token

If an order cannot be retrieved due to an expired or invalid token, users will see a dedicated error state. This ensures a clear and user-friendly experience, guiding them toward the next steps.

Customizing the OSP

For customization options and further adjustments to the Order Success Page, please refer to our Customization Guideline.