• What you'll learn
  • Requirements
  • Step 1: Set up requests to your app’s backend server
  • Step 2: Set up unit testing
  • Next steps

Create and manage a product subscription app extension

This tutorial explains how to create and manage a product subscription app extension. You'll use the Add, Create, Edit, and Remove extension modes to make requests to your app's backend server.

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:

  • Set up requests to your app's backend server
  • Set up unit testing for your extension

Requirements

Anchor link to section titled "Requirements"
  • Configure your app's backend server and acquire a session token.
    • Extensions built with App Bridge Admin are hosted in Shopify. To receive requests from your extension, you need to enable cross-domain requests on your app’s server.
    • Extensions built with App Bridge Admin use session tokens to authenticate requests between your extension and your app's backend server. You need to provide the session token in every request to your backend server.

Step 1: Set up requests to your app’s backend server

Anchor link to section titled "Step 1: Set up requests to your app’s backend server"

After you generate the product subscription app extension, you can set up requests to your app's backend server for each extension mode.

Create a new purchase option

Anchor link to section titled "Create a new purchase option"

The Create mode enables users to create a new purchase option for the current product or one of its variants. The Create plan UI should display the plan title, the delivery frequency, and the discount percentage. The Create mode triggers the app overlay container.

The request to your backend server triggers the sellingPlanGroupsCreate mutation.

  1. In the payload, include the productId and variantId collected from the extension form.
  2. In the header, include the session token. If the response returns an OK status, then you can request done to re-render the modal and close to close it.

Example

Anchor link to section titled "Example"

Add an existing purchase option to a product or variant

Anchor link to section titled "Add an existing purchase option to a product or variant"

The Add mode enables users to add the current product to an existing purchase option. The Add plan UI should display a searchable list of purchase options on the shop. The purchase options that are already associated with the product either directly or through one of its variants should not be listed. The Add mode triggers the app modal container.

The request to your backend server triggers the productJoinSellingPlanGroups mutation, applying the selected SellingPlan objects to the current product.

  1. In the payload, include the productId and variantId collected from the extension form.
  2. In the header, include the session token. If the response returns an OK status, then you can request done to re-render the modal and close to close it.

Example

Anchor link to section titled "Example"

Edit an existing purchase option

Anchor link to section titled "Edit an existing purchase option"

The Edit mode enables users to edit a product's purchase option. The Edit plan UI should display the plan title, the delivery frequency, and the discount percentage. The Edit mode triggers the app overlay container.

The request to your backend service triggers the sellingPlanGroupUpdate mutation, applying the selected SellingPlan objects to the current product.

  1. In the payload, include the productId and variantId collected from the extension form and the sellingPlanGroupId.
  2. In the header, include the session token. If the response returns an OK status, then you can request done to re-render the modal and close to close it.

Example

Anchor link to section titled "Example"

Remove an existing purchase option from a product or variant

Anchor link to section titled "Remove an existing purchase option from a product or variant"

The Remove mode enables users to remove a product's purchase option. The Remove plan UI should display the plan and product titles. The Remove mode triggers the app modal container.

  • If the purchase option is associated at the product level (sellingPlanGroup.appliesToProduct is true), then the request to your backend server triggers the sellingPlanGroupRemoveProducts mutation.
  • If the purchase option is associated at the variant level (sellingPlanGroup.appliesToProductVariants is true), then the request to your backend server triggers the sellingPlanGroupRemoveProductVariants mutation.
  1. In the payload, include the productId, variantId, variantIds and the sellingPlanGroupId.
  2. In the header, include the session token. If the response returns an OK status, then you can request done to re-render the modal and close to close it.

Example

Anchor link to section titled "Example"

Step 2: Set up unit testing

Anchor link to section titled "Step 2: Set up unit testing"

To thoroughly test your extension, we recommend that you set up unit testing. You can use a testing framework that best suits your needs.

  • The underlying technology for App Bridge Admin is remote-ui. @remote-ui/testing is a testing library that you can use to test subscription app extension components and their usage.
  • The APIs in @remote-ui/testing are inspired by the @shopify/react-testing library.

Next steps

Anchor link to section titled "Next steps"
  • Learn how to deploy and release your app extension.

On this page

  • What you'll learn
  • Requirements
  • Step 1: Set up requests to your app’s backend server
  • Step 2: Set up unit testing
  • Next steps