> Deprecated:
> Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to [purchase options extensions](/docs/apps/build/purchase-options/purchase-options-extensions).


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

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:

> Note
> The extension points must be rendered separately.

<table class="extension-points">
  <caption>Extension points</caption>
  <thead>
    <tr>
      <th>Extension point</th>
      <th>Mode</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Add</code></td>
      <td><code>Add</code></td>
      <td>Add an existing purchase option to a product or variant.</td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Create</code></td>
      <td><code>Create</code></td>
      <td>Create a new purchase option</td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Edit</code></td>
      <td><code>Edit</code></td>
      <td>Edit an existing purchase option</td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Remove</code></td>
      <td><code>Remove</code></td>
      <td>Remove an existing purchase option from a product or variant</td>
    </tr>
  </tbody>
</table>

### Example

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


```typescript?title: 'JavaScript'
import {extend} from '@shopify/admin-ui-extensions';

function Add(root, api) {
  root.appendChild(root.createText('Hello, world'));
  root.mount();
}
function Create() {
  /* ... */
}
function Edit() {
  /* ... */
}
function Remove() {
  /* ... */
}

extend(
  'Admin::Product::SubscriptionPlan::Add',
  Add,
);
extend(
  'Admin::Product::SubscriptionPlan::Create',
  Create,
);
extend(
  'Admin::Product::SubscriptionPlan::Edit',
  Edit,
);
extend(
  'Admin::Product::SubscriptionPlan::Remove',
  Remove,
);
```

```typescript?title: 'React'
import {extend, render, Text} from '@shopify/admin-ui-extensions-react';

function Add() {
  return <Text>Hello, world</Text>;
}
function Create() {
  /* ... */
}
function Edit() {
  /* ... */
}
function Remove() {
  /* ... */
}

extend(
  'Admin::Product::SubscriptionPlan::Add',
  render(() => <Add />),
);
extend(
  'Admin::Product::SubscriptionPlan::Create',
  render(() => <Create />),
);
extend(
  'Admin::Product::SubscriptionPlan::Edit',
  render(() => <Edit />),
);
extend(
  'Admin::Product::SubscriptionPlan::Remove',
  render(() => <Remove />),
);
```



### 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
<table class="extension-points-expected-responses-product">
<caption>Extension point expected responses in the Shopify admin product details page</caption>
  <thead>
    <tr>
      <th>Extension point</th>
      <th>Expected reponse</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Add</code></td>
      <td><ul>
        <li><code>productId</code>: The <code>id</code> of the current product</li>
        <li><code>variantId</code>: <code>null</code></li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Create</code></td>
      <td><ul>
        <li><code>productId</code>: The <code>id</code> of the current product</li>
        <li><code>variantId</code>: <code>null</code></li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Edit</code></td>
      <td><ul>
        <li><code>sellingPlanGroupId</code>: The <code>id</code> of the selling plan group being edited</li>
        <li><code>productId</code>: The <code>id</code> of the current product</li>
        <li><code>variantId</code>: <code>null</code></li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Remove</code></td>
      <td><ul>
       <li><code>sellingPlanGroupId</code>: The <code>id</code> of the selling plan group being edited</li>
        <li><code>productId</code>: The <code>id</code> of the current product</li>
        <li><code>variantId</code>: <code>null</code></li>
        <li><code>variantIds</code>: An array of the current product's child variant <code>ids</code> for which you should also remove the selling plan group association</li>
      </ul></td>
    </tr>
  </tbody>
</table>

#### Variant details page
<table class="extension-points-expected-responses-variant">
<caption>Extension point expected responses in the Shopify admin variant details page</caption>
  <thead>
    <tr>
      <th>Extension point</th>
      <th>Expected reponse</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Add</code></td>
      <td><ul>
        <li><code>productId</code>: The <code>id</code> of the current variant's parent product</li>
        <li><code>variantId</code>: The <code>id</code> of the current variant</li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Create</code></td>
      <td><ul>
        <li><code>productId</code>: The <code>id</code> of the current variant's parent product</li>
        <li><code>variantId</code>: The <code>id</code> of the current variant</li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Edit</code></td>
      <td><ul>
        <li><code>sellingPlanGroupId</code>: The <code>id</code> of the selling plan group being edited</li>
        <li><code>productId</code>: The <code>id</code> of the current variant's parent product</li>
        <li><code>variantId</code>: The <code>id</code> of the current variant</li>
      </ul></td>
    </tr>
    <tr>
      <td><code>Admin::Product::SubscriptionPlan::Remove</code></td>
      <td><ul>
       <li><code>sellingPlanGroupId</code>: The <code>id</code> of the selling plan group being edited</li>
        <li><code>productId</code>: The <code>id</code> of the current variant's parent product</li>
        <li><code>variantId</code>: The <code>id</code> of the current variant</li>
        <li><code>variantIds</code>: An empty array because the variant has no child variants</li>
      </ul></td>
    </tr>
  </tbody>
</table>


## Data rendering

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

### Example

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

