---
title: Checkout Kit for Web
description: Embed Shopify checkout in your web app using the shopify-checkout web component.
source_url:
  html: https://shopify.dev/docs/storefronts/mobile/checkout-kit/web
  md: https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md
---

# Checkout Kit for Web

Embed Shopify checkout in your web app using Checkout Kit for Web. Display checkout in a new tab, popup window, or inline instead of redirecting buyers to a separate page. Checkout Kit for Web renders your store's branding, extensions, and payment settings.

Checkout Kit for Web supports checkout presentation, color scheme configuration, and lifecycle events. Features like preloading, accelerated checkouts, and privacy consent are available only in the native SDKs.

***

## What you'll learn

In this tutorial, you'll:

* Add Checkout Kit to your web app.
* Present checkout through a `checkoutUrl` or cart permalink.
* Configure checkout behavior with attributes.
* Listen for checkout events.

***

## Requirements

* A valid `checkoutUrl`. Get one from the [Storefront API](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage#step-7-retrieve-a-checkout-url) `cart.checkoutUrl` field, the [Catalog MCP server](https://shopify.dev/docs/agents/catalog/global-catalog) or [Catalog API](https://shopify.dev/docs/api/catalog-api) product response (for agentic commerce), or a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks).
* For authenticated checkouts, a `client_id` and `client_secret` provided by Shopify.

***

## Step 1: Add Checkout Kit

Install the npm package for production apps, or use the CDN for quick prototyping without build tools:

#### npm

Install the package and import the component:

```bash
npm install @shopify/checkout-kit
```

```javascript
import {Checkout} from '@shopify/checkout-kit';


customElements.define('shopify-checkout', Checkout);
```

#### CDN

Include the script directly in your HTML:

```html
<script
  type="module"
  src="https://cdn.shopify.com/shopifycloud/checkout-web/component/unstable/kit.js"
></script>
```

**Info:**

This CDN URL is for development and prototyping only.

***

## Step 2: Add the checkout element

Add a `<shopify-checkout>` element to your HTML. Use the `checkoutUrl` as the anchor's `href` so buyers can still reach checkout if the component fails to load:

## HTML

```html
<shopify-checkout></shopify-checkout>


<a id="checkout-button" target="_blank" href="https://{shop}.myshopify.com/cart/12345:1">
  Checkout
</a>
```

***

## Step 3: Present checkout

Set the `src` attribute to a `checkoutUrl` and call `open()`:

## JavaScript

```javascript
const checkout = document.querySelector("shopify-checkout");
const checkoutButton = document.querySelector("#checkout-button");


checkoutButton.addEventListener("click", (event) => {
  event.preventDefault();
  checkout.src = checkoutButton.href;
  checkout.open();
});
```

***

## Step 4: Listen for events

The `<shopify-checkout>` component dispatches DOM events at key points in the checkout lifecycle. Listen for the `checkout:complete` event:

## JavaScript

```javascript
const checkout = document.querySelector("shopify-checkout");


checkout.addEventListener("checkout:complete", (event) => {
  const { orderConfirmation } = event.target;
  console.log("Order completed:", orderConfirmation);
});


checkout.addEventListener("checkout:close", () => {
  console.log("Checkout closed");
});
```

***

## Configuration

The `<shopify-checkout>` element accepts these attributes:

### `src`

Required. The `checkoutUrl` from the Storefront API or a cart permalink.

## HTML

```html
<shopify-checkout src="https://{shop}.myshopify.com/cart/c/abc123"></shopify-checkout>
```

### `target`

Controls where the component renders:

* `auto` (default): Opens in a new tab.
* `popup`: Opens in a popup window.
* `inline`: Renders inline. Requires [authentication](#authentication).

## JavaScript

```javascript
const checkout = document.querySelector("shopify-checkout");


// Open in popup
checkout.setAttribute("target", "popup");
checkout.open();


// Or render inline (renders immediately, open() has no effect)
checkout.setAttribute("target", "inline");
```

### `auth`

The JWT for embedding checkout inline and overriding configuration. Required for inline mode. See [Authentication](#authentication) below.

***

## Methods

The component has three methods:

* `open()`: Presents the component. Has no effect when `target` is `inline`.
* `close()`: Closes the component. Has no effect when `target` is `inline`.
* `focus()`: Brings the component to the foreground. Has no effect when `target` is `inline`.

***

## Authenticate inline checkout

By default, the component opens in new tabs or popups without authentication. To embed checkout inline or override default settings, authenticate with a JWT.

**Caution:**

Never expose your `client_id` or `client_secret` in client-side code. Your server must generate the token.

### Generate a token

Create a secure server endpoint that generates tokens:

## curl

```bash
curl -X POST "https://api.shopify.com/auth/access_token" \
  -H "Content-Type: application/json" \
  -d '{
    "client_id": "{your_client_id}",
    "client_secret": "{your_client_secret}",
    "grant_type": "client_credentials"
  }'
```

Tokens expire after 60 minutes. You can cache them for that duration.

### Use the token

Fetch the token from your backend and pass it to the component's `auth` attribute:

## JavaScript

```javascript
async function presentAuthenticatedCheckout() {
  const auth = await fetch("/api/checkout/auth", {
    method: "POST",
    body: JSON.stringify({ cartId: cart.id }),
  }).then(res => res.text());


  const checkout = document.querySelector("shopify-checkout");
  checkout.src = checkoutUrl;
  checkout.auth = auth;
  checkout.open();
}
```

***

## Browser support and considerations

Checkout Kit for Web targets the latest two releases of:

* Desktop: Safari, Chrome, Firefox, Edge.
* Mobile: Mobile Safari, Chrome Mobile, Samsung Internet.

The component relies on custom HTML elements and JavaScript modules, which require a recent browser version. Older browsers fall back to the anchor tag's `href` and open checkout in a new tab.

### Content Security Policy and CORS

Inline checkout renders inside your page's origin. This has implications for your Content Security Policy (CSP) and cross-origin behavior:

* Allowlist `cdn.shopify.com` in your CSP `script-src` directive when loading the component from the CDN.
* The component fetches checkout from `*.myshopify.com` or your custom domain. Allowlist this origin in your CSP `frame-src` and `connect-src` directives.
* Inline mode relies on third-party cookies for the checkout origin. Some browsers might block these by default. Test inline mode in your target browsers before relying on it in production.

**Info:**

Detailed CSP and CORS guidance is in progress. While this page is in pre-release, test in your browser's developer console and watch for blocked requests or cookies.

***

## Next steps

[About accelerated checkouts\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

[Add Shop Pay and Apple Pay buttons for one-tap purchases on product and cart pages.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts-overview)

[Set up accelerated checkouts\
\
](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts)

[Install the package, configure Apple Pay, add buttons, and handle events.](https://shopify.dev/docs/storefronts/mobile/checkout-kit/accelerated-checkouts)

***