@dintero/checkout-web-sdk 0.10.2 → 0.11.1

package/dist/dintero-checkout-web-sdk.cjs.prod.js

@@ -6,7 +6,7 @@ require('native-promise-only');
 
 var pkg = {
 	name: "@dintero/checkout-web-sdk",
-	version: "0.10.2",
+	version: "0.11.1",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -21,7 +21,7 @@ var pkg = {
 	},
 	scripts: {
 		build: "yarn tsc --noEmit && preconstruct build",
-		lint: "prettier --cache --log-level warn -c --config .prettierrc.yml .",
+		lint: "biome check",
 		test: "vitest --config .vitest.config.mts",
 		"semantic-release": "semantic-release",
 		prepublishOnly: "yarn run build"
@@ -40,16 +40,16 @@ var pkg = {
 	devDependencies: {
 		"@babel/core": "7.28.5",
 		"@babel/preset-typescript": "7.28.5",
+		"@biomejs/biome": "2.3.10",
 		"@preconstruct/cli": "2.8.12",
 		"@semantic-release/exec": "7.1.0",
 		"@semantic-release/git": "10.0.1",
-		"@vitest/browser": "4.0.8",
+		"@vitest/browser": "4.0.16",
 		"@vitest/browser-webdriverio": "^4.0.4",
-		prettier: "3.6.2",
 		"semantic-release": "25.0.2",
 		typescript: "5.9.3",
-		vitest: "4.0.8",
-		webdriverio: "9.20.0"
+		vitest: "4.0.16",
+		webdriverio: "9.22.0"
 	},
 	dependencies: {
 		"native-promise-only": "0.8.1"
@@ -76,9 +76,65 @@ let InternalCheckoutEvents = /*#__PURE__*/function (InternalCheckoutEvents) {
   InternalCheckoutEvents["ScrollToTop"] = "ScrollToTop";
   InternalCheckoutEvents["ShowPopOutButton"] = "ShowPopOutButton";
   InternalCheckoutEvents["HidePopOutButton"] = "HidePopOutButton";
+  InternalCheckoutEvents["TopLevelNavigation"] = "TopLevelNavigation";
   return InternalCheckoutEvents;
 }({});
 
+/**
+ * Creates an iframe and adds it to the container.
+ *
+ * Returns a promise that resolves to the iframe when the iframe has loaded.
+ * Rejects the promise if there is a problem loading the iframe.
+ */
+const createIframeAsync = (container, url) => {
+  if (!container || !container.appendChild) {
+    throw new Error("Invalid container");
+  }
+  const iframe = document.createElement("iframe");
+
+  // No border, transparent and stretch to 100% of the container width.
+  iframe.setAttribute("frameborder", "0");
+  iframe.setAttribute("allowTransparency", "true");
+  iframe.setAttribute("style", "width:100%; height:0;");
+
+  // TODO: Get this to work as expected, might be tricky with current
+  // tests since they will require the csp to be "unsafe-inline".
+  // The server needs to add the same property in the Content Security
+  // Policy headers in the response for this to work. A CSP header set by
+  //  a meta tag in the iframe target will not be detected as a valid
+  // CSP from the iframe host.
+  // Content Security Policy, should be limited to "endpoint".
+  // iframe.setAttribute("csp", `default-src  ${endpoint}`);
+
+  // Apply extra restrictions to the content in the iframe.
+  // allow popups is needed to open terms in new window
+  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation");
+
+  // Needed for to allow apple pay from iframe
+  iframe.setAttribute("allow", "payment; clipboard-write *");
+
+  // The download priority of the resource in the <iframe>'s src attribute.
+  iframe.setAttribute("importance", "high");
+
+  // Set the iframe source to the url.
+  iframe.setAttribute("src", url);
+
+  // Resolve or reject promise when iframe loads.
+
+  // // Add iframe to the container.
+  // container.appendChild(iframe);
+  return {
+    iframe,
+    initiate: async () => {
+      return new Promise((resolve, reject) => {
+        iframe.onload = () => resolve();
+        iframe.onerror = () => reject();
+        container.appendChild(iframe);
+      });
+    }
+  };
+};
+
 /**
  * Wraps window.location.assign()
  */
@@ -97,7 +153,8 @@ const getSessionUrl = options => {
     language,
     ui,
     shouldCallValidateSession,
-    popOut
+    popOut,
+    redirect
   } = options;
   if (!endpoint) {
     throw new Error("Invalid endpoint");
@@ -116,7 +173,9 @@ const getSessionUrl = options => {
   if (popOut) {
     params.append("role", "pop_out_launcher");
   }
-  if (options.hasOwnProperty("hideTestMessage") && options["hideTestMessage"] !== undefined && options["hideTestMessage"] === true) {
+  if (
+  // biome-ignore lint/suspicious/noPrototypeBuiltins: test
+  options.hasOwnProperty("hideTestMessage") && options.hideTestMessage !== undefined && options.hideTestMessage === true) {
     params.append("hide_test_message", "true");
   }
   const hostname = getHostname();
@@ -124,7 +183,7 @@ const getSessionUrl = options => {
     params.append("sdk_hostname", hostname);
   }
   if (!redirect && !hostnameIsTop()) {
-    params.append("sdk_not_top_level", "false");
+    params.append("sdk_not_top_level", "true");
   }
   if (endpoint === "https://checkout.dintero.com") {
     // Default endpoint will redirect via the view endpoint
@@ -166,7 +225,7 @@ const getHostname = () => {
       hostname
     } = window.location;
     return hostname;
-  } catch (error) {
+  } catch (_) {
     return undefined;
   }
 };
@@ -178,7 +237,7 @@ const hostnameIsTop = () => {
     const hostname = getHostname();
     const topHostname = window.top.location.hostname;
     return topHostname && hostname && hostname === topHostname;
-  } catch (error) {
+  } catch (_) {
     return false;
   }
 };
@@ -188,226 +247,142 @@ const url = {
   windowLocationAssign
 };
 
-/**
- * Creates an iframe and adds it to the container.
- *
- * Returns a promise that resolves to the iframe when the iframe has loaded.
- * Rejects the promise if there is a problem loading the iframe.
- */
-const createIframeAsync = (container, endpoint, url) => {
-  if (!container || !container.appendChild) {
-    throw new Error("Invalid container");
-  }
-  const iframe = document.createElement("iframe");
-
-  // No border, transparent and stretch to 100% of the container width.
-  iframe.setAttribute("frameborder", "0");
-  iframe.setAttribute("allowTransparency", "true");
-  iframe.setAttribute("style", "width:100%; height:0;");
-
-  // TODO: Get this to work as expected, might be tricky with current
-  // tests since they will require the csp to be "unsafe-inline".
-  // The server needs to add the same property in the Content Security
-  // Policy headers in the response for this to work. A CSP header set by
-  //  a meta tag in the iframe target will not be detected as a valid
-  // CSP from the iframe host.
-  // Content Security Policy, should be limited to "endpoint".
-  // iframe.setAttribute("csp", `default-src  ${endpoint}`);
-
-  // Apply extra restrictions to the content in the iframe.
-  // allow popups is needed to open terms in new window
-  iframe.setAttribute("sandbox", "allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation");
-
-  // Needed for to allow apple pay from iframe
-  iframe.setAttribute("allow", "payment; clipboard-write *");
-
-  // The download priority of the resource in the <iframe>'s src attribute.
-  iframe.setAttribute("importance", "high");
-
-  // Set the iframe source to the url.
-  iframe.setAttribute("src", url);
-
-  // Resolve or reject promise when iframe loads.
-
-  // // Add iframe to the container.
-  // container.appendChild(iframe);
-  return {
-    iframe,
-    initiate: async () => {
-      return new Promise((resolve, reject) => {
-        iframe.onload = () => resolve();
-        iframe.onerror = () => reject();
-        container.appendChild(iframe);
-      });
+const createPopOutWindow = (sid, url, width, height) => {
+  return new Promise(resolve => {
+    try {
+      // Creates a centered pop up window
+      const left = window.screenX + (window.outerWidth - width) / 2;
+      const top = window.screenY + (window.outerHeight - height) / 2;
+      const features = `width=${width},height=${height},left=${left},top=${top},location=no,menubar=no,toolbar=no,status=no`;
+      let popOut;
+      let timeout = -1;
+      // Set up listener for application loaded message from pop out window
+      const handleAppLoaded = event => {
+        const correctSource = event.source === popOut;
+        const correctOrigin = event.origin === new URL(url).origin;
+        const correctMessage = event.data && event.data.type === "AppLoaded";
+        const correctContext = event.data.context === "popOut";
+        const correctSid = event.data.sid === sid;
+        if (correctSource && correctOrigin && correctMessage && correctContext && correctSid) {
+          clearTimeout(timeout);
+          resolve(popOut);
+          window.removeEventListener("message", handleAppLoaded);
+        }
+      };
+      window.addEventListener("message", handleAppLoaded);
+      // Open pop out
+      popOut = window.open(url, "dintero-checkout", features);
+      // Check that pop out was opened
+      if (!popOut) {
+        console.log("createPopOutWindow no popOut");
+        resolve(undefined);
+        return;
+      }
+      // Trigger timeout if pop out is not loaded
+      timeout = window.setTimeout(() => {
+        console.log("createPopOutWindow timeout");
+        resolve(undefined);
+      }, 10000);
+    } catch (_err) {
+      resolve(undefined);
     }
-  };
-};
-
-/**
- * Unsubscribe handler from event(s).
- */
-
-/**
- * Post a message acknowledgement to the checkout iframe.
- */
-const postAck = (source, event) => {
-  if (event.data.mid && source) {
-    source.postMessage({
-      ack: event.data.mid
-    }, event.origin || "*");
-  }
-};
-
-/**
- * Post a SessionLock-event to the checkout iframe.
- */
-const postSessionLock = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "LockSession",
-      sid
-    }, "*");
-  }
+  });
 };
-
-/**
- * Post the validation result to the checkout iframe
- */
-const postValidationResult = (iframe, sid, result) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "ValidationResult",
-      sid,
-      ...result
-    }, "*");
+const openPopOut = async options => {
+  let unsubscribe;
+  let intervalId = -1;
+  let popOutWindow;
+  if (popOutWindow && !popOutWindow.closed) {
+    // Skip if already open.
+    return;
   }
-};
 
-/**
- * Post RefreshSession-event to the checkout iframe.
- */
-const postSessionRefresh = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "RefreshSession",
-      sid
-    }, "*");
-  }
-};
+  // Open popup window
+  const popOutUrl = url.getPopOutUrl(options);
+  popOutWindow = await createPopOutWindow(options.sid, popOutUrl, Math.min(480, window.screen.width), Math.min(840, window.screen.height));
+  const focusPopOut = () => {
+    if (popOutWindow) {
+      popOutWindow.focus();
+    }
+  };
+  const cleanUpClosed = () => {
+    window.clearInterval(intervalId);
+    intervalId = -1;
+    window.removeEventListener("beforeunload", closePopOut);
+    popOutWindow = undefined;
+    options.onClose();
+    if (unsubscribe) {
+      unsubscribe();
+    }
+  };
+  const closePopOut = () => {
+    if (popOutWindow) {
+      popOutWindow.close();
+    }
+    cleanUpClosed();
+  };
+  const checkIfPopupClosed = () => {
+    if (popOutWindow?.closed) {
+      cleanUpClosed();
+    }
+  };
 
-/**
- * Post SetActivePaymentProductType-event to the checkout iframe.
- */
-const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "SetActivePaymentProductType",
-      sid,
-      payment_product_type: paymentProductType
-    }, "*");
-  }
-};
+  // Close pop out if current window is closed
+  window.addEventListener("beforeunload", closePopOut);
 
-/**
- * Post ClosePopOut-event to the checkout iframe.
- */
-const postValidatePopOutEvent = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "ValidatingPopOut",
-      sid
-    }, "*");
-  }
-};
+  // Check if checkout is still open
+  intervalId = window.setInterval(checkIfPopupClosed, 200);
 
-/**
- * Post OpenPopOutFailed-event to the checkout iframe.
- */
-const postOpenPopOutFailedEvent = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "OpenPopOutFailed",
-      sid
-    }, "*");
-  }
+  // Set up pub/sub of messages from pop out to SDK
+  unsubscribe = options.onOpen(popOutWindow);
+  return {
+    close: closePopOut,
+    focus: focusPopOut,
+    popOutWindow
+  };
 };
-
-/**
- * Post OpenedPopOut-event to the checkout iframe.
- */
-const postOpenPopOutEvent = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "OpenedPopOut",
-      sid
-    }, "*");
+const postPopOutSessionLock = (popOutWindow, sid) => {
+  try {
+    if (popOutWindow) {
+      popOutWindow.postMessage({
+        type: "LockSession",
+        sid
+      }, "*");
+    }
+  } catch (e) {
+    console.error(e);
   }
 };
