Choose a version:

Extension
API

The API for interacting with the metadata of an extension.

Anchor to standardapiStandardApi

The base API object provided to purchase, and customer-account.order-status extension targets.

Anchor to extension extension <Target> required: Meta information about the extension.

Docs_Standard_ExtensionMetaApi

extension
Meta information about the extension.
```
Extension<Target>
```

export interface Docs_Standard_ExtensionMetaApi
  extends Pick<StandardApi, 'extension'> {}

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
```
StatefulRemoteSubscribable<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
Whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
```
StatefulRemoteSubscribable<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
target
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * The API version that was set in the extension config file.
   *
   * @example '2023-04', '2023-07'
   */
  apiVersion: ApiVersion;

  /**
   * The allowed capabilities of the extension, defined
   * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file.
   *
   * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
   *
   * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
   *
   * * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
   *
   * * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
   */
  capabilities: StatefulRemoteSubscribable<Capability[]>;

  /**
   * Information about the editor where the extension is being rendered.
   *
   * The value is undefined if the extension is not rendering in an editor.
   */
  editor?: Editor;

  /**
   * Whether your extension is currently rendered to the screen.
   *
   * Shopify might render your extension before it's visible in the UI,
   * typically to pre-render extensions that will appear on a later step of the
   * checkout.
   *
   * Your extension might also continue to run after the buyer has navigated away
   * from where it was rendered. The extension continues running so that
   * your extension is immediately available to render if the buyer navigates back.
   */
  rendered: StatefulRemoteSubscribable<boolean>;

  /**
   * The URL to the script that started the extension target.
   */
  scriptUrl: string;

  /**
   * The identifier that specifies where in Shopify’s UI your code is being
   * injected. This will be one of the targets you have included in your
   * extension’s configuration file.
   *
   * @example 'purchase.checkout.block.render'
   * @see /docs/api/checkout-ui-extensions/2023-10/extension-targets-overview
   * @see /docs/apps/app-extensions/configuration#targets
   */
  target: Target;

  /**
   * The published version of the running extension target.
   *
   * For unpublished extensions, the value is `undefined`.
   *
   * @example 3.0.10
   */
  version?: string;
}

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | '2023-10' | 'unstable'

Capability

The capabilities an extension has access to. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

Was this section helpful?

Anchor to useExtension
useExtension()

Returns the metadata about the extension.

Anchor to useExtension-returnsReturns

Extension

apiVersion: The API version that was set in the extension config file.
capabilities StatefulRemoteSubscribable<[]>: The allowed capabilities of the extension, defined in your shopify.extension.toml file.

api_access: the extension can access the Storefront API.

network_access: the extension can make external network calls.

block_progress: the extension can block a buyer's progress and the merchant has allowed this blocking behavior.

collect_buyer_consent.sms_marketing: the extension can collect buyer consent for SMS marketing.
rendered StatefulRemoteSubscribable<boolean>: Whether your extension is currently rendered to the screen.

Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout.

Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
scriptUrl string: The URL to the script that started the extension target.
target Target: The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
editor: Information about the editor where the extension is being rendered.

The value is undefined if the extension is not rendering in an editor.
version string: The published version of the running extension target.

For unpublished extensions, the value is undefined.

UseExtensionGeneratedType

Returns the metadata about the extension.

Extension

Extension

export function useExtension(): Extension {
  return useApi().extension as Extension;
}

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
```
StatefulRemoteSubscribable<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
Whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
```
StatefulRemoteSubscribable<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
target
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * The API version that was set in the extension config file.
   *
   * @example '2023-04', '2023-07'
   */
  apiVersion: ApiVersion;

  /**
   * The allowed capabilities of the extension, defined
   * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file.
   *
   * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
   *
   * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
   *
   * * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
   *
   * * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
   */
  capabilities: StatefulRemoteSubscribable<Capability[]>;

  /**
   * Information about the editor where the extension is being rendered.
   *
   * The value is undefined if the extension is not rendering in an editor.
   */
  editor?: Editor;

  /**
   * Whether your extension is currently rendered to the screen.
   *
   * Shopify might render your extension before it's visible in the UI,
   * typically to pre-render extensions that will appear on a later step of the
   * checkout.
   *
   * Your extension might also continue to run after the buyer has navigated away
   * from where it was rendered. The extension continues running so that
   * your extension is immediately available to render if the buyer navigates back.
   */
  rendered: StatefulRemoteSubscribable<boolean>;

  /**
   * The URL to the script that started the extension target.
   */
  scriptUrl: string;

  /**
   * The identifier that specifies where in Shopify’s UI your code is being
   * injected. This will be one of the targets you have included in your
   * extension’s configuration file.
   *
   * @example 'purchase.checkout.block.render'
   * @see /docs/api/checkout-ui-extensions/2023-10/extension-targets-overview
   * @see /docs/apps/app-extensions/configuration#targets
   */
  target: Target;

  /**
   * The published version of the running extension target.
   *
   * For unpublished extensions, the value is `undefined`.
   *
   * @example 3.0.10
   */
  version?: string;
}

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | '2023-10' | 'unstable'

Capability

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

Was this section helpful?

Anchor to useExtensionData
useExtensionData()

Returns the metadata about the extension. This is deprecated, use useExtension() instead.

Anchor to useExtensionData-returnsReturns

Extension

apiVersion: The API version that was set in the extension config file.
capabilities StatefulRemoteSubscribable<[]>: The allowed capabilities of the extension, defined in your shopify.extension.toml file.

api_access: the extension can access the Storefront API.

network_access: the extension can make external network calls.

block_progress: the extension can block a buyer's progress and the merchant has allowed this blocking behavior.

collect_buyer_consent.sms_marketing: the extension can collect buyer consent for SMS marketing.
rendered StatefulRemoteSubscribable<boolean>: Whether your extension is currently rendered to the screen.

Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout.

Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
scriptUrl string: The URL to the script that started the extension target.
target Target: The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
editor: Information about the editor where the extension is being rendered.

The value is undefined if the extension is not rendering in an editor.
version string: The published version of the running extension target.

For unpublished extensions, the value is undefined.

UseExtensionDataGeneratedType

Returns the metadata about the extension. > Caution: This is deprecated, use `useExtension()` instead.

Extension

Extension

export function useExtensionData(): Extension {
  return useExtension();
}

Extension

Meta information about an extension target.

apiVersion
The API version that was set in the extension config file.
```
ApiVersion
```
capabilities
The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file. * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API. * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls. * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior. * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
```
StatefulRemoteSubscribable<Capability[]>
```
editor
Information about the editor where the extension is being rendered. The value is undefined if the extension is not rendering in an editor.
```
Editor
```
rendered
Whether your extension is currently rendered to the screen. Shopify might render your extension before it's visible in the UI, typically to pre-render extensions that will appear on a later step of the checkout. Your extension might also continue to run after the buyer has navigated away from where it was rendered. The extension continues running so that your extension is immediately available to render if the buyer navigates back.
```
StatefulRemoteSubscribable<boolean>
```
scriptUrl
The URL to the script that started the extension target.
```
string
```
target
The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the targets you have included in your extension’s configuration file.
```
Target
```
version
The published version of the running extension target. For unpublished extensions, the value is `undefined`.
```
string
```

export interface Extension<Target extends ExtensionTarget = ExtensionTarget> {
  /**
   * The API version that was set in the extension config file.
   *
   * @example '2023-04', '2023-07'
   */
  apiVersion: ApiVersion;

  /**
   * The allowed capabilities of the extension, defined
   * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/configuration) file.
   *
   * * [`api_access`](/docs/api/checkout-ui-extensions/configuration#api-access): the extension can access the Storefront API.
   *
   * * [`network_access`](/docs/api/checkout-ui-extensions/configuration#network-access): the extension can make external network calls.
   *
   * * [`block_progress`](/docs/api/checkout-ui-extensions/configuration#block-progress): the extension can block a buyer's progress and the merchant has allowed this blocking behavior.
   *
   * * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/configuration#collect-buyer-consent): the extension can collect buyer consent for SMS marketing.
   */
  capabilities: StatefulRemoteSubscribable<Capability[]>;

  /**
   * Information about the editor where the extension is being rendered.
   *
   * The value is undefined if the extension is not rendering in an editor.
   */
  editor?: Editor;

  /**
   * Whether your extension is currently rendered to the screen.
   *
   * Shopify might render your extension before it's visible in the UI,
   * typically to pre-render extensions that will appear on a later step of the
   * checkout.
   *
   * Your extension might also continue to run after the buyer has navigated away
   * from where it was rendered. The extension continues running so that
   * your extension is immediately available to render if the buyer navigates back.
   */
  rendered: StatefulRemoteSubscribable<boolean>;

