Extension Points

A checkout UI extension will register for one or more extension points using `shopify.extend()`. An extension point in a UI extension is a plain JavaScript function. This function receives an API object for interacting with the application, and is expected to return a value in a specific shape. The input arguments and the output type are different for each extension point.

Static extension points

Static extension points

Static extension points render immediately before or after most core checkout features such as contact information, shipping methods, and order summary line items. Merchants use the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor) to activate and place the extension in the checkout experience. When a core checkout feature isn't rendered, neither are the static extension points tied to it. For example, shipping methods aren't shown when customers select the option for store pickup and the UI extensions that load before or after the shipping method aren't rendered. Choose static extension points when your content and functionality is closely related to a core checkout feature. An example is a shipping delay notice.

Dynamic extension points

Dynamic extension points

Dynamic extension points render between core checkout features. Merchants can use the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor) to place the extension in any one of the [supported locations](/docs/api/checkout-ui-extensions/extension-points-overview#supported-locations) for the dynamic extension point. When a checkout feature for that location is hidden, dynamic extensions are still rendered. For example, an extension placed above the shipping address will still render even for digital products which do not require a shipping address. Choose dynamic extension points when your content and functionality works independently of a core checkout feature. An example is a field to capture order notes from the customer.

Checkout locations

Checkout locations

Checkout is where buyers go to purchase goods. Checkout consists of the information, shipping, and payment steps in addition to the order summary and Shop Pay. Learn more about building [custom functionality for checkout](/docs/api/checkout-ui-extensions).

Thank you locations

Thank you locations

The thank you page is shown to buyers immediately after a checkout is successfully submitted. Learn more about building for [the thank you page](/docs/apps/checkout/thank-you-order-status).

Order status locations

Order status locations

The order status page is shown to buyers when they return to a completed checkout for order updates. Learn more about building for [the order status page](/docs/apps/checkout/thank-you-order-status).

Globals

Globals

The `checkout-ui-extensions` library provides an alias for `shopify.extend` in the form of the `extend()` export. This function is also strongly-typed. If you’re working in an editor that supports TypeScript’s language server (we recommend [VSCode](https://code.visualstudio.com)), then you get feedback about the input arguments to that extension point. For extensions that render UI, such as [`Checkout::Dynamic::Render`](#extension-points), the first argument is always a [`@remote-ui` `RemoteRoot` object](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core#remoteroot) that enables you to render UI components into your extension point in checkout. You don't need to explicitly call [`mount()`](https://github.com/Shopify/remote-dom/tree/remote-ui/packages/core#remoterootmount) on this object. After the callback that you registered for the extension point ends, or if it returns a `Promise` that resolves, your initial UI is rendered.

import {
  extend,
  Banner,
} from '@shopify/checkout-ui-extensions';

extend(
  'Checkout::Dynamic::Render',
  (root, api) => {
    root.appendChild(
      root.createComponent(
        Banner,
        {},
        `Extension version: ${api.extension.version}`,
      ),
    );
  },
);