Building a post-purchase checkout extension
In this tutorial, you’ll learn how to create a basic example of a post-purchase checkout extension. For general information on post-purchase checkout extensions, including limitations and considerations, refer to the overview.
RequirementsAnchor link to section titled "Requirements"
- You've created a Partner account and a development store.
- Your development store has a few products to test the extension.
- You can place test orders on your development store.
- You've set up a tunnel using a tunneling provider such as Cloudflare Tunnel.
You've created an app that uses Shopify CLI 3.0 or higher, or you've migrated your existing app so it's compatible with Shopify CLI 3.0 or higher.
Step 1: Create the extensionAnchor link to section titled "Step 1: Create the extension"
You'll use Shopify CLI to generate a new extension.
Navigate to the directory of the app that you want to add your extension to.
Run the following command to start creating the checkout extension:
post-purchase UIas the type of extension.
Provide a name for your extension using either dash case or snake case.
You should now have a new extension directory that includes the extension script at
After the extension is created, replace the contents of your extension script (either
src/index.ts) with the code below.
Checkout::PostPurchase::ShouldRender runs when a buyer reaches the payment page of the checkout, and determines whether to show the post-purchase page.
Checkout::PostPurchase::Render runs after the buyer submits their payment information and returns the UI component to be rendered.
Step 2: Test the extensionAnchor link to section titled "Step 2: Test the extension"
Live post-purchase checkout extensions are hosted and served by Shopify, so during the setup and testing you need to use a Shopify browser extension to serve your local checkout extensions to checkout.
The browser extension automatically updates the checkout URLs while testing.
- Navigate to your app directory.
Either start or restart your server to build and preview your app. Use the following command, where
https://my-tunnel-url:portis the URL of a tunnel that you've started using a tunnel provider:
When you run the
devcommand, the CLI builds and serves your app. It also walks you through multiple configuration steps. If you've already run
devfor this app, then some of these steps are skipped.
To learn about the processes that are executed when you run
dev, refer to the Shopify CLI command reference.
Install the Shopify Chrome browser extension.
In the browser extension settings, enter the extension root URL that Shopify CLI printed to the console.
Place a test order in your development store and go through the checkout steps. The post-purchase UI is shown after the payment step but before the thank you page.
Step 3: Build the extension UIAnchor link to section titled "Step 3: Build the extension UI"
The UI components for these post-purchase checkout extensions are managed by Shopify to ensure that the checkout is fast, optimized for mobile, and integrated with Shop Pay. To finish building the extension, you need to add data pre-fetching and complete the UI.
Checkout::PostPurchase::ShouldRender to pre-fetch data so that the extension loads quickly. The
fetchPostPurchaseData function returns mock data and saves it in the
storage object. This data is used when rendering the UI. The following example code shows how to add data pre-fetching to your extension:
After you've added data pre-fetching, place a new test order in your development store and go through the checkout steps. The post-purchase page will then render: