Getting started with post-purchase checkout extensions

In this tutorial, you’ll learn how to do the following tasks:

• Create a basic post-purchase extension.
• Run the extension locally and test it on a development store.
• Build the extension UI.
• Deploy your extension code to Shopify.
• Create a version of your extension and publish it.
• Request access to run the post-purchase checkout extension on a live store.

• You're familiar with post-purchase checkout extensions.
• You've created a Partner account and a development store.
• You've populated your store with test products.
• 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.

To create a post-purchase checkout extension, you can use Shopify CLI, which generates starter code for building your extension and automates common development tasks.

1. Navigate to your app directory:

2. Run one of the following commands to create a new post-purchase checkout extension:

   You should now have a new extension directory that includes the extension script at src/index.{file-extension}.

3. After the extension is created, replace the contents of your extension script (either src/index.js or src/index.ts) with the following code.

   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.

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. Navigate to your app directory.

2. Either start or restart your server to build and preview your app. Use the following command, where https://my-tunnel-url:port is the URL of a tunnel that you've started using a tunnel provider:

   
   When you run the dev command, the CLI builds and serves your app. It also walks you through multiple configuration steps. If you've already run dev for 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.

3. Install the Shopify Chrome browser extension.

4. In the browser extension settings, enter the extension root URL that Shopify CLI printed to the console.

   

5. 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 order status page.

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, place a new test order in your development store and go through the checkout steps. The post-purchase page will then render:

When you're ready, you can deploy your extension code to Shopify.

1. Navigate to your app directory.

2. Run one of the following commands:

   To learn about the processes that are executed when you run deploy, refer to the Shopify CLI command reference.

3. Click Enable to preview a draft of your extension in a development store.

   

When you're ready to release your extension to merchants, you can create a version and publish it.

If you want to run the post-purchase checkout extension on a live store, then you need to request access. Before you request access, you need an unpublished app in a development store.

After your access request has been approved, any apps that you distribute through the Shopify App Store also need to be submitted for review in the Partner Dashboard. The review process is slightly different for existing apps and new apps.

For existing apps:

• You need to test your app using an unpublished app in a development store.
• To add the post-purchase checkout extension to a published app, you must submit the unpublished testing app for review in the Partner Dashboard.
• If the new app meets the stated requirements, then it will be approved and the post-purchase extension can be added to your existing published app.

For new apps:

• You need to test your app using an unpublished app in a development store.
• To add the post-purchase checkout extension to a published app, you must submit the unpublished testing app for review in the Partner Dashboard.
• If the new app meets the stated requirements, then it will be approved and listed in the Shopify App Store.

1. From your Partner Dashboard, click Apps.
2. Click the name of the app that you want to change.
3. Click App setup.
4. In the Post-purchase section, on the Access post-purchase extensions card, click Request access.
5. In the Post-purchase page that opens, describe why you're applying for access.
6. You'll see a banner that your request is under review. The review process can take up to seven days.

After your request is approved, you're notified in the Partner Dashboard that your app has full access to the post-purchase extensions.

• Learn how to create a post-purchase upsell.