--- title: Checkout Kit for Web description: >- Embed Shopify Checkout in your web application 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' --- ExpandOn this page * [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#requirements) * [Step 1: Add Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-1-add-checkout-kit) * [Step 2: Add the checkout element](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-2-add-the-checkout-element) * [Step 3: Present checkout](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-3-present-checkout) * [Step 4: Listen for events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-4-listen-for-events) * [Configuration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#configuration) * [Methods](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#methods) * [Authentication](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#authentication) # Checkout Kit for Web Early access Agentic commerce is rolling out to Dev Dashboard. [Sign up to be notified](https://docs.google.com/forms/d/e/1FAIpQLSe4DsRrfytH6CBrolSJdPKLyl-e-K2MEBDOjm-F-ZJpNy6Vtw/viewform). 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. *** ## What 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 *** ## Requirements * A valid Shopify checkout URL (from the [Storefront API](https://shopify.dev/docs/api/storefront) `cart.checkoutUrl` field or a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks)) * For authenticated checkouts: `client_id` and `client_secret` provided by Shopify *** ## Step 1: Add Checkout Kit Install the npm package for production applications, 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 ``` Info This CDN URL is for development and prototyping only. *** ## Step 2: Add the checkout element Add a `` element to your HTML. Use the checkout URL as the `href` for an anchor tag to provide a fallback if JavaScript is disabled: ## HTML ```html Checkout ``` *** ## Step 3: Present checkout To present checkout to the buyer, your application must specify a checkout URL. To get this URL, you can: * Use the [Storefront API](https://shopify.dev/docs/storefronts/headless/building-with-the-storefront-api/cart/manage#step-7-retrieve-a-checkout-url) to build a cart and load its checkout URL. * Get it from the [Catalog MCP server](https://shopify.dev/docs/agents/catalog/mcp) or [Catalog API](https://shopify.dev/docs/agents/catalog/catalog-api) product response (for agentic commerce). * Create a [cart permalink](https://shopify.dev/docs/apps/build/checkout/create-cart-permalinks). Set the `src` attribute to a checkout URL 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 `` component dispatches DOM events at key points in the checkout lifecycle. The following example listens 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 Configure the component using attributes. ### `src` **Required.** The checkout URL from the Storefront API or a cart permalink. ## HTML ```html ``` ### `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 inline embedding and configuration overrides. Required for inline mode. See [Authentication](#authentication) below. *** ## Methods 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`. *** ## Authentication 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. ### 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 have a 60-minute time-to-live (TTL) and can be cached 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(); } ``` *** * [What you'll learn](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#what-youll-learn) * [Requirements](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#requirements) * [Step 1: Add Checkout Kit](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-1-add-checkout-kit) * [Step 2: Add the checkout element](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-2-add-the-checkout-element) * [Step 3: Present checkout](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-3-present-checkout) * [Step 4: Listen for events](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#step-4-listen-for-events) * [Configuration](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#configuration) * [Methods](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#methods) * [Authentication](https://shopify.dev/docs/storefronts/mobile/checkout-kit/web.md#authentication)