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 learn
Anchor 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.
Requirements
Anchor link to section titled "Requirements"- You've completed the Getting started with post-purchase checkout extensions tutorial.
Step 1: Create a product in your store
Anchor 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 server
Anchor 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 code
Anchor 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 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
Anchor link to section titled "Running the server"Install all necessary dependencies:
Start the server:
The offer
endpoint
Anchor link to section titled "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
, andtotal
properties. Instead, these values are calculated in the checkout based on the shipping address.
The sign-changeset
endpoint
Anchor link to section titled "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
Anchor 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 works
Anchor 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 Checkout::PostPurchase::ShouldRender
Anchor link to section titled "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
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 calculateChangeset
,
awaits the result, and updates the UI with the price breakdown.
Update the order using applyChangeset
Anchor link to section titled "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.
- Get familiar with the UX guidelines for creating post-purchase upsells.
- Learn how to create and update subscriptions in a post-purchase checkout extension.