Upsell example

In this tutorial, you'll learn how to create a post-purchase upsell using checkout extensions. This tutorial builds on the basic example tutorial, and we recommend completing that first.

Post-purchase overview

Step 1: Create a product in your store

You need to have a product in your development store to use in the upsell offer.

If you don't have a product in your development store, then you can add a product using the following curl command:

You'll use the returned product ID later in this tutorial.

Step 2: Build an app server

You need an app server to get the product ID and sign changes to the order. The order is updated when the customer accepts the upsell.

Example app server code

You can use this complete app server code for your app. If you already have an app server, then you can modify it to support this use case using the example code.

Create a folder and save the following app server code in a file called index.js.

In order to use your own store and product, create a file called .env in the same folder and update the constants with values for your app, development store and product ID.

Running the server

  1. Install all necessary dependencies:

  2. Start the server:

The offer endpoint

Open http://localhost:8077/offer and you should see a JSON object describing the product you're using in this tutorial. This JSON object is similar to the hard-coded mock data from the previous tutorial, with the following differences:

  • This JSON object includes a variantId property used by the extension code to add the product to the order.
  • This JSON object doesn't include the shipping, taxes, and total properties. Instead, these values are calculated in the checkout based on the shipping address.

The sign-changeset endpoint

The sign-changeset endpoint uses JWT tokens for the following reasons:

  • Verifies that the request comes from Shopify.
  • Signs changes your app wants to apply to an order, for example, adding a product. Shopify uses the signature to verify that the changes come from your app.

Step 3: Update the extension code

Replace the content of your extension script with the following code. The code uses the calculateChangeset API to calculate the shipping costs and taxes. The code also uses the applyChangeset API to add a product to the order.

After you've updated the code, the post-purchase page renders as follows:

Post-purchase overview

Clicking the Pay Now button displays the thank you page with the updated order, and sends a notification email to the customer.

Post-purchase page total price loaded from server

How the example extension code works

The following sections explain how different parts of the example extension code in Step 3 works.

Fetch product data in Checkout::PostPurchase::ShouldRender

The Checkout::PostPurchase::ShouldRender handler pre-fetches product data from the server that is running locally.

Compute shipping and taxes using calculateChangeset

Shipping costs and taxes are calculated based on the shipping address. This is done in the checkout using the calculateChangeset function provided by the API.

When the component renders, the code calls the async function calculateChangeset, awaits the result, and updates the UI with the price breakdown.

Update the order using applyChangeset

The acceptOffer handler posts a request to the server to sign the changes as a JWT token. The request includes inputData.token, which the server uses to verify Shopify's request. The following code calls applyChangeset with the JWT token returned from the server.

Next steps