@maytes/checkout-button 1.0.0

package/dist/checkout-button.cjs

@@ -0,0 +1,806 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Maytes: () => Maytes,
+  MaytesError: () => MaytesError,
+  MaytesErrorCode: () => MaytesErrorCode,
+  SDK_VERSION: () => SDK_VERSION
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/foundation/brand.generated.ts
+var foundation = {
+  brand: {
+    primary: "#4A0324",
+    secondary: "#FE572A"
+  },
+  palette: {
+    burgundy: {
+      700: "#3B021D"
+    },
+    base: {
+      white: "#FFFFFF"
+    }
+  },
+  text: {
+    primaryInverse: "#FFFFFF"
+  }
+};
+
+// src/branding.ts
+var MAYTES_RICHE = foundation.brand.primary;
+var MAYTES_WALLET = foundation.brand.secondary;
+var SVG_NS = "http://www.w3.org/2000/svg";
+var MAYTES_LOGO_PATHS = [
+  "M392,6.11c-.3-1.61-1.72-2.79-3.38-2.79h-99.97c-1.66,0-3.09,1.19-3.38,2.79l-51.14,275.49c-.36,2.07,1.24,4.03,3.38,4.03h71.07c1.72,0,3.15-1.24,3.38-2.97l5.57-42.24c.23-1.72,1.66-2.97,3.38-2.97h32.45c1.72,0,3.15,1.24,3.38,2.97l5.57,42.24c.23,1.72,1.66,2.97,3.38,2.97h74.46c2.14,0,3.8-1.96,3.38-4.03L392,6.11ZM344.42,174.89h-14.59c-2.07,0-3.62-1.84-3.38-3.86l9.55-74.33c.06-.48.48-.83.95-.83s.89.35.95.83l9.91,74.33c.3,2.02-1.31,3.86-3.38,3.86h0Z",
+  "M218.86,3.32h-77.72c-1.48,0-2.85,1.01-3.27,2.44l-25.63,83.65c-.12.35-.41.6-.83.6s-.71-.23-.83-.6L84.9,5.76c-.41-1.42-1.78-2.44-3.27-2.44H3.44c-1.9,0-3.44,1.54-3.44,3.44v275.43c0,1.9,1.54,3.45,3.44,3.45h71.26c1.9,0,3.44-1.54,3.44-3.45v-77.3l-.83-51.44c0-.53.41-.95.95-.95.41,0,.77.3.89.71l14.42,59.62c.35,1.54,1.72,2.61,3.32,2.61h28.42c1.61,0,2.97-1.06,3.32-2.61l14.47-59.79c.12-.3.35-.53.71-.53.41,0,.71.3.71.71l-.42,51.67-.06.06v77.3c0,1.9,1.54,3.44,3.44,3.44h71.37c1.9,0,3.44-1.54,3.44-3.44V6.77c0-1.9-1.54-3.44-3.44-3.44h0Z",
+  "M1179.6,147c-9.73-11.8-20.71-21.12-47.76-38.44-27.06-16.91-31.69-23.26-31.69-31.68,0-6.76,3.8-11.39,10.56-11.39,8.19,0,14.18,10.44,15.43,26.28.18,2.14,2.13,3.74,4.27,3.26l63.66-14.12c1.6-.36,2.73-1.9,2.61-3.56-3.97-49.3-35-77.36-86.44-77.36-27.47,0-50.25,8.07-67.63,24.09-17.39,16.01-25.82,36.72-25.82,62.53,0,16.91,4.22,32.09,13.12,45.62,8.9,13.53,25.75,28.3,51.56,44.38,14.77,9.32,24.09,16.49,27.88,21.12,4.21,4.63,6.35,9.31,6.35,14.36,0,6.35-4.63,10.56-11.81,10.56-10.5,0-18.15-11.87-19.28-29.66-.12-2.25-2.31-3.91-4.51-3.26l-63.6,18.68c-1.55.42-2.55,1.84-2.43,3.44,1.78,22.84,11.03,41.41,26.88,55.65,16.49,14.36,36.77,21.53,64.24,21.53s50.32-7.59,67.64-23.26c17.74-15.66,26.64-36.37,26.64-61.28,0-22.01-6.35-40.58-19.87-57.49v-.02Z",
+  "M1002.33,3.32h-146.18c-1.9,0-3.44,1.54-3.44,3.44v275.49c0,1.9,1.54,3.44,3.44,3.44h146.18c1.9,0,3.44-1.54,3.44-3.44v-62.05c0-1.9-1.54-3.44-3.44-3.44h-63.3c-1.9,0-3.45-1.54-3.45-3.45v-34.58c0-1.9,1.54-3.44,3.45-3.44v.18h53.63c1.9,0,3.45-1.54,3.45-3.44v-57.84c0-1.9-1.55-3.44-3.45-3.44h-53.63c-1.9,0-3.45-1.54-3.45-3.44v-31.61c0-1.9,1.54-3.44,3.45-3.44h63.3c1.9,0,3.44-1.54,3.44-3.44V6.77c0-1.9-1.54-3.44-3.44-3.44Z",
+  "M840.22,6.77c0-1.9-1.54-3.44-3.44-3.44h-175.31c-1.9,0-3.45,1.54-3.45,3.44v62c0,1.9,1.54,3.44,3.45,3.44h41.77c1.9,0,3.44,1.54,3.44,3.44v206.62c0,1.9,1.54,3.45,3.44,3.45h78.14c1.9,0,3.45-1.54,3.45-3.45V75.7c0-1.9,1.54-3.44,3.45-3.44h41.77c1.9,0,3.44-1.54,3.44-3.44h-.12V6.77h-.02Z",
+  "M607.71,3.38l-.06-.06c-23.23,0-32.59,48.08-40.22,80.25-1.38,5.82-4.74,18.31-7.75,27.31-4.44,13.26-10.68,30.43-22.21,31.93-18.85,2.47-7.14-39.43-7.14-39.43l21.67-92.98c.84-3.6-1.92-7.02-5.58-7.02h-85.49c-3.12,0-5.64,2.46-5.71,5.64l-1.68,75.09c-.48,21.25,5.64,42.31,18.37,59.37,12.72,17.05,38.81,28,63.12,25.9,52.48-7.08,65.46-70.49,68.4-71.1,3.06-.64,2.56,9.3.84,22.15-2.2,16.42-8.46,32.1-18.52,45.27-5.3,6.95-11.13,12.9-16.55,16.37-32.96,22.51-95.69,9.48-122.4-2.7-3.66-1.68-7.75,1.02-7.75,5.04l16.39,83.98c0,.84.18,1.68.54,2.4,9.48,17.83,53.31,19.33,74.43,17.77,32.18-2.04,100.37-29.35,115.32-122.33,12.17-103.08-1.14-162.91-38.06-162.84l.02-.02Z"
+];
+function buildMaytesLogo(height, color) {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("xmlns", SVG_NS);
+  svg.setAttribute("viewBox", "0 0 1199.47 289.04");
+  svg.style.height = height;
+  svg.style.width = "auto";
+  svg.style.color = color;
+  for (const d of MAYTES_LOGO_PATHS) {
+    const path = document.createElementNS(SVG_NS, "path");
+    path.setAttribute("fill", "currentColor");
+    path.setAttribute("d", d);
+    svg.appendChild(path);
+  }
+  return svg;
+}
+
+// src/errors.ts
+var MaytesErrorCode = {
+  Config: "CONFIG"
+};
+var MaytesError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "MaytesError";
+  }
+};
+
+// src/overlay.ts
+var TITLE_ID = "maytes-overlay-title";
+var STYLE_MARKER = "data-maytes-checkout-button-overlay-styles";
+var NATIVE_BACKDROP_FALLBACK = "rgba(0, 0, 0, 0.6)";
+function tryReadTopDocument() {
+  if (window.top === null || window.top === window) return null;
+  try {
+    const topDoc = window.top.document;
+    return topDoc.body !== null ? topDoc : null;
+  } catch (err) {
+    if (!(err instanceof DOMException && err.name === "SecurityError")) {
+      console.warn("[maytes/checkout-button] unexpected error resolving overlay host", err);
+    }
+    return null;
+  }
+}
+function resolveOverlayHost() {
+  return tryReadTopDocument() ?? document;
+}
+function ensureOverlayStylesInTopDocument(host) {
+  if (host === document) return;
+  if (host.querySelector(`style[${STYLE_MARKER}]`) !== null) return;
+  const localStyle = document.head.querySelector("style[data-maytes-checkout-button]");
+  if (localStyle === null) return;
+  const copy = host.createElement("style");
+  copy.setAttribute(STYLE_MARKER, "");
+  const nonce = localStyle.getAttribute("nonce");
+  if (nonce !== null) copy.setAttribute("nonce", nonce);
+  copy.textContent = localStyle.textContent ?? "";
+  host.head.appendChild(copy);
+}
+function buildOverlay(host, state) {
+  const dialog = host.createElement("dialog");
+  dialog.className = "maytes-checkout-overlay";
+  dialog.setAttribute("aria-labelledby", TITLE_ID);
+  dialog.setAttribute("data-maytes-overlay", "");
+  const content = host.createElement("div");
+  content.className = "maytes-checkout-overlay__content";
+  const logoDiv = host.createElement("div");
+  logoDiv.setAttribute("aria-hidden", "true");
+  logoDiv.appendChild(buildMaytesLogo("2.5rem", MAYTES_WALLET));
+  content.appendChild(logoDiv);
+  const spinner = host.createElement("div");
+  spinner.className = "maytes-checkout-overlay__spinner";
+  spinner.setAttribute("role", "status");
+  spinner.setAttribute("aria-live", "polite");
+  spinner.setAttribute("aria-label", "Checkout in progress");
+  content.appendChild(spinner);
+  const text = host.createElement("p");
+  text.id = TITLE_ID;
+  text.className = "maytes-checkout-overlay__text";
+  text.textContent = "Completing checkout with Maytes\u2026";
+  content.appendChild(text);
+  const link = host.createElement("button");
+  link.className = "maytes-checkout-overlay__link";
+  link.type = "button";
+  link.textContent = "Return to Maytes";
+  link.addEventListener("click", () => {
+    if (state.popupWindow !== null && !state.popupWindow.closed) {
+      try {
+        state.popupWindow.focus();
+      } catch (err) {
+        if (!(err instanceof DOMException && err.name === "SecurityError")) throw err;
+      }
+    }
+  });
+  content.appendChild(link);
+  dialog.appendChild(content);
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    if (state.popupWindow !== null && !state.popupWindow.closed) state.popupWindow.close();
+    hideOverlay(state);
+  });
+  return dialog;
+}
+function applyNativeBackdropFallback(dialog) {
+  dialog.style.background = NATIVE_BACKDROP_FALLBACK;
+}
+function showOverlay(state) {
+  if (state.overlayEl !== null) return;
+  const host = resolveOverlayHost();
+  ensureOverlayStylesInTopDocument(host);
+  const dialog = buildOverlay(host, state);
+  state.overlayEl = dialog;
+  host.body.appendChild(dialog);
+  if (typeof dialog.showModal === "function") {
+    try {
+      dialog.showModal();
+    } catch (err) {
+      console.warn("[maytes/checkout-button] dialog.showModal failed; falling back to inline backdrop", err);
+      dialog.setAttribute("open", "");
+      applyNativeBackdropFallback(dialog);
+    }
+  } else {
+    dialog.setAttribute("open", "");
+    applyNativeBackdropFallback(dialog);
+  }
+}
+function hideOverlay(state) {
+  if (state.overlayEl === null) return;
+  const dialog = state.overlayEl;
+  const host = dialog.ownerDocument;
+  if (typeof dialog.close === "function" && dialog.open) dialog.close();
+  dialog.remove();
+  if (host !== document) {
+    host.head.querySelector(`style[${STYLE_MARKER}]`)?.remove();
+  }
+  state.overlayEl = null;
+}
+
+// src/env.ts
+var ENVIRONMENT_BASE_URLS = {
+  staging: "https://staging-checkout.maytes.co",
+  sandbox: "https://sandbox-checkout.maytes.co",
+  production: "https://checkout.maytes.co"
+};
+function isValidEnvironment(value) {
+  return value === "sandbox" || value === "production" || value === "staging";
+}
+function resolveBaseUrl(environment, override) {
+  if (override !== void 0) return override;
+  const url = ENVIRONMENT_BASE_URLS[environment];
+  if (url === void 0) {
+    throw new MaytesError(MaytesErrorCode.Config, `Unknown environment: ${String(environment)}`);
+  }
+  return url;
+}
+
+// src/redirect.ts
+function isHttpUrl(value) {
+  let parsed;
+  try {
+    parsed = new URL(value);
+  } catch {
+    return false;
+  }
+  return parsed.protocol === "https:" || parsed.protocol === "http:";
+}
+function normalizeBaseUrl(rawBaseUrl) {
+  const candidate = rawBaseUrl.trim().replace(/\/+$/, "");
+  let parsed;
+  try {
+    parsed = new URL(candidate);
+  } catch {
+    throw new MaytesError(MaytesErrorCode.Config, `baseUrl is not a valid URL: ${candidate}`);
+  }
+  if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      `baseUrl must use http or https; got ${parsed.protocol}`
+    );
+  }
+  return candidate;
+}
+function requireCheckoutId(id) {
+  if (typeof id !== "string" || id.trim().length === 0) {
+    throw new MaytesError(MaytesErrorCode.Config, "checkoutId is required (non-empty string)");
+  }
+  return id.trim();
+}
+function buildCheckoutUrl(environment, baseUrlOverride, checkoutId) {
+  const id = requireCheckoutId(checkoutId);
+  const base = normalizeBaseUrl(resolveBaseUrl(environment, baseUrlOverride));
+  return `${base}/?id=${encodeURIComponent(id)}`;
+}
+function performRedirect(url, replace) {
+  if (typeof window === "undefined") {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      "redirectToCheckout requires a browser context (window is undefined)"
+    );
+  }
+  if (replace) {
+    window.location.replace(url);
+  } else {
+    window.location.href = url;
+  }
+}
+function makeRedirect(environment, baseUrlOverride) {
+  return {
+    checkoutUrl(opts) {
+      return buildCheckoutUrl(environment, baseUrlOverride, opts.checkoutId);
+    },
+    redirectToCheckout(opts) {
+      const url = buildCheckoutUrl(environment, baseUrlOverride, opts.checkoutId);
+      performRedirect(url, opts.replace === true);
+    }
+  };
+}
+
+// src/version.ts
+var SDK_VERSION = "1.0.0";
+
+// src/styles.ts
+var STYLE_ATTR = "data-maytes-checkout-button";
+var STYLE_SELECTOR = `style[${STYLE_ATTR}="${SDK_VERSION}"]`;
+var REFCOUNT_KEY = `__maytes_checkout_button_styles_refs_${SDK_VERSION}__`;
+var FOCUS_RING = "#6b8aff";
+var BUTTON_CSS = `
+.maytes-checkout-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.57em;
+  padding: 0.71em 1.29em;
+  border: none;
+  border-radius: 999px;
+  background: ${foundation.brand.primary};
+  color: ${foundation.text.primaryInverse};
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  font-size: var(--maytes-button-font-size, 14px);
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 120ms ease, opacity 120ms ease;
+}
+.maytes-checkout-button:hover { background: ${foundation.palette.burgundy[700]}; }
+.maytes-checkout-button:focus-visible {
+  outline: 2px solid ${FOCUS_RING};
+  outline-offset: 2px;
+}
+.maytes-checkout-button[aria-disabled='true'] {
+  cursor: progress;
+  opacity: 0.7;
+}
+.maytes-checkout-button--block {
+  display: flex;
+  width: 100%;
+}
+.maytes-checkout-button__logo { height: 1em; width: auto; flex: none; }
+.maytes-checkout-button__spinner {
+  height: 1em;
+  width: 1em;
+  border-radius: 50%;
+  border: 0.14em solid currentColor;
+  border-right-color: transparent;
+  animation: maytes-checkout-button-spin 0.7s linear infinite;
+}
+@keyframes maytes-checkout-button-spin {
+  to { transform: rotate(360deg); }
+}
+.maytes-checkout-overlay {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  z-index: 2147483646;
+  font: 500 15px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+.maytes-checkout-overlay[open] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.maytes-checkout-overlay::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+.maytes-checkout-overlay__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+}
+.maytes-checkout-overlay__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-top-color: ${foundation.brand.secondary};
+  border-radius: 50%;
+  animation: maytes-checkout-button-spin 0.8s linear infinite;
+}
+.maytes-checkout-overlay__text {
+  color: ${foundation.text.primaryInverse};
+  font-size: 1.125rem;
+  font-weight: 500;
+  margin: 0;
+}
+.maytes-checkout-overlay__link {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.875rem;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  transition: color 0.15s;
+}
+.maytes-checkout-overlay__link:hover { color: ${foundation.text.primaryInverse}; }
+@media (prefers-reduced-motion: reduce) {
+  .maytes-checkout-overlay__spinner,
+  .maytes-checkout-button__spinner { animation: none; }
+}
+`;
+var POPUP_LOADING_CSS = `
+:root { color-scheme: light; }
+html, body { margin: 0; height: 100%; }
+body.maytes-popup-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: ${foundation.brand.primary};
+  color: ${foundation.text.primaryInverse};
+  font: 500 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
+.maytes-popup-loading__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+}
+.maytes-popup-loading__logo { height: 2.75rem; width: auto; }
+.maytes-popup-loading__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid rgba(255, 255, 255, 0.25);
+  border-top-color: ${foundation.brand.secondary};
+  border-radius: 50%;
+  animation: maytes-checkout-button-spin 0.8s linear infinite;
+}
+@keyframes maytes-checkout-button-spin {
+  to { transform: rotate(360deg); }
+}
+.maytes-popup-loading__text { margin: 0; font-size: 1.05rem; font-weight: 500; }
+.maytes-popup-loading__slow {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.75);
+  max-width: 22rem;
+}
+.maytes-popup-loading__slow[hidden] { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  .maytes-popup-loading__spinner { animation: none; }
+}
+`;
+function getRefCount() {
+  const w = window;
+  return w[REFCOUNT_KEY] ?? 0;
+}
+function setRefCount(value) {
+  const w = window;
+  w[REFCOUNT_KEY] = value;
+}
+function ensureStylesInjected(cspNonce) {
+  const next = getRefCount() + 1;
+  setRefCount(next);
+  if (document.head.querySelector(STYLE_SELECTOR) !== null) return;
+  const el = document.createElement("style");
+  el.setAttribute(STYLE_ATTR, SDK_VERSION);
+  if (cspNonce !== void 0 && cspNonce !== "") el.setAttribute("nonce", cspNonce);
+  el.textContent = BUTTON_CSS;
+  document.head.appendChild(el);
+}
+function releaseStyles() {
+  const next = Math.max(0, getRefCount() - 1);
+  setRefCount(next);
+  if (next > 0) return;
+  const el = document.head.querySelector(STYLE_SELECTOR);
+  if (el !== null) el.remove();
+}
+
+// src/button.ts
+var POPUP_WIDTH = 500;
+var POPUP_HEIGHT = 800;
+var POPUP_POLL_INTERVAL_MS = 500;
+var MOBILE_MAX_WIDTH = 600;
+var SLOW_NETWORK_DELAY_MS = 8e3;
+function buildLogo() {
+  const svg = buildMaytesLogo("1em", "currentColor");
+  svg.setAttribute("class", "maytes-checkout-button__logo");
+  svg.setAttribute("aria-hidden", "true");
+  return svg;
+}
+function buildSpinner() {
+  const spinner = document.createElement("span");
+  spinner.className = "maytes-checkout-button__spinner";
+  spinner.setAttribute("aria-hidden", "true");
+  return spinner;
+}
+function isValidCheckoutResult(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const obj = value;
+  if (typeof obj.checkoutId !== "string" || obj.checkoutId.trim().length === 0) return false;
+  if (obj.checkoutUrl !== void 0) {
+    if (typeof obj.checkoutUrl !== "string" || obj.checkoutUrl.trim().length === 0) return false;
+    if (!isHttpUrl(obj.checkoutUrl)) return false;
+  }
+  return true;
+}
+function isSecurityError(err) {
+  return err instanceof DOMException && err.name === "SecurityError";
+}
+function refocusPopup(popup) {
+  try {
+    popup.focus();
+  } catch (err) {
+    if (!isSecurityError(err)) throw err;
+  }
+}
+function closePopupWindow(popup) {
+  if (popup === null) return;
+  try {
+    if (!popup.closed) popup.close();
+  } catch (err) {
+    if (!isSecurityError(err)) throw err;
+  }
+}
+function popupFeatures() {
+  const screenWidth = window.screen?.width ?? POPUP_WIDTH;
+  const screenHeight = window.screen?.height ?? POPUP_HEIGHT;
+  const left = Math.max(0, Math.round((screenWidth - POPUP_WIDTH) / 2));
+  const top = Math.max(0, Math.round((screenHeight - POPUP_HEIGHT) / 2));
+  return `popup=yes,width=${POPUP_WIDTH},height=${POPUP_HEIGHT},left=${left},top=${top},resizable=yes,scrollbars=yes`;
+}
+function stopPopupPoll(state) {
+  if (state.popupPollHandle !== null) {
+    clearInterval(state.popupPollHandle);
+    state.popupPollHandle = null;
+  }
+}
+function startPopupPoll(state, onClose) {
+  stopPopupPoll(state);
+  state.popupPollHandle = setInterval(() => {
+    const popup = state.popupWindow;
+    if (popup === null || popup.closed) {
+      stopPopupPoll(state);
+      state.popupWindow = null;
+      onClose();
+    }
+  }, POPUP_POLL_INTERVAL_MS);
+}
+function isMobileViewport() {
+  return window.innerWidth <= MOBILE_MAX_WIDTH;
+}
+function openBlankPopup(state) {
+  return window.open("about:blank", state.popupName, popupFeatures());
+}
+function navigatePopup(popup, url) {
+  popup.location.replace(url);
+}
+function removePopupChildren(doc) {
+  while (doc.body.firstChild !== null) doc.body.removeChild(doc.body.firstChild);
+}
+function paintPopupLoadingScreen(popup, cspNonce) {
+  const doc = popup.document;
+  if (doc === null || doc.head === null || doc.body === null) return;
+  doc.title = "Maytes checkout";
+  doc.documentElement.lang = "en";
+  const style = doc.createElement("style");
+  if (cspNonce !== void 0 && cspNonce !== "") style.setAttribute("nonce", cspNonce);
+  style.textContent = POPUP_LOADING_CSS;
+  doc.head.appendChild(style);
+  doc.body.classList.add("maytes-popup-loading");
+  removePopupChildren(doc);
+  const content = doc.createElement("main");
+  content.className = "maytes-popup-loading__content";
+  content.setAttribute("role", "status");
+  content.setAttribute("aria-live", "polite");
+  const logo = buildMaytesLogo("2.75rem", foundation.text.primaryInverse);
+  logo.setAttribute("class", "maytes-popup-loading__logo");
+  logo.setAttribute("aria-hidden", "true");
+  content.appendChild(logo);
+  const spinner = doc.createElement("div");
+  spinner.className = "maytes-popup-loading__spinner";
+  spinner.setAttribute("aria-hidden", "true");
+  content.appendChild(spinner);
+  const text = doc.createElement("p");
+  text.className = "maytes-popup-loading__text";
+  text.textContent = "Completing checkout with Maytes\u2026";
+  content.appendChild(text);
+  const slow = doc.createElement("p");
+  slow.className = "maytes-popup-loading__slow";
+  slow.hidden = true;
+  slow.textContent = "Still connecting. This can take a moment on slow networks.";
+  content.appendChild(slow);
+  doc.body.appendChild(content);
+  setTimeout(() => {
+    slow.hidden = false;
+  }, SLOW_NETWORK_DELAY_MS);
+}
+function renderButton(state, container, options = {}) {
+  if (state.destroyed) {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      "renderButton() called on a destroyed Maytes instance"
+    );
+  }
+  if (!(container instanceof HTMLElement)) {
+    throw new MaytesError(MaytesErrorCode.Config, "renderButton(container) requires an HTMLElement");
+  }
+  ensureStylesInjected(state.config.cspNonce);
+  const label = options.label ?? "Split with";
+  const block = options.block === true;
+  const mode = options.mode ?? "redirect";
+  if (mode !== "redirect" && mode !== "popup") {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      "renderButton({ mode }) must be 'redirect' or 'popup'"
+    );
+  }
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = block ? "maytes-checkout-button maytes-checkout-button--block" : "maytes-checkout-button";
+  button.setAttribute("aria-label", `${label} Maytes`);
+  const labelNode = document.createTextNode(`${label} `);
+  const logo = buildLogo();
+  button.appendChild(labelNode);
+  button.appendChild(logo);
+  const setBusy = (busy) => {
+    state.busy = busy;
+    if (busy) {
+      button.setAttribute("aria-disabled", "true");
+      button.setAttribute("aria-busy", "true");
+      logo.replaceWith(buildSpinner());
+    } else {
+      button.removeAttribute("aria-disabled");
+      button.removeAttribute("aria-busy");
+      const currentIndicator = button.querySelector(".maytes-checkout-button__spinner, .maytes-checkout-button__logo");
+      if (currentIndicator !== null) currentIndicator.replaceWith(buildLogo());
+    }
+  };
+  const teardownActiveCheckout = () => {
+    hideOverlay(state);
+    setBusy(false);
+  };
+  const onPopupClosed = () => {
+    teardownActiveCheckout();
+    document.dispatchEvent(new CustomEvent("maytes:checkout-closed"));
+  };
+  const dispatchFailed = (reason, cause) => {
+    document.dispatchEvent(new CustomEvent("maytes:checkout-failed", {
+      detail: cause === void 0 ? { reason } : { reason, cause }
+    }));
+  };
+  const dispatchRedirected = (url) => {
+    document.dispatchEvent(new CustomEvent("maytes:checkout-redirected", { detail: { url } }));
+  };
+  const redirectSameWindow = (url) => {
+    teardownActiveCheckout();
+    dispatchRedirected(url);
+    window.location.href = url;
+  };
+  const closeOrphanPopup = (popup) => {
+    closePopupWindow(popup);
+    stopPopupPoll(state);
+    if (state.popupWindow === popup) state.popupWindow = null;
+    teardownActiveCheckout();
+  };
+  const handleClick = async () => {
+    if (state.busy || state.destroyed) return;
+    setBusy(true);
+    const shouldUsePopup = mode === "popup" && !isMobileViewport();
+    const popup = shouldUsePopup ? openBlankPopup(state) : null;
+    if (popup !== null) {
+      state.popupWindow = popup;
+      refocusPopup(popup);
+      paintPopupLoadingScreen(popup, state.config.cspNonce);
+      showOverlay(state);
+      document.dispatchEvent(new CustomEvent("maytes:checkout-opened"));
+      startPopupPoll(state, onPopupClosed);
+    }
+    try {
+      const result = await state.config.createCheckout();
+      if (state.destroyed || popup !== null && popup.closed) {
+        closePopupWindow(popup);
+        return;
+      }
+      if (!isValidCheckoutResult(result)) {
+        closeOrphanPopup(popup);
+        const shapeError = new MaytesError(
+          MaytesErrorCode.Config,
+          "createCheckout must resolve to { checkoutId: string, checkoutUrl?: http(s) URL }"
+        );
+        console.error(shapeError);
+        dispatchFailed("invalid-shape", shapeError);
+        return;
+      }
+      const url = result.checkoutUrl ?? buildCheckoutUrl(
+        state.config.environment,
+        state.config.baseUrl,
+        result.checkoutId
+      );
+      if (popup !== null) {
+        navigatePopup(popup, url);
+      } else {
+        if (shouldUsePopup) {
+          console.warn("[maytes/checkout-button] popup was blocked; falling back to same-window redirect");
+        }
+        redirectSameWindow(url);
+      }
+    } catch (err) {
+      if (popup !== null && popup.closed) return;
+      closeOrphanPopup(popup);
+      console.error("[maytes/checkout-button] createCheckout failed:", err);
+      dispatchFailed("create-checkout-rejected", err);
+    }
+  };
+  button.addEventListener("click", handleClick);
+  container.appendChild(button);
+  let cleaned = false;
+  const teardown = () => {
+    if (cleaned) return;
+    cleaned = true;
+    button.removeEventListener("click", handleClick);
+    button.remove();
+    state.teardowns.delete(teardown);
+    releaseStyles();
+  };
+  state.teardowns.add(teardown);
+  return teardown;
+}
+
+// src/state.ts
+function popupNameSuffix() {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+function generatePopupName() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    try {
+      return `maytes-checkout-${crypto.randomUUID()}`;
+    } catch {
+      return `maytes-checkout-${popupNameSuffix()}`;
+    }
+  }
+  return `maytes-checkout-${popupNameSuffix()}`;
+}
+function createInstanceState(options, internal) {
+  const config = {
+    createCheckout: options.createCheckout,
+    environment: options.environment
+  };
+  if (internal?.baseUrl !== void 0) config.baseUrl = internal.baseUrl;
+  if (internal?.cspNonce !== void 0) config.cspNonce = internal.cspNonce;
+  return {
+    config,
+    busy: false,
+    overlayEl: null,
+    popupWindow: null,
+    popupName: generatePopupName(),
+    popupPollHandle: null,
+    destroyed: false,
+    teardowns: /* @__PURE__ */ new Set()
+  };
+}
+
+// src/maytes.ts
+function validateOptions(options) {
+  if (typeof options !== "object" || options === null) {
+    throw new MaytesError(MaytesErrorCode.Config, "Maytes() requires an options object");
+  }
+  if (typeof options.createCheckout !== "function") {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      "Maytes({ createCheckout }) must be an async function returning { checkoutId }"
+    );
+  }
+  if (!isValidEnvironment(options.environment)) {
+    throw new MaytesError(
+      MaytesErrorCode.Config,
+      "Maytes({ environment }) must be 'sandbox' or 'production'"
+    );
+  }
+}
+function validateInternalOptions(internal) {
+  if (internal === void 0) return;
+  if (internal.baseUrl !== void 0) normalizeBaseUrl(internal.baseUrl);
+}
+var Maytes = (options, internal) => {
+  validateOptions(options);
+  validateInternalOptions(internal);
+  const state = createInstanceState(options, internal);
+  const { checkoutUrl, redirectToCheckout } = makeRedirect(
+    state.config.environment,
+    state.config.baseUrl
+  );
+  const sdk = {
+    renderButton(container, opts) {
+      return renderButton(state, container, opts);
+    },
+    redirectToCheckout(opts) {
+      redirectToCheckout(opts);
+    },
+    checkoutUrl(opts) {
+      return checkoutUrl(opts);
+    },
+    destroy() {
+      if (state.destroyed) return;
+      state.destroyed = true;
+      stopPopupPoll(state);
+      hideOverlay(state);
+      closePopupWindow(state.popupWindow);
+      state.popupWindow = null;
+      state.busy = false;
+      for (const teardown of [...state.teardowns]) teardown();
+      state.teardowns.clear();
+    }
+  };
+  return sdk;
+};
+
+// src/index.ts
+if (typeof window !== "undefined") {
+  window.Maytes = Maytes;
+}
+//# sourceMappingURL=checkout-button.cjs.map