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.

Anchor to What you'll learnWhat 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.

Anchor to RequirementsRequirements

A valid checkoutUrl. Get one from the Storefront API cart.checkoutUrl field, the Catalog MCP server or Catalog API product response (for agentic commerce), or a cart permalink.
For authenticated checkouts, a client_id and client_secret provided by Shopify.

Anchor to Step 1: Add Checkout KitStep 1: Add Checkout Kit

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

Install the package and import the component:

npm install @shopify/checkout-kit

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

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

Anchor to Step 2: Add the checkout elementStep 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

<shopify-checkout></shopify-checkout>

Checkout

</a>

Anchor to Step 3: Present checkoutStep 3: Present checkout

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

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();

});

Anchor to Step 4: Listen for eventsStep 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

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");

});

Anchor to ConfigurationConfiguration

The <shopify-checkout> element accepts these attributes:

Anchor to [object Object]`src`

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

HTML

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

Anchor to [object Object]`target`

Controls where the component renders:

auto (default): Opens in a new tab.
popup: Opens in a popup window.
inline: Renders inline. Requires authentication.

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");

Anchor to [object Object]`auth`

The JWT for embedding checkout inline and overriding configuration. Required for inline mode. See Authentication below.

Anchor to MethodsMethods

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.

Anchor to Authenticate inline checkoutAuthenticate 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.

Anchor to Generate a tokenGenerate a token

Create a secure server endpoint that generates tokens:

curl

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.

Anchor to Use the tokenUse the token

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

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();

}

Anchor to Browser support and considerationsBrowser 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.

Anchor to Content Security Policy and CORSContent 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.