---
title: useSubscription()
description: |-
  Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.

  > Note: > You generally shouldn’t need to use this directly, as there are dedicated hooks > for accessing the current value of each individual resource in the checkout.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/usesubscription()
  md: https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/apis/usesubscription().md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/checkout-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/api/checkout-ui-extensions/2026-04/upgrading-to-2026-04) to upgrade your extension.

# use​Subscription()

Subscribes to the special wrapper type that all “changeable” values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.

**Note:** \> You generally shouldn’t need to use this directly, as there are dedicated hooks \> for accessing the current value of each individual resource in the checkout.

## use​Subscription(**[subscription](#-propertydetail-subscription)**​)

### Parameters

* **subscription**

  **StatefulRemoteSubscribable\<Value>**

  **required**

### Returns

* **Value**

Examples

### Examples

* #### Subscribing to changes

  ##### React

  ```jsx
  import {
    reactExtension,
    Banner,
    useApi,
    useSubscription,
  } from '@shopify/ui-extensions-react/checkout';

  export default reactExtension(
    'purchase.checkout.block.render',
    () => <Extension />,
  );

  function Extension() {
    const {cost} = useApi();

    // Equivalent to the useTotalAmount() hook to subscribe and re-render your extension on changes
    const totalAmount = useSubscription(
      cost.totalAmount,
    );

    return <Banner>{totalAmount.amount}</Banner>;
  }
  ```

## Related

[Reference - Targets](https://shopify.dev/docs/api/checkout-ui-extensions/targets)

[Reference - Components](https://shopify.dev/docs/api/checkout-ui-extensions/components)

[Reference - Configuration](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)

[Learn - Tutorials](https://shopify.dev/apps/checkout)