-
-/**
- * Post ClosePopOut-event to the checkout iframe.
- */
-const postClosePopOutEvent = (iframe, sid) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "ClosedPopOut",
-      sid
-    }, "*");
+const postPopOutSessionRefresh = (popOutWindow, sid) => {
+  try {
+    if (popOutWindow) {
+      popOutWindow.postMessage({
+        type: "RefreshSession",
+        sid
+      }, "*");
+    }
+  } catch (e) {
+    console.error(e);
   }
 };
-
-/**
- * Post SetLanguage-event to the checkout iframe.
- */
-const postSetLanguage = (iframe, sid, language) => {
-  if (iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
-      type: "SetLanguage",
-      sid,
-      language
-    }, "*");
+const postPopOutActivePaymentProductType = (popOutWindow, sid, paymentProductType) => {
+  try {
+    if (popOutWindow) {
+      popOutWindow.postMessage({
+        type: "SetActivePaymentProductType",
+        sid,
+        payment_product_type: paymentProductType
+      }, "*");
+    }
+  } catch (e) {
+    console.error(e);
   }
 };
-
-/**
- * Subscribe to events from an iframe given a handler and a set
- * of event types.
- */
-const subscribe = options => {
-  const {
-    sid,
-    endpoint,
-    handler,
-    eventTypes,
-    checkout
-  } = options;
-
-  // Wrap event handler in a function that checks for correct origin and
-  // filters on event type(s) in the event data.
-  const endpointUrl = new URL(endpoint);
-  const wrappedHandler = event => {
-    const correctOrigin = event.origin === endpointUrl.origin;
-    const correctWindow = event.source === checkout.iframe.contentWindow;
-    const correctSid = event.data && event.data.sid === sid;
-    const correctMessageType = eventTypes.indexOf(event.data && event.data.type) !== -1;
-    if (correctOrigin && correctWindow && correctSid && correctMessageType) {
-      postAck(checkout.iframe.contentWindow, event);
-      handler(event.data, checkout);
-    }
-  };
-
-  // Add event listener to the iframe.
-  window.addEventListener("message", wrappedHandler, false);
-
-  // Function to remove the event listener from the iframe.
-  const unsubscribe = () => {
-    window.removeEventListener("message", wrappedHandler, false);
-  };
-
-  // Return object with unsubscribe function.
-  return {
-    unsubscribe
-  };
+const popOutModule = {
+  openPopOut,
+  postPopOutSessionLock,
+  postPopOutSessionRefresh,
+  postPopOutActivePaymentProductType
 };
 
 const getBackdropZIndex = () => {
@@ -416,8 +391,8 @@ const getBackdropZIndex = () => {
   const highest = Array.from(elements).reduce((acc, element) => {
     try {
       const zIndexStr = document.defaultView.getComputedStyle(element, null).getPropertyValue("z-index");
-      const zIndex = parseInt(zIndexStr || "0");
-      if (!isNaN(zIndex) && zIndex > acc) {
+      const zIndex = Number.parseInt(zIndexStr || "0", 10);
+      if (!Number.isNaN(zIndex) && zIndex > acc) {
         return zIndex;
       }
     } catch (e) {
@@ -757,9 +732,9 @@ const configureButton = (button, {
 
   // Position
   button.style.position = "absolute";
-  button.style.top = top + "px";
-  button.style.left = left + "px";
-  button.style.right = right + "px";
+  button.style.top = `${top}px`;
+  button.style.left = `${left}px`;
+  button.style.right = `${right}px`;
 
   // Appearance from checkout
   const {
@@ -787,7 +762,7 @@ const addHoverAndFocusVisibleStyles = (stylesHover, stylesFocusVisible) => {
   }
   const style = document.createElement("style");
   style.setAttribute("id", styleId);
-  let content = [];
+  const content = [];
   if (stylesHover) {
     content.push(toCssEntity(`#${OPEN_POP_OUT_BUTTON_ID}:hover:not(:disabled)`, stylesHover));
   }
@@ -806,182 +781,211 @@ const toCssParameters = keyValues => {
 const slugify = str => {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 };
-const addPopOutButton = options => {
-  // Will add or update existing button
-  const {
-    container
-  } = options;
-  const exists = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
-  const button = exists || document.createElement("button");
-  configureButton(button, options);
-  if (!exists) {
-    container.appendChild(button);
+const addPopOutButton = options => {
+  // Will add or update existing button
+  const {
+    container
+  } = options;
+  const exists = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
+  const button = exists || document.createElement("button");
+  configureButton(button, options);
+  if (!exists) {
+    container.appendChild(button);
+  }
+};
+const setPopOutButtonDisabled = disabled => {
+  try {
+    const button = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
+    if (button) {
+      if (disabled) {
+        button.setAttribute("disabled", disabled.toString());
+      } else {
+        button.removeAttribute("disabled");
+      }
+    }
+  } catch (e) {
+    // Ignore error and continue
+    console.error(e);
+  }
+};
+const removePopOutButton = () => {
+  try {
+    const button = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
+    if (button) {
+      button.remove();
+    }
+  } catch (e) {
+    // Ignore error and continue
+    console.error(e);
+  }
+};
+
+/**
+ * Unsubscribe handler from event(s).
+ */
+
+/**
+ * Post a message acknowledgement to the checkout iframe.
+ */
+const postAck = (source, event) => {
+  if (event.data.mid && source) {
+    source.postMessage({
+      ack: event.data.mid
+    }, event.origin || "*");
+  }
+};
+
+/**
+ * Post a SessionLock-event to the checkout iframe.
+ */
+const postSessionLock = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "LockSession",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post the validation result to the checkout iframe
+ */
+const postValidationResult = (iframe, sid, result) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ValidationResult",
+      sid,
+      ...result
+    }, "*");
+  }
+};
+
+/**
+ * Post RefreshSession-event to the checkout iframe.
+ */
+const postSessionRefresh = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "RefreshSession",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post SetActivePaymentProductType-event to the checkout iframe.
+ */
+const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "SetActivePaymentProductType",
+      sid,
+      payment_product_type: paymentProductType
+    }, "*");
+  }
+};
+
+/**
+ * Post ClosePopOut-event to the checkout iframe.
+ */
+const postValidatePopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ValidatingPopOut",
+      sid
+    }, "*");
   }
 };
-const setPopOutButtonDisabled = disabled => {
-  try {
-    const button = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
-    if (button) {
-      if (disabled) {
-        button.setAttribute("disabled", disabled.toString());
-      } else {
-        button.removeAttribute("disabled");
-      }
-    }
-  } catch (e) {
-    // Ignore error and continue
-    console.error(e);
+
+/**
+ * Post OpenPopOutFailed-event to the checkout iframe.
+ */
+const postOpenPopOutFailedEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "OpenPopOutFailed",
+      sid
+    }, "*");
   }
 };
