{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "src/checkout-web-component.ts", "declarations": [], "exports": [ { "kind": "custom-element-definition", "name": "shopify-checkout", "declaration": { "name": "ShopifyCheckout", "module": "/src/checkout" } } ] }, { "kind": "javascript-module", "path": "src/checkout.styles.ts", "declarations": [ { "kind": "variable", "name": "STYLES", "type": { "text": "SafeMarkup" }, "default": "css` * { box-sizing: border-box; } #shopify-element-wrapper, .Shopify-target { inline-size: 100%; block-size: 100%; border: none; } :host { @media (prefers-reduced-motion: reduce) { --shopify-checkout-overlay-transition-duration: 1ms; } /* * Reset any inheritable styles to ensure the text and links are visible by default no matter * what the embedding website's styles are. An embedder may override these values * using CSS parts. */ color: hsl(0, 0%, 10%); font-family: system-ui, sans-serif; font-size: initial; line-height: 1.5; letter-spacing: initial; font-weight: initial; font-style: initial; text-align: initial; word-spacing: initial; text-transform: initial; text-decoration: initial; text-indent: initial; /* checkout applies subpixel-antialiased */ -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: initial; text-rendering: initial; a, a:hover, a:visited, a:focus, a:active { color: inherit; } } .overlay { padding: 0; transition: display var(--shopify-checkout-dialog-transition-duration, 150ms) allow-discrete, overlay var(--shopify-checkout-dialog-transition-duration, 150ms) allow-discrete; } .overlay-background { opacity: 0; position: fixed; place-items: center; inset: 0; background-color: hsla(0, 0%, 0%, 0.8); transition: opacity var(--shopify-checkout-overlay-transition-duration, 150ms) ease-out, backdrop-filter var(--shopify-checkout-overlay-transition-duration, 150ms) ease-out, display var(--shopify-checkout-overlay-transition-duration, 150ms) allow-discrete, overlay var(--shopify-checkout-overlay-transition-duration, 150ms) allow-discrete; color: hsl(0, 0%, 100%); font-size: 1.125em; text-align: center; overflow: auto; } .overlay[open] .overlay-background { display: grid; opacity: 1; backdrop-filter: blur(6px); } @starting-style { .overlay[open] .overlay-background { opacity: 0; } } .overlay-content-wrapper { display: grid; grid-template-rows: 1fr 20%; place-items: center; inline-size: 100%; block-size: 100%; } .overlay-content { padding: 0.75em; max-inline-size: 21em; } .overlay-close-button { display: inline-flex; align-items: center; gap: 0.5em; background: transparent; border: none; padding: 0.625em; cursor: pointer; font-family: inherit; color: inherit; opacity: 0.8; text-decoration: underline; line-height: 0; &:hover { opacity: 1; } svg { inline-size: 1em; block-size: 1em; line-height: 0; fill: currentColor; } } `" } ], "exports": [ { "kind": "js", "name": "STYLES", "declaration": { "name": "STYLES", "module": "src/checkout.styles.ts" } } ] }, { "kind": "javascript-module", "path": "src/checkout.ts", "declarations": [ { "kind": "variable", "name": "DEFAULT_POPUP_WIDTH", "type": { "text": "number" }, "default": "600" }, { "kind": "variable", "name": "DEFAULT_POPUP_HEIGHT", "type": { "text": "number" }, "default": "600" }, { "kind": "variable", "name": "EMBED_PROTOCOL_VERSION", "type": { "text": "string" }, "default": "\"2026-04-08\"" }, { "kind": "variable", "name": "CK_VERSION", "type": { "text": "string" }, "default": "\"4.0.0\"" }, { "kind": "class", "description": "An element that renders a Shopify Checkout. Checkout opens in a popup or browser tab/window\n(see `target`). To use, create a `shopify-checkout` element, set the `src` attribute to the\ncheckout URL (typically retrieved from the `cart.checkoutUrl` field), and then call `open()`.", "name": "ShopifyCheckout", "members": [ { "kind": "field", "name": "#checkout", "privacy": "private", "type": { "text": "Checkout | undefined" } }, { "kind": "field", "name": "#error", "privacy": "private", "type": { "text": "UcpErrorResponse | undefined" } }, { "kind": "field", "name": "#checkoutWindow", "privacy": "private", "type": { "text": "WindowProxy | null" }, "default": "null" }, { "kind": "field", "name": "#currentOpen", "privacy": "private", "type": { "text": "{ controller: AbortController } | null" }, "default": "null" }, { "kind": "field", "name": "#checkoutProtocolController", "privacy": "private", "type": { "text": "{ controller: AbortController } | null" }, "default": "null" }, { "kind": "field", "name": "src", "type": { "text": "string" } }, { "kind": "method", "name": "#srcAsURL", "privacy": "private", "description": "Parses `src` as a URL, validates the scheme, and appends the `ec_*`\nquery parameters used for embedded checkout protocol negotiation.\nReturns `undefined` if `src` is unset, malformed, or uses a non-\n`https:` scheme." }, { "kind": "method", "name": "#expectedOrigin", "privacy": "private", "return": { "type": { "text": "string | undefined" } }, "description": "The origin we expect to receive postMessage events from. This is the\norigin of `src` after URL parsing and scheme validation. Returns\n`undefined` if `src` is unset or invalid, in which case all inbound\nmessages are dropped." }, { "kind": "field", "name": "debug", "type": { "text": "boolean" }, "description": "Whether the component should log diagnostic messages to the console." }, { "kind": "method", "name": "#debugWarn", "privacy": "private", "parameters": [ { "name": "message", "type": { "text": "string" } }, { "name": "args", "type": { "text": "unknown[]" } } ], "description": "Logs a warning to the console only when `debug` is enabled. Use this\nfor messages that are useful while integrating but noise once a\npartner has shipped (e.g., dropped messages, invalid `src`)." }, { "kind": "field", "name": "target", "type": { "text": "CheckoutTarget | string" } }, { "kind": "method", "name": "#setAttribute", "privacy": "private", "parameters": [ { "name": "name", "type": { "text": "string" } }, { "name": "value", "type": { "text": "string | boolean | undefined" } } ] }, { "kind": "field", "name": "checkout", "type": { "text": "Checkout | undefined" }, "description": "The latest UCP `Checkout` object received from the embedded checkout.\nPopulated and updated whenever a notification carrying a `checkout` field\nis received (e.g., `ec.start`, `ec.complete`, every `ec.*.change`).", "return": { "type": { "text": "" } }, "readonly": true }, { "kind": "field", "name": "error", "type": { "text": "UcpErrorResponse | undefined" }, "description": "Session-level fatal error received via `ec.error`.", "return": { "type": { "text": "" } }, "readonly": true }, { "kind": "field", "name": "#dialogElement", "privacy": "private", "type": { "text": "HTMLDialogElement | undefined" }, "readonly": true }, { "kind": "field", "name": "#dialogBackgroundElement", "privacy": "private", "type": { "text": "HTMLDivElement | undefined" }, "readonly": true }, { "kind": "field", "name": "#dialogCloseButtonElement", "privacy": "private", "type": { "text": "HTMLButtonElement | undefined" }, "readonly": true }, { "kind": "field", "name": "#dialogLinkElement", "privacy": "private", "type": { "text": "HTMLAnchorElement | undefined" }, "readonly": true }, { "kind": "field", "name": "#targetElement", "privacy": "private", "type": { "text": "HTMLDivElement | undefined" }, "readonly": true }, { "kind": "method", "name": "open", "return": { "type": { "text": "void" } }, "description": "Reveals checkout in the target." }, { "kind": "method", "name": "close", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focus", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "#updateOverlayLink", "privacy": "private", "description": "Sets the overlay link href to the validated, parametrised checkout\nURL (matching what the popup would open)" }, { "kind": "method", "name": "#applyTargetClass", "privacy": "private", "description": "Adds the `Shopify-target--` modifier class to the rendered\ntarget element" }, { "kind": "method", "name": "#removeTargetClass", "privacy": "private", "parameters": [ { "name": "value", "type": { "text": "string | null" } } ], "description": "Mirror of `#applyTargetClass` for removing a previous modifier." }, { "kind": "method", "name": "#getPopupFeatures", "privacy": "private" }, { "kind": "method", "name": "#isRespondableRequest", "privacy": "private", "return": { "type": { "text": "message is CheckoutProtocolMessage & { id: string }" } }, "parameters": [ { "name": "message", "type": { "text": "CheckoutProtocolMessage" } } ], "description": "JSON-RPC request messages carry an `id`; notifications do not." }, { "kind": "method", "name": "#initCheckoutProtocol", "privacy": "private" }, { "kind": "field", "name": "#handleMessage", "privacy": "private" }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:start\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:close\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:complete\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:error\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:lineItemsChange\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:buyerChange\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:totalsChange\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "\"checkout:messagesChange\"" } }, { "name": "listener", "type": { "text": "TypedEventListener | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] }, { "kind": "method", "name": "addEventListener", "return": { "type": { "text": "void" } }, "parameters": [ { "name": "type", "type": { "text": "string" } }, { "name": "listener", "type": { "text": "EventListenerOrEventListenerObject | null" } }, { "name": "options", "optional": true, "type": { "text": "boolean | AddEventListenerOptions" } } ] } ], "events": [ { "type": { "text": "ShopifyCheckoutCloseEvent" } }, { "description": "Dispatched when the checkout has started", "name": "checkout:start" }, { "description": "Dispatched when the checkout was successfully completed", "name": "checkout:complete" }, { "description": "Dispatched on a session-level fatal error", "name": "checkout:error" }, { "description": "Dispatched when cart line items change", "name": "checkout:lineItemsChange" }, { "description": "Dispatched when buyer information changes", "name": "checkout:buyerChange" }, { "description": "Dispatched when totals change", "name": "checkout:totalsChange" }, { "description": "Dispatched when checkout messages change", "name": "checkout:messagesChange" }, { "description": "Dispatched when the checkout overlay is closed (synthetic, not part of ECP)", "name": "checkout:close" } ], "attributes": [ { "description": "The URL of the checkout to load.", "name": "src" }, { "description": "Where the checkout is presented (auto, popup, new tab, or a named window).", "name": "target" } ], "superclass": { "name": "HTMLElement" }, "tagName": "shopify-checkout", "customElement": true }, { "kind": "class", "description": "", "name": "ShopifyCheckoutStartEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:start\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutCompleteEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:complete\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutCloseEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:close\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutErrorEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:error\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutLineItemsChangeEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:lineItemsChange\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutBuyerChangeEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:buyerChange\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutTotalsChangeEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:totalsChange\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } }, { "kind": "class", "description": "", "name": "ShopifyCheckoutMessagesChangeEvent", "members": [ { "kind": "field", "name": "type", "type": { "text": "\"checkout:messagesChange\"" } } ], "superclass": { "name": "CustomEvent", "module": "src/checkout.ts" } } ], "exports": [ { "kind": "js", "name": "DEFAULT_POPUP_WIDTH", "declaration": { "name": "DEFAULT_POPUP_WIDTH", "module": "src/checkout.ts" } }, { "kind": "js", "name": "DEFAULT_POPUP_HEIGHT", "declaration": { "name": "DEFAULT_POPUP_HEIGHT", "module": "src/checkout.ts" } }, { "kind": "js", "name": "EMBED_PROTOCOL_VERSION", "declaration": { "name": "EMBED_PROTOCOL_VERSION", "module": "src/checkout.ts" } }, { "kind": "js", "name": "CK_VERSION", "declaration": { "name": "CK_VERSION", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckout", "declaration": { "name": "ShopifyCheckout", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutStartEvent", "declaration": { "name": "ShopifyCheckoutStartEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutCompleteEvent", "declaration": { "name": "ShopifyCheckoutCompleteEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutCloseEvent", "declaration": { "name": "ShopifyCheckoutCloseEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutErrorEvent", "declaration": { "name": "ShopifyCheckoutErrorEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutLineItemsChangeEvent", "declaration": { "name": "ShopifyCheckoutLineItemsChangeEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutBuyerChangeEvent", "declaration": { "name": "ShopifyCheckoutBuyerChangeEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutTotalsChangeEvent", "declaration": { "name": "ShopifyCheckoutTotalsChangeEvent", "module": "src/checkout.ts" } }, { "kind": "js", "name": "ShopifyCheckoutMessagesChangeEvent", "declaration": { "name": "ShopifyCheckoutMessagesChangeEvent", "module": "src/checkout.ts" } } ] }, { "kind": "javascript-module", "path": "src/checkout.types.ts", "declarations": [], "exports": [ { "kind": "js", "name": "Buyer", "declaration": { "name": "Buyer", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "Checkout", "declaration": { "name": "Checkout", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "CheckoutLineItem", "declaration": { "name": "CheckoutLineItem", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "CheckoutMessage", "declaration": { "name": "CheckoutMessage", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "EcReadyParams", "declaration": { "name": "EcReadyParams", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "OrderConfirmation", "declaration": { "name": "OrderConfirmation", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "ShopCash", "declaration": { "name": "ShopCash", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "Total", "declaration": { "name": "Total", "module": "./ucp-embed-types" } }, { "kind": "js", "name": "UcpErrorResponse", "declaration": { "name": "UcpErrorResponse", "module": "./ucp-embed-types" } } ] }, { "kind": "javascript-module", "path": "src/index.ts", "declarations": [], "exports": [ { "kind": "js", "name": "ShopifyCheckout", "declaration": { "name": "ShopifyCheckout", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutStartEvent", "declaration": { "name": "ShopifyCheckoutStartEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutCompleteEvent", "declaration": { "name": "ShopifyCheckoutCompleteEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutCloseEvent", "declaration": { "name": "ShopifyCheckoutCloseEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutErrorEvent", "declaration": { "name": "ShopifyCheckoutErrorEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutLineItemsChangeEvent", "declaration": { "name": "ShopifyCheckoutLineItemsChangeEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutBuyerChangeEvent", "declaration": { "name": "ShopifyCheckoutBuyerChangeEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutTotalsChangeEvent", "declaration": { "name": "ShopifyCheckoutTotalsChangeEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutMessagesChangeEvent", "declaration": { "name": "ShopifyCheckoutMessagesChangeEvent", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutStartEventDetail", "declaration": { "name": "ShopifyCheckoutStartEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutCompleteEventDetail", "declaration": { "name": "ShopifyCheckoutCompleteEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutErrorEventDetail", "declaration": { "name": "ShopifyCheckoutErrorEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutLineItemsChangeEventDetail", "declaration": { "name": "ShopifyCheckoutLineItemsChangeEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutBuyerChangeEventDetail", "declaration": { "name": "ShopifyCheckoutBuyerChangeEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutTotalsChangeEventDetail", "declaration": { "name": "ShopifyCheckoutTotalsChangeEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "ShopifyCheckoutMessagesChangeEventDetail", "declaration": { "name": "ShopifyCheckoutMessagesChangeEventDetail", "module": "./checkout" } }, { "kind": "js", "name": "CheckoutTarget", "declaration": { "name": "CheckoutTarget", "module": "./checkout.types" } }, { "kind": "js", "name": "Buyer", "declaration": { "name": "Buyer", "module": "./checkout.types" } }, { "kind": "js", "name": "Checkout", "declaration": { "name": "Checkout", "module": "./checkout.types" } }, { "kind": "js", "name": "CheckoutLineItem", "declaration": { "name": "CheckoutLineItem", "module": "./checkout.types" } }, { "kind": "js", "name": "CheckoutMessage", "declaration": { "name": "CheckoutMessage", "module": "./checkout.types" } }, { "kind": "js", "name": "OrderConfirmation", "declaration": { "name": "OrderConfirmation", "module": "./checkout.types" } }, { "kind": "js", "name": "Total", "declaration": { "name": "Total", "module": "./checkout.types" } }, { "kind": "js", "name": "UcpErrorResponse", "declaration": { "name": "UcpErrorResponse", "module": "./checkout.types" } } ] }, { "kind": "javascript-module", "path": "src/ucp-embed-types.ts", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "src/utils.ts", "declarations": [ { "kind": "function", "name": "safe", "return": { "type": { "text": "SafeMarkup" } }, "parameters": [ { "name": "value", "type": { "text": "string" } } ], "description": "Use this to drop a plain string into an `html` or `css` template.\nReach for it sparingly: anything that came from an attribute,\nproperty, or message payload belongs outside the template, applied\nthrough DOM APIs after render." }, { "kind": "function", "name": "html", "return": { "type": { "text": "SafeMarkup" } }, "parameters": [ { "name": "strings", "type": { "text": "TemplateStringsArray" } }, { "name": "values", "type": { "text": "SafeMarkup[]" } } ], "description": "Tagged template literal that concatenates strings and `SafeMarkup`\nvalues into a `SafeMarkup` result. The `html` name is purely for\neditor syntax highlighting — it does NOT escape or sanitize. The\n`SafeMarkup` interpolation constraint at the type level prevents\naccidentally embedding a raw string without going through `safe()`." }, { "kind": "variable", "name": "css", "type": { "text": "typeof html" }, "default": "html", "description": "Same semantics as `html`; separate name for CSS editor highlighting." }, { "kind": "function", "name": "createTemplate", "return": { "type": { "text": "HTMLTemplateElement" } }, "parameters": [ { "name": "content", "type": { "text": "SafeMarkup" } } ], "description": "Parses a `SafeMarkup` string into an inert `