  /**
   * The URL to the script that started the extension target.
   */
  scriptUrl: string;

  /**
   * The identifier that specifies where in Shopify’s UI your code is being
   * injected. This will be one of the targets you have included in your
   * extension’s configuration file.
   *
   * @example 'purchase.checkout.block.render'
   * @see /docs/api/checkout-ui-extensions/2023-10/extension-targets-overview
   * @see /docs/apps/app-extensions/configuration#targets
   */
  target: Target;

  /**
   * The published version of the running extension target.
   *
   * For unpublished extensions, the value is `undefined`.
   *
   * @example 3.0.10
   */
  version?: string;
}

ApiVersion

Union of supported API versions

'2023-04' | '2023-07' | '2023-10' | 'unstable'

Capability

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing'

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

Was this section helpful?

Anchor to useExtensionCapabilities
useExtensionCapabilities()

Returns a list of an extension's granted capabilities.

Anchor to useExtensionCapabilities-returnsReturns

[]

UseExtensionCapabilitiesGeneratedType

Returns a list of an extension's granted capabilities.

Capability[]

Capability[]

export function useExtensionCapabilities(): Capability[] {
  return useSubscription(useApi().extension.capabilities);
}

Capability

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing'

Was this section helpful?

Anchor to useExtensionCapability
useExtensionCapability(
capability
)

Returns whether or not a given capability of an extension is granted.

Anchor to useExtensionCapability-parametersParameters

Anchor to capability capability required

Anchor to useExtensionCapability-returnsReturns
boolean

UseExtensionCapabilityGeneratedType

Returns whether or not a given capability of an extension is granted.

capability
```
Capability
```

boolean

boolean

export function useExtensionCapability(capability: Capability): boolean {
  return useExtensionCapabilities().includes(capability);
}

Capability

'api_access' | 'network_access' | 'block_progress' | 'collect_buyer_consent.sms_marketing'

Was this section helpful?

Anchor to useExtensionEditor
useExtensionEditor()

Returns information about the editor where the extension is being rendered.

Anchor to useExtensionEditor-returnsReturns

| undefined

UseExtensionEditorGeneratedType

Returns information about the editor where the extension is being rendered.

Editor | undefined

Editor | undefined

export function useExtensionEditor(): Editor | undefined {
  return useApi().extension.editor;
}

Editor

type
Indicates whether the extension is rendering in the checkout editor.
```
"checkout"
```

export interface Editor {
  /**
   * Indicates whether the extension is rendering in the checkout editor.
   */
  type: 'checkout';
}

Was this section helpful?

Anchor to relatedRelated

ReferenceTargets

ReferenceComponents

ReferenceConfiguration

LearnTutorials

ExtensionAPI

Anchor to standardapiStandardApi

Docs_Standard_ExtensionMetaApi

Extension

ApiVersion

Capability

Editor

Anchor to useExtensionuseExtension()

Anchor to useExtension-returnsReturns

Extension

UseExtensionGeneratedType

Extension

ApiVersion

Capability

Editor

Anchor to useExtensionDatauseExtensionData()

Anchor to useExtensionData-returnsReturns

Extension

UseExtensionDataGeneratedType

Extension

ApiVersion

Capability

Editor

Anchor to useExtensionCapabilitiesuseExtensionCapabilities()

Anchor to useExtensionCapabilities-returnsReturns

UseExtensionCapabilitiesGeneratedType

Capability

Anchor to useExtensionCapabilityuseExtensionCapability(capability)

Anchor to useExtensionCapability-parametersParameters

Anchor to useExtensionCapability-returnsReturnsboolean

UseExtensionCapabilityGeneratedType

Capability

Anchor to useExtensionEditoruseExtensionEditor()

Anchor to useExtensionEditor-returnsReturns

UseExtensionEditorGeneratedType

Editor

Anchor to relatedRelated

Extension
API

Anchor to useExtension
useExtension()

Anchor to useExtensionData
useExtensionData()

Anchor to useExtensionCapabilities
useExtensionCapabilities()

Anchor to useExtensionCapability
useExtensionCapability(
capability
)

Anchor to useExtensionCapability-returnsReturns
boolean

Anchor to useExtensionEditor
useExtensionEditor()