-const removePopOutButton = () => {
-  try {
-    const button = document.getElementById(OPEN_POP_OUT_BUTTON_ID);
-    if (button) {
-      button.remove();
-    }
-  } catch (e) {
-    // Ignore error and continue
-    console.error(e);
+
+/**
+ * Post OpenedPopOut-event to the checkout iframe.
+ */
+const postOpenPopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "OpenedPopOut",
+      sid
+    }, "*");
   }
 };
 
-const createPopOutWindow = (sid, url, width, height) => {
-  return new Promise(resolve => {
-    try {
-      // Creates a centered pop up window
-      const left = window.screenX + (window.outerWidth - width) / 2;
-      const top = window.screenY + (window.outerHeight - height) / 2;
-      const features = `width=${width},height=${height},left=${left},top=${top},location=no,menubar=no,toolbar=no,status=no`;
-      let popOut;
-      let timeout = -1;
-      // Set up listener for application loaded message from pop out window
-      const handleAppLoaded = event => {
-        const correctSource = event.source === popOut;
-        const correctOrigin = event.origin === new URL(url).origin;
-        const correctMessage = event.data && event.data.type === "AppLoaded";
-        const correctContext = event.data.context === "popOut";
-        const correctSid = event.data.sid === sid;
-        if (correctSource && correctOrigin && correctMessage && correctContext && correctSid) {
-          clearTimeout(timeout);
-          resolve(popOut);
-          window.removeEventListener("message", handleAppLoaded);
-        }
-      };
-      window.addEventListener("message", handleAppLoaded);
-      // Open pop out
-      popOut = window.open(url, "dintero-checkout", features);
-      // Check that pop out was opened
-      if (!popOut) {
-        console.log("createPopOutWindow no popOut");
-        resolve(undefined);
-        return;
-      }
-      // Trigger timeout if pop out is not loaded
-      timeout = window.setTimeout(() => {
-        console.log("createPopOutWindow timeout");
-        resolve(undefined);
-      }, 10000);
-    } catch (err) {
-      resolve(undefined);
-    }
-  });
+/**
+ * Post ClosePopOut-event to the checkout iframe.
+ */
+const postClosePopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ClosedPopOut",
+      sid
+    }, "*");
+  }
 };
