Post-purchase checkout extensions overview
Post-purchase checkout extensions allow merchants to add a post-purchase page directly into the Shopify checkout. The post-purchase page appears after the order is confirmed, but before the thank you page. You can use these extensions to add custom content such as the following:
- Upsell offers
- Survey requests
- Feedback requests
- Donation requests
- Discount code offers
- Important notifications
- Loyalty sign-ups
- You've created a partner account and a development store.
- You've installed the Shopify CLI.
- You follow the Guidelines and limitations and considerations.
- You request access to use the post-purchase checkout extension on a live store.
- You understand how apps fit into Shopify and the different types of apps you can build.
The following diagram illustrates a high-level customer flow for an app that uses a post-purchase checkout extension:
The customer goes to the payment information page.
The page loads the Checkout::PostPurchase::ShouldRender extension point.
(Optional) The extension makes a network call to your app server to obtain any data needed for the post-purchase page. The extension can store data in the browser's local storage, speeding up the time to the first render.
The extension returns the result of
renderto the payment information page. For
true, all the required conditions must be met (for example, the customer's credit card must be vaulted before the post-purchase offer is displayed).
The customer completes checkout.
If render returned
true, then the post-purchase page loads the Checkout::PostPurchase::Render extension point. Any stored data is directly available to the
renderextension point. You app needs to call done to redirect the customer to the thank you page.
App Bridge Checkout
Post-purchase checkout extensions use App Bridge Checkout, a technology that hosts your extension on Shopify's CDN and integrates directly into the Shopify checkout. App Bridge Checkout includes a set of consistent UI components, extension points, and development tools.
You create an extension by writing in Vanilla JS or React, and deciding whether to use TypeScript. Shopify securely hosts and renders your user interface in the client. When the extension appears to the customer in the checkout, it includes both app-provided and Shopify-provided interface elements, as shown in the diagram below: