Choose a version:

useExtensionApi()
React Hook

Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties.

For example, the purchase.checkout.cart-line-item.render-after extension target will return the CartLineDetailsApi object. Other targets may only have access to the StandardApi object, which contains a basic set of properties about the checkout.

For a full list of the API available to each extension target, see the ExtensionTargets type.

Caution

This is deprecated, use useApi instead.

Anchor to useExtensionApi
useExtensionApi()

Anchor to useExtensionApi-returnsReturns

UseExtensionApiGeneratedType

Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties. For example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout. For a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets). > Caution: This is deprecated, use `useApi` instead.

ApiForExtension<Target>

ApiForExtension<Target>

export function useExtensionApi<
  Target extends RenderExtensionTarget = RenderExtensionTarget,
>(): ApiForExtension<Target> {
  return useApi();
}

ApiForExtension

For a given extension target, returns the type of the API that the extension will receive at runtime.

ApiForExtension<Target>

Was this section helpful?

Accessing Properties

React

import {

reactExtension,

Text,

useExtensionApi,

} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(

'purchase.checkout.block.render',

() => <Extension />,

);

function Extension() {

const {shop} = useExtensionApi();

return <Text>Shop name: {shop.name}</Text>;

}

examples

Accessing Properties

description

The extension API is passed as a parameter to the extension target function. In React, you can access it from any component through the `useExtensionApi()` hook.

React

import {
  reactExtension,
  Text,
  useExtensionApi,
} from '@shopify/ui-extensions-react/checkout';

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

function Extension() {
  const {shop} = useExtensionApi();
  return <Text>Shop name: {shop.name}</Text>;
}