Choose a version:

useSubscription()

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.

Anchor to useSubscription
useSubscription(
subscription
)

Anchor to useSubscription-parametersParameters

Anchor to subscription subscription StatefulRemoteSubscribable<Value> required

Anchor to useSubscription-returnsReturns

Value

Examples

React

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>;

}

Examples

Subscribing to changes

React

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>;
}