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.

Post-purchase page 03

Requirements

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.js or 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.

  1. Install the Shopify Chrome or Firefox browser extension.

  2. In Shopify CLI, run the following command:

The command returns a URL that you'll use in the next step.

  1. In the browser extension settings, enter the Script URL that shopify extension serve printed to the console, and enter the API Key that's located in the Partner Dashboard. Browser extension

  2. 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. Post-purchase page 02

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.

Use 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:

Post-purchase page 03

Next steps