Create a post-purchase subscription
In this tutorial, you'll learn how to create a post-purchase offer that allows a buyer to add a subscription to their order.
What you'll learnAnchor link to section titled "What you'll learn"
In this tutorial, you’ll learn how to do the following tasks:
- Update your app with the required scopes to manage subscriptions
- Add UI elements to allow buyers to select one time or subscription products
- Update the app server to return subscription data
RequirementsAnchor link to section titled "Requirements"
- You've completed Getting started with post-purchase checkout extensions.
LimitationsAnchor link to section titled "Limitations"
You can't create a post-purchase subscription that does the following:
- Modifies a subscription on an order with an existing subscription
- Adds a subscription to an order with an existing subscription
- Converts a one-time purchase into a subscription order
Step 1: Add required dataAnchor link to section titled "Step 1: Add required data"
To offer a customer a subscription, a product needs to have an associated selling plan group. Selling plans represent how products can be sold and purchased. When you create a selling plan, you can determine the policies under which a product can be sold. For example, you can create a selling plan where a customer can purchase a subscription on a monthly billing cycle, and where you offer a 15% discount for weekly deliveries of the product.
Update app scopesAnchor link to section titled "Update app scopes"
To create a selling plan and associate it to a product, you need to add the
write_purchase_options scope to the app.
Update the app scopes in the
shopify.app.toml file to include the
write_purchase_options scope. This scope allows you to create selling plan groups.
After you update scopes, when you navigate to the app home in the Shopify admin, you should be prompted to reauthorize the app to allow editing of purchase options. If you're not prompted to reauthorize, restart your server, and then navigate to the app home in the Shopify admin.
Create a selling plan groupAnchor link to section titled "Create a selling plan group"
Use the GraphQL Admin API to create a selling plan group, and associate a product with the selling plan group. In the following
cURL command, add the
myshopify domain of your development store, the access token for the app, and the product and variant IDs of the product that you're offering in the upsell.
Step 2: Return subscription information from the app serverAnchor link to section titled "Step 2: Return subscription information from the app server"
Update the offers listed in the
/web/index.js file that you created in the previous tutorial to return an offer with the selling plan information that you created in the previous step.
Step 3: Update your extension code to offer subscriptionsAnchor link to section titled "Step 3: Update your extension code to offer subscriptions"
Replace the content of your extension script with the following code.
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 2 works.
Showing the selling plan optionsAnchor link to section titled "Showing the selling plan options"
To show the selling plan options to buyers, you need to use the
Select component. When a buyer selects a new selling plan, we update the value of the selected purchase option.
After you've updated the code, the selling plan option renders as follows:
Updating the price breakdownAnchor link to section titled "Updating the price breakdown"
To show the price breakdown matching the currently selected offer, you need to call
calculateChangeset when the buyer selects a selling plan:
After you've updated the code, the price breakdown renders as follows:
Showing a recurring subtotalAnchor link to section titled "Showing a recurring subtotal"
For subscription offers, you need to display the recurring subtotal of the order.
After you've updated the code, the recurring subtotal renders as follows:
Collecting buyer's consentAnchor link to section titled "Collecting buyer's consent"
To add a subscription item to an order, the buyer’s payment method must be vaulted for future billing cycles of the subscription. Before you can vault the buyer's payment method, the buyer has to explicitly give consent to the subscription policies. Use the
BuyerConsent component in App Bridge to collect consent:
This component creates a checkbox and a link to the subscription policies.
Applying the subscription changeAnchor link to section titled "Applying the subscription change"
add_subscription change to be accepted, the value of the buyer consent checkbox needs to be provided as a new parameter to the
applyChangeset method. Without this parameter, the changeset won’t be applied and an error is returned.
Step 4: Test your extensionAnchor link to section titled "Step 4: Test your extension"
Complete a test order on your store and go through the checkout steps. When the post-purchase page appears, add a subscription product to your order. Navigate to the orders section of the Shopify Admin. You should see that on the latest order you have a one time as well as a subscription product.
- Get familiar with the UX guidelines for creating subscriptions with post-purchase checkout extensions.