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.
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
Running the server
Install all necessary dependencies:
Start the server:
http://localhost:8077/get-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.
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:
Clicking the Pay Now button displays the thank you page with the updated order, and sends a notification email to the customer.
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 handler pre-fetches product data from the server that is running locally.
Compute shipping and taxes using
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
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.