You've generated a product subscription app extension, and you now have a project folder with the extension script (either
./index.js). This guide describes the extension points in the script and how the script renders data and UI components.
Extension pointsAnchor 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:
||Add an existing purchase option to a product or variant.|
||Create a new purchase option|
||Edit an existing purchase option|
||Remove an existing purchase option from a product or variant|
Data renderingAnchor 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.
In the following example, the current product is being rendered inside the extension as (Product 1):
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 React, input data is passed using the
useDatahook. Refer to the React product subscription app extension template.
UI componentsAnchor link to section titled "UI components"
Create callback function renders the UI components that appear in the canvas of the app overlay.
The example renders the following UI components:
For more information, refer to the following resources: