Skip to main content

Checkout Kit for Web

Early access

Agentic commerce is rolling out to Dev Dashboard. Sign up to be notified.

Integrate Shopify's checkout in your web application using Checkout Kit for Web. You can display checkout in a new tab, popup window, or embedded inline. The component preserves the merchant's branding, extensions, and payment settings.

Anchor to What you'll learnWhat you'll learn

  • Integrate Checkout Kit into your web application.
  • Present the checkout through a checkout URL or cart permalink.
  • Configure checkout behavior with attributes
  • Listen for checkout events

Anchor to RequirementsRequirements

  • A valid Shopify checkout URL (from the Storefront API cart.checkoutUrl field or a cart permalink)
  • For authenticated checkouts: 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 applications, 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 checkout URL as the href for an anchor tag to provide a fallback if JavaScript is disabled:

HTML

<shopify-checkout></shopify-checkout>

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

Anchor to Step 3: Present checkoutStep 3: Present checkout

To present checkout to the buyer, your application must specify a checkout URL. To get this URL, you can:

Set the src attribute to a checkout URL 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. The following example listens 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

Configure the component using attributes.

Anchor to [object Object]src

Required. The checkout URL from the Storefront API or a cart permalink.

HTML

<shopify-checkout src="https://yourshop.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 inline embedding and configuration overrides. Required for inline mode. See Authentication below.

Anchor to MethodsMethods

The component exposes the following 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 AuthenticationAuthentication

By default, the component opens in new tabs or popups without authentication. To embed inline or apply configuration overrides, you need to authenticate using a JWT.

Caution

Never expose your client_id or client_secret in client-side code. Token generation must occur server-side.

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 have a 60-minute time-to-live (TTL) and can be cached 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();
}
Was this page helpful?