![App Bridge Admin subscriptions app overlay](/assets/api/app-extensions/argo/create-plan-overlay.png)

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](https://github.com/Shopify/admin-ui-extensions-template/blob/main/scripts/generate/templates/PRODUCT_SUBSCRIPTION/vanilla.template.js).
- In React, input data is passed using the `useData` hook. Refer to the [React product subscription app extension template](https://github.com/Shopify/admin-ui-extensions-template/blob/main/scripts/generate/templates/PRODUCT_SUBSCRIPTION/react.template.js).


```typescript?title: 'JavaScript'
import {extend, Card} from '@shopify/admin-ui-extensions';

function Create(root, api) {
  const data = api.data;

  // ...

  const planTitleCard = root.createComponent(Card, {
    sectioned: true,
    title: `Create subscription plan for Product id ${data.productId}`,
  });
  root.appendChild(planTitleCard);

  root.mount();
}

extend('Admin::Product::SubscriptionPlan::Create', Create);
```

```typescript?title: 'React'
import {extend, render, useData, Card} from '@shopify/admin-ui-extensions-react';

function Create() {
  const data = useData();

  // ...

  return (
    // ...
    <Card
      title={`Create subscription plan for Product id ${data.productId}`}
      sectioned
    > ... </Card>
  )
}

extend('Admin::Product::SubscriptionPlan::Create', render(() => <Create />);
```



## UI components

The `Create` callback function renders the UI components that appear in the canvas of the app overlay.

### Example

The example renders the following UI components:

- [`Card`](/docs/api/product-subscription-extensions/components/card)
- [`Text`](/docs/api/product-subscription-extensions/components/text)
- [`TextField`](/docs/api/product-subscription-extensions/components/textfield)
- [`InlineStack`](/docs/api/product-subscription-extensions/components/inlinestack)

![App Bridge Admin subscriptions app overlay](/assets/api/app-extensions/argo/create-plan-overlay.png)


```typescript?title: 'JavaScript'
import {extend, Card, Text, TextField, InlineStack} from '@shopify/admin-ui-extensions';

function Create(api, root) {
  // ...

  const planDetailsCard = root.createComponent(Card, {
    sectioned: true,
    title: 'Delivery and discount',
  });
  root.appendChild(planDetailsCard);

  const inlineStack = root.createComponent(InlineStack);
  planDetailsCard.appendChild(inlineStack);

  const deliveryFrequencyField = root.createComponent(TextField, {
    type: 'number',
    label: 'Delivery frequency (in weeks)',
    value: undefined,
    onChange(value) {
      deliveryFrequencyField.updateProps({
        value,
      });
    },
  });
  inlineStack.appendChild(deliveryFrequencyField);

  const percentageOffField = root.createComponent(TextField, {
    type: 'number',
    label: 'Percentage off (%)',
    value: undefined,
    onChange(value) {
      percentageOffField.updateProps({
        value,
      });
    },
  });
  inlineStack.appendChild(percentageOffField);

  const actionsElement = root.createComponent(InlineStack, {distribution: 'fill'});
  root.appendChild(actionsElement);
  actionsElement.appendChild(secondaryButton);

  const primaryButtonStack = root.createComponent(InlineStack, {
    distribution: 'trailing',
  });
  actionsElement.appendChild(primaryButtonStack);
  primaryButtonStack.appendChild(primaryButton);

  root.mount();
}

extend('Admin::Product::SubscriptionPlan::Create', Create);
```

```typescript?title: 'React'
import {extend, render, Card, Text, TextField, InlineStack} from '@shopify/admin-ui-extensions-react';

function Create() {
  // ...

  return (
    <>
      <Text size="titleLarge">Create plan</Text>
      <Card title={`Create subscription plan for Product id ${data.productId}`} sectioned>
        <TextField label="Plan title" value={planTitle} onAfterChange={setPlanTitle} />
      </Card>
      <Card title="Delivery and discount" sectioned>
        <InlineStack>
          <TextField
            type="number"
            label="Delivery frequency (in weeks)"
            value={deliveryFrequency}
            onAfterChange={setDeliveryFrequency}
          />
          <TextField
            type="number"
            label="Percentage off (%)"
            value={percentageOff}
            onAfterChange={setPercentageOff}
          />
        </InlineStack>
      </Card>
      {actions}
    </>
  );
}

extend('Admin::Product::SubscriptionPlan::Create', render(() => <Create />);
```



For more information, refer to the following resources:

- [UI components for the product subscription app extension](/docs/api/product-subscription-extensions/components)
- [JavaScript product subscription app extension template](https://github.com/Shopify/admin-ui-extensions-template/blob/main/scripts/generate/templates/PRODUCT_SUBSCRIPTION/vanilla.template.js)
- [React product subscription app extension template](https://github.com/Shopify/admin-ui-extensions-template/blob/main/scripts/generate/templates/PRODUCT_SUBSCRIPTION/react.template.js)

## Next steps

- [Authenticate requests between your extension and app server](/docs/apps/build/purchase-options/product-subscription-app-extensions/authenticate-extension-requests)