Skip to main content

shopify-checkout
component

Caution

This is in Developer Preview and the API is subject to change.

Use the shopify-checkout component to embed Checkout on your website. When requested, the shopify-checkout component will open Checkout in a popup browser window over the current page or a new tab, and will provide events for key buyer actions that happen during the checkout process.

You can use the shopify-checkout component in two ways:

  1. If you are using the shopify-cart component, you can call the checkout() function on it. This will automatically open the checkout popup window using the checkout URL for the current store.

  2. If you need to use a custom checkout URL, you can use the shopify-checkout component directly. Create a shopify-checkout element, and set the src attribute to any valid checkout URL. This can be the cart.checkoutUrl field from the Storefront API, a cart permalink, or any other URL that would redirect to Checkout if loaded directly. Then, when you are ready to show checkout, call open() to present the checkout in a popup window over the current page. You can also set the target attribute to _blank to open the checkout in a new tab.

It is best practice to use the checkout URL as the href for an <a> element, and to progressively enhance clicks on this link into the src attribute and open() method call on shopify-checkout. This ensures that users can still navigate to Checkout, even if JavaScript is disabled or broken.

The shopify-checkout component does not render any content by default, and only opens a window when open() is called. As a result, there are no slots or other style customization options available.

Anchor to propertiesProperties

Anchor to src
src
string

The URL of the checkout to load. This will typically come from the cart.checkoutUrl field in Shopify’s Storefront API, but could also be a cart permalink or other valid checkout URL.

This property is automatically reflected to the src attribute, so you can use the src attribute or this property interchangeably.

Anchor to target
target
"auto" | "popup" | "_blank" | string

The mode in which to display the checkout when opened. Defaults to 'auto'.

  • 'popup' | 'auto': Opens checkout in a popup window (default)
  • '_blank': Opens checkout in a new tab
  • string: Opens checkout in a new named window

For more details on window targets, see the Window.open() target parameter

This property is automatically reflected to the target attribute, so you can use the target attribute or this property interchangeably.

Was this section helpful?

Anchor to methodsMethods

Anchor to close
close
() => void

Closes the checkout.

Anchor to open
open
() => void

Opens the checkout in a popup window by default, but can be configured to open in a new tab or named window using the target property.

Was this section helpful?

Anchor to eventsEvents

Anchor to close
close

Dispatched when the checkout overlay is closed, either due to user action or from calling the close() method.

Was this section helpful?

Example

HTML

<shopify-store
store-domain="https://your-store.myshopify.com"
>
</shopify-store>

<button onclick="getElementById('cart').checkout();">Checkout</button>

<shopify-checkout></shopify-checkout>
<shopify-cart id="cart"></shopify-cart>

Anchor to examplesExamples

Examples of various ways to use the component.

Anchor to example-advanced-exampleAdvanced Example

Advanced usage of shopify-checkout

Was this section helpful?

Advanced Example

HTML

<shopify-checkout></shopify-checkout>

<!-- A cart permalink for pre-populating a checkout -->
<a href="https://demostore.mock.shop/cart/43696905224214:1">
Checkout
</a>

<script>
document.querySelector("a").addEventListener("click", (event) => {
event.preventDefault();
const checkout = document.querySelector("shopify-checkout");
checkout.src = event.target.href;
checkout.open();
});
</script>