Create and manage a product subscription app extension

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

• 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.

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

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.

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.

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.

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.

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.

• Learn how to deploy and release your app extension.