Choose a version:

useExtensionApi
hook

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

For example, the Checkout::CartLineDetails::RenderAfter extension point will return the CartLineDetailsApi object. Whereas others return the StandardApi object.

For reference, see ExtensionPoints to determine what API object will be returned by your extension point.

Anchor to useExtensionApi
useExtensionApi()

Anchor to useExtensionApi-returnsReturns

<ID>

ApiForRenderExtension

For a given rendering extension point, returns the type of the API that the extension will receive at runtime. This API type is the second argument to the callback for that extension point. The first callback for all of the rendering extension points each receive a `RemoteRoot` object.

ApiForRenderExtension<ID>

Was this section helpful?

Accessing Properties

React

import React from 'react';

import {

render,

Text,

useExtensionApi,

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

render('Checkout::Dynamic::Render', () => (

));

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 point function. In React, you can access it from any component through the `useExtensionApi()` hook.

React

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

render('Checkout::Dynamic::Render', () => (
  <Extension />
));

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