# @shopify/checkout-ui-extensions

> The API for UI Extensions that run in Shopify’s Checkout

Latest version **0.27.3** (published 2023-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @shopify/checkout-ui-extensions
pnpm add @shopify/checkout-ui-extensions
yarn add @shopify/checkout-ui-extensions
bun add @shopify/checkout-ui-extensions
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.27.3 |
| Published | 2023-08-16 |
| First published | 2021-06-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | blittle, shopify-admin, maryharte, crisfmb, pmoloney89, netlohan, st999999, justin-irl, megswim, wcandillon, jplhomer, nathanpjf, shopify-dep, goodforonefare, lemonmade, vsumner, wizardlyhel, antoine.grant, tsov, andyw8-shopify, henrytao, hannachen, vividviolet, bpscott |

## Links

- npm: https://www.npmjs.com/package/@shopify/checkout-ui-extensions
- npm.io page: https://npm.io/package/@shopify/checkout-ui-extensions

## Dependencies (2)

- [@remote-ui/core](https://npm.io/package/@remote-ui/core.md) 2.1.x
- [@remote-ui/async-subscription](https://npm.io/package/@remote-ui/async-subscription.md) ^2.1.14

## Recent versions

- 0.27.3 (latest) — 2023-08-16
- 0.11.1-alpha.0 (next) — 2021-06-29
- 0.27.2 — 2023-08-09
- 0.27.1 — 2023-07-18
- 0.27.0 — 2023-06-28
- 0.26.2 — 2023-05-16
- 0.26.1 — 2023-05-05
- 0.26.0 — 2023-04-26
- 0.25.1 — 2023-04-18
- 0.25.0 — 2023-04-03
- 0.24.0 — 2023-02-06
- 0.23.0 — 2023-01-25
- 0.22.0 — 2023-01-11
- 0.21.1 — 2022-12-09
- 0.21.0 — 2022-12-09
- … 18 more at https://npm.io/package/@shopify/checkout-ui-extensions/versions

## README

# `@shopify/checkout-ui-extensions`

This library contains type definitions and other utilities for writing UI extensions in Shopify’s checkout. However, nothing in this library is strictly required to write a UI extension. As a developer building a UI extension, you can forego the utilities this library provides entirely, and instead use the [global `shopify` API](documentation/globals.md) directly in a plain JavaScript file. The script below is a valid UI extension script without any additional processing:

```js
shopify.extend('Checkout::Dynamic::Render', (root, api) => {
  const button = root.createComponent('Button', {
    onPress() {
      console.log('Upsold!');
    },
  });

  button.appendChild('Buy now');

  root.appendChild(button);
});
```

Keeping in mind that any utility provided by this library is only a convenience API on top of the `shopify` global, the rest of the documentation for this library will show examples using JavaScript imports from the `@shopify/checkout-ui-extensions` library. Using JavaScript modules in this way requires a [build step](https://shopify.dev/apps/checkout/custom-fields/getting-started#step-2-preview-your-extension), but can provide useful developer experience features and opportunities for build-time performance optimizations.

## Getting started

Before you dig in to what this library has to offer, read through the [Checkout UI extensions overview](https://shopify.dev/api/checkout-extensions/checkout), and a getting started guide from one of the [checkout extension examples](https://shopify.dev/apps/checkout/custom-fields/getting-started).

## API

This package provides utilities, types, and documentation for the many different APIs a UI extension can access. Before you write your first extension, you should read through the following documentation in order:

- Details about [the globals available to UI extensions](documentation/globals.md)
- The list of [checkout extension points](documentation/extension-points.md)
- An explanation of how [extensions can render UI natively in checkout](documentation/rendering.md)
- The list of [components available to UI extensions](documentation/components.md)

Once you’ve read the documents above, you’re ready to write a checkout extension. If you’re wanting to learn even more, this repo has a few additional guides that cover techniques for writing larger, more complex extensions:

- Strategies for [unit testing extensions](documentation/testing.md)
- [`@shopify/checkout-ui-extensions-react`](../checkout-ui-extensions-react), which allows complex extensions to render using all the power of [React](https://reactjs.org)

---
_Source: https://npm.io/package/@shopify/checkout-ui-extensions · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._