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.
Step 1: Create the extension
In Shopify CLI, run the following command to create the files for a post-purchase extension:
Follow the instructions in order to scaffold your Checkout Post Purchase extension.
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 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.
In Shopify CLI, run the following command:
The command returns a URL that you'll use in the next step.
In the browser extension settings, enter the Script URL that
shopify extension serveprinted to the console, and enter the API Key that's located in the Partner Dashboard.
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 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, the post-purchase page renders as follows: