Create a post-purchase upsell
In this tutorial, you'll learn how to create an upsell using a post-purchase checkout extension:
What you'll learnAnchor link to section titled "What you'll learn"
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.
RequirementsAnchor link to section titled "Requirements"
- You've completed the Getting started with post-purchase checkout extensions tutorial.
Step 1: Create a product in your storeAnchor link to section titled "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 serverAnchor link to section titled "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 codeAnchor link to section titled "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
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 serverAnchor link to section titled "Running the server"
Install all necessary dependencies:
Start the server:
The Anchor link to section titled "The offer endpoint"
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
variantIdproperty used by the extension code to add the product to the order.
- This JSON object doesn't include the
totalproperties. Instead, these values are calculated in the checkout based on the shipping address.
The Anchor link to section titled "The sign-changeset endpoint"
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 codeAnchor link to section titled "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:
Clicking the Pay Now button displays the order status page with the updated order, and sends a notification email to the customer.
How the example extension code worksAnchor link to section titled "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 Anchor link to section titled "Fetch product data in Checkout::PostPurchase::ShouldRender"
Checkout::PostPurchase::ShouldRender handler pre-fetches product data from the server that is running locally.
Compute shipping and taxes using Anchor link to section titled "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
awaits the result, and updates the UI with the price breakdown.
Update the order using Anchor link to section titled "Update the order using applyChangeset"
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.