Create a post-purchase upsell

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

• Create a product in your development store to use in an upsell offer.
• Build an app server to get the product ID and sign changes to the order.
• Update your extension code to add the product to the order, and calculate shipping costs and taxes.

• You've completed the Getting started with post-purchase checkout extensions tutorial.

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.

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.

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.

1. Install all necessary dependencies:

2. Start the server:

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

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:

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

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

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

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.

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.

• Get familiar with the UX guidelines for creating post-purchase upsells.
• Learn how to create and update subscriptions in a post-purchase checkout extension.