Extension points

You've generated a product subscription app extension, and you now have a project folder with the extension script (either ./index.ts(x) or ./index.js). This guide describes the extension points in the script and how the script renders data and UI components.

Extension points

Anchor link to section titled "Extension points"

Each extension point is triggered by a different merchant action, receives different data, and is responsible for handling a distinct part of the subscription experience.

The product subscription app extension uses the following extension points:

Extension points
Extension point	Mode	Description
`Admin::Product::SubscriptionPlan::Add`	`Add`	Add an existing purchase option to a product or variant.
`Admin::Product::SubscriptionPlan::Create`	`Create`	Create a new purchase option
`Admin::Product::SubscriptionPlan::Edit`	`Edit`	Edit an existing purchase option
`Admin::Product::SubscriptionPlan::Remove`	`Remove`	Remove an existing purchase option from a product or variant

Example

Anchor link to section titled "Example"

The following example shows how to render the extension points in JavaScript and React:

Expected responses

Anchor link to section titled "Expected responses"

The response of an extension point will depend on the context in which it was triggered. Here are the expected responses:

Product details page

Anchor link to section titled "Product details page"

Extension point expected responses in the Shopify admin product details page
Extension point	Expected reponse
`Admin::Product::SubscriptionPlan::Add`	`productId`: The `id` of the current product `variantId`: `null`
`Admin::Product::SubscriptionPlan::Create`	`productId`: The `id` of the current product `variantId`: `null`
`Admin::Product::SubscriptionPlan::Edit`	`sellingPlanGroupId`: The `id` of the selling plan group being edited `productId`: The `id` of the current product `variantId`: `null`
`Admin::Product::SubscriptionPlan::Remove`	`sellingPlanGroupId`: The `id` of the selling plan group being edited `productId`: The `id` of the current product `variantId`: `null` `variantIds`: An array of the current product's child variant `ids` for which you should also remove the selling plan group association

Variant details page

Anchor link to section titled "Variant details page"

Extension point expected responses in the Shopify admin variant details page
Extension point	Expected reponse
`Admin::Product::SubscriptionPlan::Add`	`productId`: The `id` of the current variant's parent product `variantId`: The `id` of the current variant
`Admin::Product::SubscriptionPlan::Create`	`productId`: The `id` of the current variant's parent product `variantId`: The `id` of the current variant
`Admin::Product::SubscriptionPlan::Edit`	`sellingPlanGroupId`: The `id` of the selling plan group being edited `productId`: The `id` of the current variant's parent product `variantId`: The `id` of the current variant
`Admin::Product::SubscriptionPlan::Remove`	`sellingPlanGroupId`: The `id` of the selling plan group being edited `productId`: The `id` of the current variant's parent product `variantId`: The `id` of the current variant `variantIds`: An empty array because the variant has no child variants

Data rendering

Anchor link to section titled "Data rendering"

Your extension receives data from the host page. The Create callback function includes the data passed into the host page.

Example

Anchor link to section titled "Example"

In the following example, the current product is being rendered inside the extension as (Product 1):

App Bridge Admin subscriptions app overlay

In the first line of the Create callback function, the data variable is assigned to the input data that's passed into the extension from the host page.

In vanilla JavaScript, input data is passed into the Create callback function. Refer to the JavaScript product subscription app extension template.
In React, input data is passed using the useData hook. Refer to the React product subscription app extension template.