-const openPopOut = async options => {
-  let unsubscribe;
-  let intervalId = -1;
-  let popOutWindow;
-  if (popOutWindow && !popOutWindow.closed) {
-    // Skip if already open.
-    return;
+
+/**
+ * Post SetLanguage-event to the checkout iframe.
+ */
+const postSetLanguage = (iframe, sid, language) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "SetLanguage",
+      sid,
+      language
+    }, "*");
   }
+};
 
-  // Open popup window
-  const popOutUrl = url.getPopOutUrl(options);
-  popOutWindow = await createPopOutWindow(options.sid, popOutUrl, Math.min(480, window.screen.width), Math.min(840, window.screen.height));
-  const focusPopOut = () => {
-    if (popOutWindow) {
-      popOutWindow.focus();
-    }
-  };
-  const cleanUpClosed = () => {
-    window.clearInterval(intervalId);
-    intervalId = -1;
-    window.removeEventListener("beforeunload", closePopOut);
-    popOutWindow = undefined;
-    options.onClose();
-    if (unsubscribe) {
-      unsubscribe();
-    }
-  };
-  const closePopOut = () => {
-    if (popOutWindow) {
-      popOutWindow.close();
-    }
-    cleanUpClosed();
-  };
-  const checkIfPopupClosed = () => {
-    if (popOutWindow && popOutWindow.closed) {
-      cleanUpClosed();
+/**
+ * Subscribe to events from an iframe given a handler and a set
+ * of event types.
+ */
+const subscribe = options => {
+  const {
+    sid,
+    endpoint,
+    handler,
+    eventTypes,
+    checkout
+  } = options;
+
+  // Wrap event handler in a function that checks for correct origin and
+  // filters on event type(s) in the event data.
+  const endpointUrl = new URL(endpoint);
+  const wrappedHandler = event => {
+    const correctOrigin = event.origin === endpointUrl.origin;
+    const correctWindow = event.source === checkout.iframe.contentWindow;
+    const correctSid = event.data && event.data.sid === sid;
+    const correctMessageType = eventTypes.indexOf(event.data?.type) !== -1;
+    if (correctOrigin && correctWindow && correctSid && correctMessageType) {
+      postAck(checkout.iframe.contentWindow, event);
+      handler(event.data, checkout);
     }
   };
 
-  // Close pop out if current window is closed
-  window.addEventListener("beforeunload", closePopOut);
+  // Add event listener to the iframe.
+  window.addEventListener("message", wrappedHandler, false);
 
-  // Check if checkout is still open
-  intervalId = window.setInterval(checkIfPopupClosed, 200);
+  // Function to remove the event listener from the iframe.
+  const unsubscribe = () => {
+    window.removeEventListener("message", wrappedHandler, false);
+  };
 
-  // Set up pub/sub of messages from pop out to SDK
-  unsubscribe = options.onOpen(popOutWindow);
+  // Return object with unsubscribe function.
   return {
-    close: closePopOut,
-    focus: focusPopOut,
-    popOutWindow
+    unsubscribe
   };
 };
-const postPopOutSessionLock = (popOutWindow, sid) => {
-  try {
-    if (popOutWindow) {
-      popOutWindow.postMessage({
-        type: "LockSession",
-        sid
-      }, "*");
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-const postPopOutSessionRefresh = (popOutWindow, sid) => {
-  try {
-    if (popOutWindow) {
-      popOutWindow.postMessage({
-        type: "RefreshSession",
-        sid
-      }, "*");
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-const postPopOutActivePaymentProductType = (popOutWindow, sid, paymentProductType) => {
-  try {
-    if (popOutWindow) {
-      popOutWindow.postMessage({
-        type: "SetActivePaymentProductType",
-        sid,
-        payment_product_type: paymentProductType
-      }, "*");
-    }
-  } catch (e) {
-    console.error(e);
-  }
-};
-const popOutModule = {
-  openPopOut,
-  postPopOutSessionLock,
-  postPopOutSessionRefresh,
-  postPopOutActivePaymentProductType
-};
 
 /**
  * An event handler that navigates to the href in the event.
@@ -1006,7 +1010,7 @@ const setIframeHeight = (event, checkout) => {
  * An event handler that scrolls to the top of the iframe. This is useful when the user
  * is navigated to another page.
  */
-const scrollToIframeTop = (event, checkout) => {
+const scrollToIframeTop = (_event, checkout) => {
   try {
     checkout.iframe.scrollIntoView({
       block: "start",
@@ -1057,7 +1061,7 @@ const createPopOutMessageHandler = (source, checkout) => {
   const popOutCompletedHandler = {
     internalPopOutHandler: true,
     eventTypes: paymentCompletedEvents,
-    handler: (eventData, checkout) => {
+    handler: (eventData, _checkout) => {
       if (eventData.href) {
         // Remove open pop out button rendered by SDK
         removePopOutButton();
@@ -1079,18 +1083,18 @@ const createPopOutMessageHandler = (source, checkout) => {
     // Check that we should handle the message
     if (event.source === source && event.data.context === "popOut" && event.data.sid === checkout.options.sid) {
       // Check if handler matches incoming event and trigger the handler if so.
-      [
+      for (const handlerObject of [
       // SDK events for managing the pop out flow.
       popOutChangedLanguageHandler, popOutCompletedHandler,
       // Events configured when the checkout was embedded.
-      ...checkout.handlers].forEach(handlerObject => {
+      ...checkout.handlers]) {
         if (handlerObject.eventTypes.includes(event.data.type) && handlerObject.handler) {
           // Invoking the handler function if the event type matches the handler.
           safelyInvoke(() => {
             handlerObject.handler(event.data, checkout);
           });
         }
-      });
+      }
     }
   };
   // Add messageRouter event listener to the Pop Out
@@ -1231,7 +1235,7 @@ const handleShowButton = (event, checkout) => {
 /**
  * Remove the pop out button above the embedded iframe
  */
-const handleRemoveButton = (event, checkout) => {
+const handleRemoveButton = (event, _checkout) => {
   if (event.type === InternalCheckoutEvents.HidePopOutButton) {
     removePopOutButton();
   }
@@ -1294,15 +1298,16 @@ const embed = async options => {
   const {
     iframe,
     initiate
-  } = createIframeAsync(innerContainer, endpoint, url.getSessionUrl({
+  } = createIframeAsync(innerContainer, url.getSessionUrl({
     sid,
     endpoint,
     language,
     ui: options.ui || "inline",
     shouldCallValidateSession: onValidateSession !== undefined,
     popOut,
+    // biome-ignore lint/suspicious/noPrototypeBuiltins: test
     ...(options.hasOwnProperty("hideTestMessage") && {
-      hideTestMessage: options["hideTestMessage"]
+      hideTestMessage: options.hideTestMessage
     })
   }));
 
@@ -1316,7 +1321,9 @@ const embed = async options => {
         // Try to remove backdrop if it exists
         removeBackdrop();
       }
-      subscriptions.forEach(sub => sub.unsubscribe());
+      for (const sub of subscriptions) {
+        sub.unsubscribe();
+      }
       if (iframe.parentElement) {
         innerContainer.removeChild(iframe);
       }
@@ -1340,7 +1347,9 @@ const embed = async options => {
         sid,
         endpoint,
         handler: sessionEvent => {
-          eventSubscriptions.forEach(sub => sub.unsubscribe());
+          for (const sub of eventSubscriptions) {
+            sub.unsubscribe();
+          }
           resolve(sessionEvent);
         },
         eventTypes: [resolveEvent],
@@ -1351,7 +1360,9 @@ const embed = async options => {
         sid,
         endpoint,
         handler: () => {
-          eventSubscriptions.forEach(sub => sub.unsubscribe());
+          for (const sub of eventSubscriptions) {
+            sub.unsubscribe();
+          }
           reject(`Received unexpected event: ${rejectEvent}`);
         },
         eventTypes: [rejectEvent],
@@ -1391,7 +1402,7 @@ const embed = async options => {
    *  error message. Only used when the embed function in the SDK has a dedicated handler for onPayment, onError etc.
    *  If no custom handler is set the followHref handler is used instead.
    */
-  const handleWithResult = (sid, endpoint, handler) => {
+  const handleWithResult = (_sid, endpoint, handler) => {
     return (event, checkout) => {
       if (!has_delivered_final_event) {
         has_delivered_final_event = true;
@@ -1403,7 +1414,7 @@ const embed = async options => {
         }
         pairs.push(["language", checkout.language]);
         pairs.push(["sdk", pkg.version]);
-        const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
+        const urlQuery = pairs.filter(([_key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
         checkout.iframe.setAttribute("src", composeUrl(endpoint, "embedResult/", urlQuery));
         handler(event, checkout);
       }
@@ -1448,6 +1459,9 @@ const embed = async options => {
   }, {
     handler: scrollToIframeTop,
     eventTypes: [InternalCheckoutEvents.ScrollToTop]
+  }, {
+    handler: followHref,
+    eventTypes: [InternalCheckoutEvents.TopLevelNavigation]
   }, {
     handler: wrappedOnLoadedOrUpdated,
     eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
@@ -1499,10 +1513,10 @@ const embed = async options => {
     session: undefined,
     popOutWindow: undefined
   };
-  handlers.forEach(({
+  for (const {
     handler,
     eventTypes
-  }) => {
+  } of handlers) {
     if (handler) {
       subscriptions.push(subscribe({
         sid,
@@ -1513,7 +1527,7 @@ const embed = async options => {
         source: checkout.iframe.contentWindow
       }));
     }
-  });
+  }
 
   // Add iframe to DOM
   await initiate();