About Thank you and Order status page customization
The Thank you and Order status pages are shown to customers at the end of checkout and can be customized using checkout UI extensions. This guide introduces how extensions on the pages work, and provides some resources for getting started.
Anchor to How it worksHow it works
You can use a UI extension to add custom content to the Thank you and Order status pages. The Thank you page is displayed to a customer as an initial purchase confirmation after they complete a checkout. If a customer attempts to return to the Thank you page or check their order status later on, then they're shown the Order status page instead.
The customer can refresh or revisit the page throughout the order creation and fulfillment process to review the details of their order, and any updates. For example, customers often visit the Order status page after clicking on a link in the order confirmation email.
You can use a UI extension on the Thank you and Order status pages to add custom content such as:
| Example | Description | Page(s) |
|---|---|---|
| Survey requests | Ask a customer to complete a survey after they've completed checkout. | Thank you |
| Product reviews | Ask a customer to complete a feedback form when they revisit their purchase. | Order status |
| Upsell offers | Prompt a customer to add more products to their initial order after they've completed payment through order editing. | Order status |
| Social sharing | Display additional social media content at the end of checkout. | Thank you and Order status |
| Download links | Offer download links for digital goods. | Thank you and Order status |
Anchor to Getting startedGetting started
Follow the getting started tutorial to learn how to build extensions for the Thank you and Order status pages.
Anchor to Developer tools and resourcesDeveloper tools and resources
Explore the following developer tools and resources to get familiar with building Thank you and Order status page extensions.
Consult the API reference for checkout UI targets and their respective types.
Learn about the components that are available in checkout UI extensions.
Learn about the properties that you can configure in your checkout UI extension.
Improve the quality of your Thank you and Order status pages by following our UX guidelines.
Anchor to Limitations and considerationsLimitations and considerations
- There's no support for APIs that directly mutate an order using a UI extension. You can use
fetchto make network calls to web services for your extension needs. For extensions that need to make changes to the order being created, consider making a post-purchase extension. - Note that for extensions on the Thank you page (target
purchase.thank-you), the order is not yet created when these extensions are displayed. However, the order id is available. You can useOrderConfirmationApito obtain the order confirmation number, or the order id. Use the order id to uniquely identify the order, and to fetch additional information about the order using the GraphQL API after order creation is complete. - For extensions on the Order status page (target
customer-account.order-status), the order is always available. Use theOrderStatusApito obtain details about the order, such as its id, name, and confirmation number.