@maytes/checkout-button 1.1.0 → 1.2.0

package/dist/checkout-button.mjs

@@ -1,3 +1,54 @@
+// src/errors.ts
+var MaytesErrorCode = {
+  Config: "CONFIG"
+};
+var MaytesError = class extends Error {
+  constructor(code, message) {
+    super(message);
+    this.code = code;
+    this.name = "MaytesError";
+  }
+};
+
+// src/appearance.ts
+var MIN_BUTTON_HEIGHT = 40;
+var MAX_BUTTON_HEIGHT = 55;
+var MAX_BUTTON_RADIUS = 999;
+function isWholeNumber(value) {
+  return typeof value === "number" && Number.isInteger(value);
+}
+function assertAppearance(options) {
+  const { radius, height } = options;
+  const appearance = {};
+  if (height !== void 0) {
+    if (!isWholeNumber(height) || height < MIN_BUTTON_HEIGHT || height > MAX_BUTTON_HEIGHT) {
+      throw new MaytesError(
+        MaytesErrorCode.Config,
+        `renderButton({ height }) must be a whole number of pixels from ${MIN_BUTTON_HEIGHT} to ${MAX_BUTTON_HEIGHT}`
+      );
+    }
+    appearance.height = height;
+  }
+  if (radius !== void 0) {
+    const maxRadius = height === void 0 ? MAX_BUTTON_RADIUS : Math.floor(height / 2);
+    if (!isWholeNumber(radius) || radius < 0 || radius > maxRadius) {
+      throw new MaytesError(
+        MaytesErrorCode.Config,
+        `renderButton({ radius }) must be a whole number of pixels from 0 to ${maxRadius}`
+      );
+    }
+    appearance.radius = radius;
+  }
+  return appearance;
+}
+function applyAppearance(button, appearance) {
+  if (appearance.radius !== void 0) button.style.setProperty("--maytes-button-radius", `${appearance.radius}px`);
+  if (appearance.height !== void 0) {
+    button.style.setProperty("--maytes-button-height", `${appearance.height}px`);
+    button.classList.add("maytes-checkout-button--sized");
+  }
+}
+
 // src/foundation/brand.generated.ts
 var foundation = {
   brand: {
@@ -45,18 +96,6 @@ function buildMaytesLogo(height, color) {
   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/framing.ts
 function isSecurityError(err) {
   return typeof err === "object" && err !== null && err.name === "SecurityError";
@@ -146,7 +185,7 @@ function ensureOverlayStylesInTopDocument(host) {
   copy.textContent = localStyle.textContent ?? "";
   host.head.appendChild(copy);
 }
-function buildOverlay(host, state) {
+function buildOverlay(host, state, variant) {
   const dialog = host.createElement("dialog");
   dialog.className = "maytes-checkout-overlay";
   dialog.setAttribute("aria-labelledby", TITLE_ID);
@@ -166,22 +205,24 @@ function buildOverlay(host, state) {
   const text = host.createElement("p");
   text.id = TITLE_ID;
   text.className = "maytes-checkout-overlay__text";
-  text.textContent = "Completing checkout with Maytes\u2026";
+  text.textContent = variant === "popup" ? "Completing checkout with Maytes\u2026" : "Taking you to 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 (!isSecurityError(err)) throw err;
+  if (variant === "popup") {
+    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 (!isSecurityError(err)) throw err;
+        }
       }
-    }
-  });
-  content.appendChild(link);
+    });
+    content.appendChild(link);
+  }
   dialog.appendChild(content);
   dialog.addEventListener("cancel", (event) => {
     event.preventDefault();
@@ -193,13 +234,14 @@ function buildOverlay(host, state) {
 function applyNativeBackdropFallback(dialog) {
   dialog.style.background = NATIVE_BACKDROP_FALLBACK;
 }
-function showOverlay(state) {
+function showOverlay(state, variant = "popup") {
   if (state.overlayEl !== null) return;
   const host = resolveOverlayHost();
   ensureOverlayStylesInTopDocument(host);
-  const dialog = buildOverlay(host, state);
+  const dialog = buildOverlay(host, state, variant);
   state.overlayEl = dialog;
   host.body.appendChild(dialog);
+  if (host !== document) detachOverlayWhenThisPageHides(state);
   if (typeof dialog.showModal === "function") {
     try {
       dialog.showModal();
@@ -213,8 +255,15 @@ function showOverlay(state) {
     applyNativeBackdropFallback(dialog);
   }
 }
+function detachOverlayWhenThisPageHides(state) {
+  const onPageHide = () => hideOverlay(state);
+  window.addEventListener("pagehide", onPageHide);
+  state.overlayDetach = () => window.removeEventListener("pagehide", onPageHide);
+}
 function hideOverlay(state) {
   if (state.overlayEl === null) return;
+  state.overlayDetach?.();
+  state.overlayDetach = null;
   const dialog = state.overlayEl;
   const host = dialog.ownerDocument;
   if (typeof dialog.close === "function" && dialog.open) dialog.close();
@@ -308,7 +357,7 @@ function makeRedirect(environment, baseUrlOverride) {
 }
 
 // src/version.ts
-var SDK_VERSION = "1.1.0";
+var SDK_VERSION = "1.2.0";
 
 // src/styles.ts
 var STYLE_ATTR = "data-maytes-checkout-button";
@@ -321,9 +370,10 @@ var BUTTON_CSS = `
   align-items: center;
   justify-content: center;
   gap: 0.57em;
+  min-height: var(--maytes-button-height, auto);
   padding: 0.71em 1.29em;
   border: none;
-  border-radius: 999px;
+  border-radius: var(--maytes-button-radius, 999px);
   background: ${foundation.brand.primary};
   color: ${foundation.text.primaryInverse};
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
@@ -343,6 +393,10 @@ var BUTTON_CSS = `
   cursor: progress;
   opacity: 0.7;
 }
+.maytes-checkout-button--sized {
+  box-sizing: border-box;
+  white-space: nowrap;
+}
 .maytes-checkout-button--block {
   display: flex;
   width: 100%;
@@ -491,24 +545,12 @@ function releaseStyles() {
   if (el !== null) el.remove();
 }
 
-// src/button.ts
+// src/launch.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;
@@ -607,6 +649,148 @@ function paintPopupLoadingScreen(popup, cspNonce) {
     slow.hidden = false;
   }, SLOW_NETWORK_DELAY_MS);
 }
+function eventDetail(state, source) {
+  return { instanceId: state.instanceId, source };
+}
+function dispatchFailed(origin, reason, cause) {
+  const detail = cause === void 0 ? { ...origin, reason } : { ...origin, reason, cause };
+  document.dispatchEvent(new CustomEvent("maytes:checkout-failed", { detail }));
+}
+function dispatchRedirected(origin, url, target) {
+  const detail = { ...origin, url, target };
+  document.dispatchEvent(new CustomEvent("maytes:checkout-redirected", { detail }));
+}
+function assertLaunchMode(mode, caller = "renderButton") {
+  if (mode !== "redirect" && mode !== "popup") {
+    throw new MaytesError(MaytesErrorCode.Config, `${caller}({ mode }) must be 'redirect' or 'popup'`);
+  }
+  return mode;
+}
+function assertRedirectOverlay(value, caller = "renderButton") {
+  if (value === void 0) return false;
+  if (typeof value !== "boolean") {
+    throw new MaytesError(MaytesErrorCode.Config, `${caller}({ redirectOverlay }) must be true or false`);
+  }
+  return value;
+}
+function setInstanceBusy(state, busy) {
+  state.busy = busy;
+  for (const view of [...state.busyViews]) view(busy);
+}
+function endLaunch(state) {
+  hideOverlay(state);
+  setInstanceBusy(state, false);
+}
+function closeOrphanPopup(state, popup) {
+  closePopupWindow(popup);
+  stopPopupPoll(state);
+  if (state.popupWindow === popup) state.popupWindow = null;
+  endLaunch(state);
+}
+function clearOverlayOnRestore(state) {
+  if (state.restoreDetach !== null) return;
+  const onPageShow = (event) => {
+    if (!event.persisted) return;
+    detach();
+    endLaunch(state);
+  };
+  const detach = () => {
+    window.removeEventListener("pageshow", onPageShow);
+    state.restoreDetach = null;
+  };
+  window.addEventListener("pageshow", onPageShow);
+  state.restoreDetach = detach;
+}
+function navigateAway(state, origin, url, keepOverlay) {
+  const navigation = navigateTopLevel(url, false);
+  if (keepOverlay && (navigation.target === "self" || navigation.target === "top")) {
+    setInstanceBusy(state, false);
+    clearOverlayOnRestore(state);
+  } else {
+    endLaunch(state);
+  }
+  if (navigation.target === null) {
+    console.error("[maytes/checkout-button] could not leave the embedding frame:", navigation.cause);
+    dispatchFailed(origin, "navigation-blocked", navigation.cause);
+    return { outcome: "failed", reason: "navigation-blocked" };
+  }
+  dispatchRedirected(origin, url, navigation.target);
+  return { outcome: "redirected", target: navigation.target };
+}
+function openPopupLoader(state, origin) {
+  const popup = openBlankPopup(state);
+  if (popup === null) return null;
+  state.popupWindow = popup;
+  state.popupNavigated = false;
+  refocusPopup(popup);
+  paintPopupLoadingScreen(popup, state.config.cspNonce);
+  showOverlay(state);
+  document.dispatchEvent(new CustomEvent("maytes:checkout-opened", { detail: origin }));
+  startPopupPoll(state, () => {
+    endLaunch(state);
+    document.dispatchEvent(new CustomEvent("maytes:checkout-closed", { detail: origin }));
+  });
+  return popup;
+}
+async function launchCheckout(state, mode, source, redirectOverlay = false) {
+  if (state.busy || state.destroyed) return { outcome: "ignored" };
+  setInstanceBusy(state, true);
+  const origin = eventDetail(state, source);
+  const shouldUsePopup = mode === "popup" && !isMobileViewport();
+  const popup = shouldUsePopup ? openPopupLoader(state, origin) : null;
+  if (popup === null && redirectOverlay) showOverlay(state, "redirect");
+  try {
+    const result = await state.config.createCheckout();
+    if (state.destroyed || popup !== null && popup.closed) {
+      closePopupWindow(popup);
+      return { outcome: "closed" };
+    }
+    if (!isValidCheckoutResult(result)) {
+      closeOrphanPopup(state, popup);
+      const shapeError = new MaytesError(
+        MaytesErrorCode.Config,
+        "createCheckout must resolve to { checkoutId: string, checkoutUrl?: http(s) URL }"
+      );
+      console.error(shapeError);
+      dispatchFailed(origin, "invalid-shape", shapeError);
+      return { outcome: "failed", reason: "invalid-shape" };
+    }
+    const url = result.checkoutUrl ?? buildCheckoutUrl(
+      state.config.environment,
+      state.config.baseUrl,
+      result.checkoutId
+    );
+    if (popup !== null) {
+      state.popupNavigated = true;
+      navigatePopup(popup, url);
+      return { outcome: "popup" };
+    }
+    if (shouldUsePopup) {
+      console.warn("[maytes/checkout-button] popup was blocked; redirecting instead");
+    }
+    return navigateAway(state, origin, url, redirectOverlay);
+  } catch (err) {
+    if (popup !== null && popup.closed) return { outcome: "closed" };
+    closeOrphanPopup(state, popup);
+    console.error("[maytes/checkout-button] createCheckout failed:", err);
+    dispatchFailed(origin, "create-checkout-rejected", err);
+    return { outcome: "failed", reason: "create-checkout-rejected" };
+  }
+}
+
+// src/button.ts
+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 renderButton(state, container, options = {}) {
   if (state.destroyed) {
     throw new MaytesError(
@@ -617,120 +801,47 @@ function renderButton(state, container, options = {}) {
   if (!(container instanceof HTMLElement)) {
     throw new MaytesError(MaytesErrorCode.Config, "renderButton(container) requires an HTMLElement");
   }
+  const appearance = assertAppearance(options);
+  const redirectOverlay = assertRedirectOverlay(options.redirectOverlay);
   ensureStylesInjected(state.config.cspNonce);
   const label = options.label ?? "Split with";
   const block = options.block === true;
-  const mode = options.mode ?? "popup";
-  if (mode !== "redirect" && mode !== "popup") {
-    throw new MaytesError(
-      MaytesErrorCode.Config,
-      "renderButton({ mode }) must be 'redirect' or 'popup'"
-    );
-  }
+  const mode = assertLaunchMode(options.mode ?? "popup");
   const button = document.createElement("button");
   button.type = "button";
   button.className = block ? "maytes-checkout-button maytes-checkout-button--block" : "maytes-checkout-button";
+  applyAppearance(button, appearance);
   button.setAttribute("aria-label", `${label} Maytes`);
   const labelNode = document.createTextNode(`${label} `);
-  const logo = buildLogo();
+  let icon = buildLogo();
   button.appendChild(labelNode);
-  button.appendChild(logo);
-  const setBusy = (busy) => {
-    state.busy = busy;
+  button.appendChild(icon);
+  const showBusy = (busy) => {
     if (busy) {
       button.setAttribute("aria-disabled", "true");
       button.setAttribute("aria-busy", "true");
-      logo.replaceWith(buildSpinner());
+      const spinner = buildSpinner();
+      icon.replaceWith(spinner);
+      icon = spinner;
     } 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, target) => {
-    const detail = { url, target };
-    document.dispatchEvent(new CustomEvent("maytes:checkout-redirected", { detail }));
-  };
-  const navigateAway = (url) => {
-    const outcome = navigateTopLevel(url, false);
-    teardownActiveCheckout();
-    if (outcome.target === null) {
-      console.error("[maytes/checkout-button] could not leave the embedding frame:", outcome.cause);
-      dispatchFailed("navigation-blocked", outcome.cause);
-      return;
+      const nextLogo = buildLogo();
+      icon.replaceWith(nextLogo);
+      icon = nextLogo;
     }
-    dispatchRedirected(url, outcome.target);
   };
-  const closeOrphanPopup = (popup) => {
-    closePopupWindow(popup);
-    stopPopupPoll(state);
-    if (state.popupWindow === popup) state.popupWindow = null;
-    teardownActiveCheckout();
+  let launchedHere = false;
+  const followOwnLaunch = (busy) => {
+    if (!launchedHere) return;
+    showBusy(busy);
+    if (!busy) launchedHere = false;
   };
-  const handleClick = async () => {
+  state.busyViews.add(followOwnLaunch);
+  const handleClick = () => {
     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;
-      state.popupNavigated = false;
-      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) {
-        state.popupNavigated = true;
-        navigatePopup(popup, url);
-      } else {
-        if (shouldUsePopup) {
-          console.warn("[maytes/checkout-button] popup was blocked; redirecting instead");
-        }
-        navigateAway(url);
-      }
-    } catch (err) {
-      if (popup !== null && popup.closed) return;
-      closeOrphanPopup(popup);
-      console.error("[maytes/checkout-button] createCheckout failed:", err);
-      dispatchFailed("create-checkout-rejected", err);
-    }
+    launchedHere = true;
+    void launchCheckout(state, mode, "button", redirectOverlay);
   };
   button.addEventListener("click", handleClick);
   container.appendChild(button);
@@ -740,6 +851,7 @@ function renderButton(state, container, options = {}) {
     cleaned = true;
     button.removeEventListener("click", handleClick);
     button.remove();
+    state.busyViews.delete(followOwnLaunch);
     state.teardowns.delete(teardown);
     releaseStyles();
   };
@@ -748,18 +860,18 @@ function renderButton(state, container, options = {}) {
 }
 
 // src/state.ts
-function popupNameSuffix() {
+function randomSuffix() {
   return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
-function generatePopupName() {
+function randomId() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     try {
-      return `maytes-checkout-${crypto.randomUUID()}`;
+      return crypto.randomUUID();
     } catch {
-      return `maytes-checkout-${popupNameSuffix()}`;
+      return randomSuffix();
     }
   }
-  return `maytes-checkout-${popupNameSuffix()}`;
+  return randomSuffix();
 }
 function createInstanceState(options, internal) {
   const config = {
@@ -771,10 +883,14 @@ function createInstanceState(options, internal) {
   return {
     config,
     busy: false,
+    busyViews: /* @__PURE__ */ new Set(),
+    instanceId: randomId(),
     overlayEl: null,
+    overlayDetach: null,
+    restoreDetach: null,
     popupWindow: null,
     popupNavigated: false,
-    popupName: generatePopupName(),
+    popupName: `maytes-checkout-${randomId()}`,
     popupPollHandle: null,
     destroyed: false,
     teardowns: /* @__PURE__ */ new Set()
@@ -812,9 +928,27 @@ var Maytes = (options, internal) => {
     state.config.baseUrl
   );
   const sdk = {
+    instanceId: state.instanceId,
     renderButton(container, opts) {
       return renderButton(state, container, opts);
     },
+    openCheckout(opts) {
+      if (state.destroyed) {
+        throw new MaytesError(MaytesErrorCode.Config, "openCheckout() called on a destroyed Maytes instance");
+      }
+      const mode = assertLaunchMode(opts?.mode ?? "popup", "openCheckout");
+      const redirectOverlay = assertRedirectOverlay(opts?.redirectOverlay, "openCheckout");
+      return launchCheckout(state, mode, "api", redirectOverlay);
+    },
+    onBusyChange(listener) {
+      if (state.destroyed) {
+        throw new MaytesError(MaytesErrorCode.Config, "onBusyChange() called on a destroyed Maytes instance");
+      }
+      state.busyViews.add(listener);
+      return () => {
+        state.busyViews.delete(listener);
+      };
+    },
     redirectToCheckout(opts) {
       redirectToCheckout(opts);
     },
@@ -825,6 +959,7 @@ var Maytes = (options, internal) => {
       if (state.destroyed) return;
       state.destroyed = true;
       stopPopupPoll(state);
+      state.restoreDetach?.();
       hideOverlay(state);
       if (!state.popupNavigated) closePopupWindow(state.popupWindow);
       state.popupWindow = null;