---
title: Extension Points
description: >-
  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.
api_version: 2023-04
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/extension-points-overview
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2023-04/extension-points-overview.md
---

# 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 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](https://shopify.dev/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.

[API reference - Extension points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/static-extension-points.png)

## Dynamic extension points

Dynamic extension points render between core checkout features. Merchants can use the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor) to place the extension in any one of the [supported locations](https://shopify.dev/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.

[API reference - Extension points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/dynamic-extension-points.png)

## 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](https://shopify.dev/docs/api/checkout-ui-extensions).

Information

This is the first step in the checkout process where the buyer enters contact information and a delivery address.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Shipping

Point in checkout where the buyer selects a shipping method.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Payment

Point in checkout where the buyer enters their payment information.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Order summary

Summary of the cart contents, discounts, and order totals.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Shop Pay

Accelerated checkout where Shopify pre-fills buyer information using their Shop Pay account.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Local Pickup

Point in checkout where the buyer can select a store location to pick up their purchase.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Pickup Points

Point in checkout where the buyer can select a pickup point to have their purchase delivered to.

See [all extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

One-page checkout

`DEV PREVIEW`

All checkout pages (information, shipping, and payment) are combined into a single page with the order summary.

Get started testing extensions on [one-page checkout](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#one-page-checkout).

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-information.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-shipping.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-payment.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-order-summary.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-shop-pay.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-local-pickup.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-pickup-points.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-one-page-checkout.png)

## 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](https://shopify.dev/docs/apps/checkout/thank-you-order-status).

Order details

Displays all order information to buyers.

See [all thank you page extension points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Order summary

Summary of the cart contents, discounts, and order totals.

See [all thank you page extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-thank-you.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-order-summary-thank-you.png)

## 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](https://shopify.dev/docs/apps/checkout/thank-you-order-status).

Order details

Displays all order information to buyers.

See [all order status page extension points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

Order summary

Summary of the cart contents, discounts, and order totals.

See [all order status page extensions points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints).

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-order-status.png)

![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2023-04/supported-locations-order-summary-order-status.png)

## 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.

[API reference - Extension points](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensionpoints)

[API reference - Standard API](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi)

### Web platform globals

Checkout UI extensions always run in a [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). This environment has access to many of the same globals as you’d get with JavaScript running in a browser. However, we only guarantee the presence of the following globals:

* [`self`](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/self), a reference back to the global object.
* [`console`](https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/console), which is the same `console` available in the browser and can be used for printing to the browser’s console. Your app shouldn’t log any content when running in production.
* [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), [`clearTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout), [`setInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval), and [`clearInterval`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval), which behave the same as they do outside a web worker
* [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) and related globals ([`Headers`](https://developer.mozilla.org/en-US/docs/Web/API/Headers), [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request), and [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)), which can be used to make HTTPS requests to arbitrary endpoints. Any requests you make must explicitly support [cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Glossary/CORS), just as they would if the request were coming from `fetch()` outside of a web worker.

Caution

You must not rely on any other globals being available. Many will be explicitly overwritten to be `undefined` in the sandbox, and non-language globals that aren’t hidden and aren’t in the list above may also be overwritten at any time.

### JavaScript environment

The sandbox that loads your extension guarantees all of the globals available in [ECMAScript 2015 (ES2015)](http://www.ecma-international.org/ecma-262/6.0/). This includes `Set`, `Map`, `Promise`, `Symbol`, and more. You should rely on these globals directly when you need them, and you shouldn't use your own polyfill for any of these features. If you use globals added after ES2015, or new static methods on globals added after ES2015 (like `Object.entries`), then you must polyfill your usage of these features.

Your UI extension shouldn't ship any ES2015 (or newer) syntax, like [`class`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class), [`const/let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const), or [`for..of` loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of). This syntax isn't understood by some of the browsers that checkout supports. If you use these features in your source code, then make sure that they're compiled to ES5 syntax in your final JavaScript file.

The UI extension sandbox makes a `regeneratorRuntime` instance available globally. This object is provided by [regenerator-runtime](https://github.com/facebook/regenerator/tree/main/packages/runtime), and is used by many compilers to provide an ES5-compatible compilation target for [generator functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*) and [async/ await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await). If you use generators or async/ await, then make sure you compile it down to code that uses regenerator-runtime, and make sure you don't import your own version of that polyfill.

### Examples

* #### extend()

  ##### Default

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

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