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

Requirements

• 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.

Customer flow

The following diagram illustrates a high-level customer flow for an app that uses a post-purchase checkout extension:

1. The customer goes to the payment information page.

2. The page loads the Checkout::PostPurchase::ShouldRender extension point.

3. (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.

4. The extension returns the result of render to the payment information page. For render to be 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).

5. The customer completes checkout.

6. If render returned true, then the post-purchase page loads the Checkout::PostPurchase::Render extension point. Any stored data is directly available to the render extension 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:

Limitations and considerations

The following limitations and considerations for post-purchase checkout extensions apply:

• Alternative payment methods: The post-purchase page won't be surfaced in the following scenarios:
  • The customer chooses to check out with an installment service or a wallet service (such as Klarna, Affirm, AfterPay, Apple Pay, Amazon Pay, or Google Pay).
  • The initial purchase was made with a gift card or any payment method other than a credit card.
• Purchase events: Third-party analytic services that use the Shopify Pixel API (such as Google Analytics, Facebook, Pinterest and Snap) report only the purchase event and value for the initial purchase.
• Analytics: Third-party analytics services that use the ScriptTag REST Admin API or GraphQL Admin API resource, or Additional Scripts have incomplete conversion data, because they're only triggered on the thank you page.
• Duties and support for multiple currencies: Post-purchase upsell offers won’t be surfaced on orders with duties and multiple currencies.
• Order creation delays: In scenarios such as flash sales where the Shopify Platform is under extreme load, our system might optimize to capture orders but briefly delay the order creation step for a fast and seamless buyer experience. In these scenarios, post-purchase pages won't be surfaced, even if the request for the post-purchase page was properly made.
• Multiple apps: Merchants with multiple apps that have the post-purchase checkout extension need to select which app appears on the post-purchase page. You can use a banner during app onboarding to let merchants know that they can select your app as the default post-purchase app in the Shopify admin checkout settings.
• Fulfillment holds: Shopify places a hold on fulfillment for all orders undergoing a post purchase cross-sell flow. Holds are released either when the customer visits the thank you page, or after a set amount of time, if the customer doesn't complete the post-purchase flow. If the customer doesn't complete the flow (for example, the customer closes the browser before actioning the post-purchase upsell offer), then the fulfillment hold is lifted one hour after submission of the initial checkout. Fulfillment holds are only supported using the FulfillmentOrder resource.
• Interaction with the thank you page. The post-purchase page shouldn't be used as a replacement for the thank you page. For more information, refer to the customer flow.
• Tracking and status functionality. You can't add any order tracking or status functionality on the post-purchase page.
• API versioning. The post-purchase checkout extension APIs aren't versioned and don't follow the Shopify API versioning quarterly release schedule.
• Orders without a shipping address: If the customer's checkout results in the creation of an order without a shipping address, then you can't add a subscription to the order using post-purchase. For example, a customer might have bought only digital products, which doesn't require a shipping address. Similarly, a customer might choose local pickup as their delivery method, which also doesn't require a shipping address. You can determine in advance whether a shipping address exists by viewing the payment step within the ShouldRender extension point. If the destinationCountryCode input field is null, then no shipping address is set.