@dintero/checkout-web-sdk 0.5.10 → 0.6.0

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

@@ -6,7 +6,7 @@ require('native-promise-only');
 
 var pkg = {
 	name: "@dintero/checkout-web-sdk",
-	version: "0.5.10",
+	version: "0.6.0",
 	description: "Dintero Checkout SDK for web frontends",
 	main: "dist/dintero-checkout-web-sdk.cjs.js",
 	module: "dist/dintero-checkout-web-sdk.esm.js",
@@ -74,6 +74,8 @@ let InternalCheckoutEvents = /*#__PURE__*/function (InternalCheckoutEvents) {
   InternalCheckoutEvents["HeightChanged"] = "HeightChanged";
   InternalCheckoutEvents["LanguageChanged"] = "LanguageChanged";
   InternalCheckoutEvents["ScrollToTop"] = "ScrollToTop";
+  InternalCheckoutEvents["ShowPopOutButton"] = "ShowPopOutButton";
+  InternalCheckoutEvents["HidePopOutButton"] = "HidePopOutButton";
   return InternalCheckoutEvents;
 }({});
 
@@ -95,19 +97,55 @@ const getSessionUrl = options => {
     endpoint,
     language,
     ui,
-    shouldCallValidateSession
+    shouldCallValidateSession,
+    popOut
   } = options;
   if (!endpoint) {
     throw new Error("Invalid endpoint");
   }
-
-  // Compose url for view session endpoint with optional language parameter.
-  let languageParam = language ? `language=${language}` : "";
-  let uiParam = ui ? `ui=${ui}` : "";
-  let sdk = `sdk=${pkg.version}`;
-  let validate = shouldCallValidateSession ? `client_side_validation=true` : undefined;
-  const params = [languageParam, uiParam, sdk, validate].filter(x => x).join("&");
-  return `${endpoint}/v1/view/${sid}${params ? "?" + params : ""}`;
+  const params = new URLSearchParams();
+  params.append('sdk', pkg.version);
+  if (ui) {
+    params.append('ui', ui);
+  }
+  if (language) {
+    params.append('language', language);
+  }
+  if (shouldCallValidateSession) {
+    params.append('client_side_validation', 'true');
+  }
+  if (popOut) {
+    params.append('role', 'pop_out_launcher');
+  }
+  if (endpoint === "https://checkout.dintero.com") {
+    // Default endpoint will redirect via the view endpoint
+    return `${endpoint}/v1/view/${sid}?${params.toString()}`;
+  }
+  // When a custom endpoint is set skip the view redirect endpoint since
+  // custom endpoints like localhost and PR builds does not support the
+  // serverside view flow.
+  params.append('sid', sid);
+  return `${endpoint}/?${params.toString()}`;
+};
+const padTralingSlash = endpoint => endpoint.endsWith('/') ? endpoint : `${endpoint}/`;
+const getPopOutUrl = ({
+  sid,
+  endpoint,
+  language,
+  shouldCallValidateSession
+}) => {
+  if (shouldCallValidateSession) {
+    return `${padTralingSlash(endpoint)}?loader=true`;
+  }
+  const params = new URLSearchParams();
+  params.append('ui', 'fullscreen');
+  params.append('role', 'pop_out_payment');
+  params.append('sid', sid);
+  params.append('sdk', pkg.version);
+  if (language) {
+    params.append('language', language);
+  }
+  return `${endpoint}/?${params.toString()}`;
 };
 
 /**
@@ -172,9 +210,9 @@ const createIframeAsync = (container, endpoint, url) => {
 /**
  * Post a message acknowledgement to the checkout iframe.
  */
-const postAck = (iframe, event) => {
-  if (event.data.mid && iframe.contentWindow) {
-    iframe.contentWindow.postMessage({
+const postAck = (source, event) => {
+  if (event.data.mid && source) {
+    source.postMessage({
       ack: event.data.mid
     }, event.origin || "*");
   }
@@ -218,7 +256,7 @@ const postSessionRefresh = (iframe, sid) => {
 };
 
 /**
- * Post setActivePaymentProductType-event to the checkout iframe.
+ * Post SetActivePaymentProductType-event to the checkout iframe.
  */
 const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
   if (iframe.contentWindow) {
@@ -230,6 +268,67 @@ const postActivePaymentProductType = (iframe, sid, paymentProductType) => {
   }
 };
 
+/**
+ * Post ClosePopOut-event to the checkout iframe.
+ */
+const postValidatePopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ValidatingPopOut",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post OpenPopOutFailed-event to the checkout iframe.
+ */
+const postOpenPopOutFailedEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "OpenPopOutFailed",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post OpenedPopOut-event to the checkout iframe.
+ */
+const postOpenPopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "OpenedPopOut",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post ClosePopOut-event to the checkout iframe.
+ */
+const postClosePopOutEvent = (iframe, sid) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "ClosedPopOut",
+      sid
+    }, "*");
+  }
+};
+
+/**
+ * Post SetLanguage-event to the checkout iframe.
+ */
+const postSetLanguage = (iframe, sid, language) => {
+  if (iframe.contentWindow) {
+    iframe.contentWindow.postMessage({
+      type: "SetLanguage",
+      sid,
+      language
+    }, "*");
+  }
+};
+
 /**
  * Subscribe to events from an iframe given a handler and a set
  * of event types.
@@ -245,13 +344,14 @@ const subscribe = 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 === endpoint;
+    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, event);
+      postAck(checkout.iframe.contentWindow, event);
       handler(event.data, checkout);
     }
   };
@@ -270,10 +370,490 @@ const subscribe = options => {
   };
 };
 
+const getBackdropZIndex = () => {
+  // Iterate all DOM items to get current highest element.
+  const elements = document.getElementsByTagName('*');
+  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) {
+        return zIndex;
+      }
+    } catch (e) {
+      // Ignore errors when getting z-index
+      console.error(e);
+    }
+    return acc;
+  }, 0);
+  if (highest < 9999) {
+    return '9999';
+  }
+  return (highest + 1).toString();
+};
+const STYLE_ID = 'dintero-checkout-sdk-style';
+const BACKDROP_ID = 'dintero-checkout-sdk-backdrop';
+const BACKDROP_DESCRIPTION = 'dintero-checkout-sdk-backdrop-description';
+const FOCUS_CHECKOUT_BUTTON_ID = 'dintero-checkout-sdk-backdrop-focus';
+const CLOSE_BACKDROP_BUTTON_ID = 'dintero-checkout-sdk-backdrop-close';
+const wrapPreventDefault = fn => {
+  // Creates a wrapped function that will invoke preventDefault() to stop
+  // the event from bubbling up the DOM tree.
+  return e => {
+    e.preventDefault();
+    e.stopPropagation();
+    fn();
+    return false;
+  };
+};
+const appendBackdropStyles = () => {
+  // Check if exists before appending to DOM
+  if (document.getElementById(STYLE_ID)) {
+    return;
+  }
+  // Add style to DOM
+  const style = document.createElement('style');
+  style.setAttribute('id', STYLE_ID);
+  style.innerHTML = `
+        @keyframes ${BACKDROP_ID}-fade-in {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+
+        #${BACKDROP_ID} {
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 100vh;
+            width: 100vw;
+            background-color: rgba(0,0,0,0.9);
+            background: radial-gradient(rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.8) 100%);
+            cursor: pointer;
+            animation:  20ms ease-out ${BACKDROP_ID}-fade-in;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            gap: 20px;
+            color: #ffffff;
+            font-family:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+            font-size: 18px;
+            font-weight: 400;
+            line-height: normal;
+            text-rendering: geometricPrecision;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            vertical-align: baseline;
+            line-height: normal;
+        }
+
+        #${BACKDROP_ID} p {
+            padding: 0;
+            margin: 0;
+            border: 0;
+            user-select: none;
+        }
+
+        #${FOCUS_CHECKOUT_BUTTON_ID} {
+            background-color: #efefef !important;
+            color: #000000 !important;
+            font-size: 16px !important;
+            font-weight: 600 !important;
+            border-radius: 200px !important;
+            margin: 0 !important;
+            line-height: normal !important;
+            border: none !important;
+            padding: 10px 20px !important;
+            user-select: none !important;
+            cursor: pointer !important;
+        }
+        #${FOCUS_CHECKOUT_BUTTON_ID}:hover,
+        #${FOCUS_CHECKOUT_BUTTON_ID}:focus {
+            outline: none !important;
+            background-color: #ffffff !important;
+            border: none !important;
+            color: #000000 !important;
+            padding: 10px 20px !important;
+            margin: 0 !important;
+        }
+        #${FOCUS_CHECKOUT_BUTTON_ID}:focus{
+            outline-offset: 2px;
+            outline: 1px #ffffff solid !important;
+        }
+
+        #${CLOSE_BACKDROP_BUTTON_ID} {
+            background: transparent !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            border: none !important;
+            border-radius: 4px !important;
+            height: 24px !important;
+            width: 24px !important;
+            color: #efefef !important;
+            position: absolute !important;
+            top: 16px !important;
+            right: 24px !important;
+            transition: all 200ms ease-out !important;
+            cursor: pointer !important;
+        }
+
+        #${CLOSE_BACKDROP_BUTTON_ID}:hover,
+        #${CLOSE_BACKDROP_BUTTON_ID}:focus {
+            outline: none !important;
+            color: #ffffff !important;
+            border: none !important;
+            background: transparent !important;
+            padding: 0 !important;
+            margin: 0 !important;
+            position: absolute;
+            top: 16px;
+            right: 24px;
+        }
+        #${CLOSE_BACKDROP_BUTTON_ID}:focus{
+            outline: 1px #ffffff solid !important;
+        }
+
+        #${BACKDROP_ID}:before,
+        #${BACKDROP_ID}:after,
+        #${BACKDROP_ID} > *:before,
+        #${BACKDROP_ID} > *:after {
+            content: '';
+            content: none;
+        }
+    `;
+  document.head.appendChild(style);
+};
+const createBackdropDOM = () => {
+  // Dark translucent backdrop element
+  const backdrop = document.createElement('div');
+  backdrop.setAttribute("id", BACKDROP_ID);
+  backdrop.setAttribute("role", "dialog");
+  backdrop.style.zIndex = getBackdropZIndex();
+  return backdrop;
+};
+const createCloseButtonDOM = label => {
+  // Close button for the top right corner
+  const button = document.createElement('button');
+  button.setAttribute("id", CLOSE_BACKDROP_BUTTON_ID);
+  button.setAttribute("type", "button");
+  button.setAttribute("aria-label", label);
+  button.innerHTML = `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            alt="close icon"
+        >
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>`;
+  return button;
+};
+const createDinteroLogoDOM = () => {
+  // Close button for the top right corner
+  const div = document.createElement('div');
+  div.innerHTML = `
+        <svg width="120px" height="22px" viewBox="0 0 630 111" version="1.1" >
+            <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+                <g id="Dintero" fill="#ffffff" fillRule="nonzero">
+                    <path d="M376.23,60.48 L376.23,73.54 L454.13,73.54 C456.31,41.55 435.85,23.71 410.61,23.71 C385.37,23.71 367.09,41.77 367.09,66.79 C367.09,92.03 386.02,110.31 411.91,110.31 C433.02,110.31 448.9,97.25 453.25,82.24 L436.5,82.24 C432.37,89.42 423.88,95.51 411.91,95.51 C395.16,95.51 382.75,83.11 382.75,66.79 C382.75,50.69 394.72,38.5 410.6,38.5 C426.48,38.5 438.45,50.68 438.45,66.79 L444.54,60.48 L376.23,60.48 Z M154.29,17.83 L171.7,17.83 L171.7,0.42 L154.29,0.42 L154.29,17.83 Z M120.34,108.13 L191.27,108.13 L191.27,93.77 L120.34,93.77 L120.34,108.13 Z M156.46,40.24 L156.46,108.13 L171.69,108.13 L171.69,45.47 C171.69,32.85 165.82,25.89 151.89,25.89 L120.34,25.89 L120.34,40.25 L156.46,40.25 L156.46,40.24 Z M499.17,25.88 L464.36,25.88 L464.36,40.24 L483.94,40.24 L484.16,108.13 L499.39,108.13 L499.17,62.44 C499.17,48.51 508.53,40.25 521.58,40.25 L535.29,40.25 L535.29,25.89 L524.41,25.89 C509.18,25.89 501.78,31.33 497.65,41.56 L495.47,47 L499.17,47.65 L499.17,25.88 Z M288.76,25.88 L310.52,25.88 L310.52,6.3 L325.75,6.3 L325.75,25.88 L359.69,25.88 L359.69,40.24 L325.75,40.24 L325.75,93.77 L359.69,93.77 L359.69,108.13 L332.49,108.13 C318.56,108.13 310.51,98.99 310.51,86.37 L310.51,40.24 L288.75,40.24 L288.75,25.88 L288.76,25.88 Z M464.35,108.13 L535.28,108.13 L535.28,93.77 L464.35,93.77 L464.35,108.13 Z M108.6,54.17 C108.6,23.06 85.54,0.43 53.77,0.43 L0.9,0.43 L0.9,108.14 L53.77,108.14 C85.53,108.13 108.6,85.5 108.6,54.17 M248.07,23.71 C234.58,23.71 223.92,31.98 220,41.55 L220,25.88 L204.77,25.88 L204.77,108.13 L220,108.13 L220,66.35 C220,53.08 224.79,38.93 243.72,38.93 C259.39,38.93 267.44,48.07 267.44,67.43 L267.44,108.12 L282.67,108.12 L282.67,64.6 C282.67,35.02 265.91,23.71 248.07,23.71 M586.2,110.31 C611.22,110.31 629.72,92.03 629.72,67.01 C629.72,41.99 611.23,23.71 586.2,23.71 C560.96,23.71 542.68,41.99 542.68,67.01 C542.68,92.03 560.96,110.31 586.2,110.31 M586.2,95.51 C570.32,95.51 558.35,83.33 558.35,67.01 C558.35,50.69 570.32,38.51 586.2,38.51 C602.08,38.51 614.05,50.69 614.05,67.01 C614.05,83.33 602.08,95.51 586.2,95.51 M16.99,92.9 L16.99,15.66 L51.8,15.66 C75.3,15.66 92.05,31.98 92.05,54.61 C92.05,76.8 75.3,92.91 51.8,92.91 L16.99,92.91 L16.99,92.9 Z" id="Shape"></path>
+                </g>
+            </g>
+        </svg>`;
+  return div;
+};
+const createLabelDOM = text => {
+  // Text about the pop out
+  const p = document.createElement('p');
+  p.setAttribute('id', BACKDROP_DESCRIPTION);
+  p.innerText = text;
+  return p;
+};
+const createFocusButtonDOM = text => {
+  // Mock button to give the user a call to action element to click, even
+  // though the entire backdrop (except the close button) returns focus to the
+  // checkout.
+  const button = document.createElement('button');
+  button.setAttribute("id", FOCUS_CHECKOUT_BUTTON_ID);
+  button.setAttribute("type", "button");
+  button.innerText = text;
+  return button;
+};
+const focusTrap = e => {
+  // Prevent the user focusing outside of the backdrop while it is visible
+  const focusButton = document.getElementById(FOCUS_CHECKOUT_BUTTON_ID);
+  const closeButton = document.getElementById(CLOSE_BACKDROP_BUTTON_ID);
+  if (e.key === 'Tab' || e.code === "Tab") {
+    if (document.activeElement === focusButton) {
+      closeButton.focus();
+      e.preventDefault();
+    } else {
+      // Tab
+      focusButton.focus();
+      e.preventDefault();
+    }
+  }
+};
+const createBackdropView = options => {
+  // Add styles needed for the backdrop;
+  appendBackdropStyles();
+  // Create DOM nodes
+  const backdrop = createBackdropDOM();
+  const closeButton = createCloseButtonDOM(options.event.closeLabel);
+  const dinteroLogo = createDinteroLogoDOM();
+  const label = createLabelDOM(options.event.descriptionLabel);
+  const focusButton = createFocusButtonDOM(options.event.focusLabel);
+
+  // Add click handlers
+  backdrop.onclick = wrapPreventDefault(options.focus);
+  focusButton.onclick = wrapPreventDefault(options.focus);
+  closeButton.onclick = wrapPreventDefault(options.close);
+
+  // Add focus trap when backdrop is visible
+  document.addEventListener('keydown', focusTrap);
+
+  // Append to document
+  backdrop.appendChild(closeButton);
+  backdrop.appendChild(dinteroLogo);
+  backdrop.appendChild(label);
+  backdrop.appendChild(focusButton);
+  document.body.appendChild(backdrop);
+  backdrop.focus();
+  return backdrop;
+};
+const setBackdropLabels = event => {
+  const focusButton = document.getElementById(FOCUS_CHECKOUT_BUTTON_ID);
+  if (focusButton) {
+    focusButton.innerText = event.focusLabel;
+  }
+  const description = document.getElementById(BACKDROP_DESCRIPTION);
+  if (description) {
+    description.innerText = event.descriptionLabel;
+  }
+  const closeButton = document.getElementById(CLOSE_BACKDROP_BUTTON_ID);
+  if (closeButton) {
+    closeButton.setAttribute('aria-label', event.descriptionLabel);
+  }
+};
+const createBackdrop = options => {
+  try {
+    // Check if backdrop already exists
+    const backdrop = document.getElementById(BACKDROP_ID);
+    if (backdrop) {
+      return;
+    }
+    return createBackdropView(options);
+  } catch (e) {
+    // Ignore errors when creating backdrop. If it fails we should not
+    // block the payment.
+    console.error(e);
+  }
+};
+const removeBackdrop = () => {
+  try {
+    const backdrop = document.getElementById(BACKDROP_ID);
+    if (backdrop) {
+      document.body.removeChild(backdrop);
+    }
+    document.removeEventListener('keydown', focusTrap);
+  } catch (e) {
+    // Ignore errors when closing backdrop. If it fails we should not stop
+    // the rest of the application from working.
+    console.error(e);
+  }
+};
+
+const OPEN_POP_OUT_BUTTON_ID = "dintero-checkout-sdk-launch-pop-out";
+const configureButton = (button, {
+  label,
+  disabled,
+  top,
+  left,
+  right,
+  styles,
+  onClick
+}) => {
+  button.setAttribute('id', OPEN_POP_OUT_BUTTON_ID);
+  button.setAttribute('type', 'button');
+
+  // Is clickable
+  if (disabled === 'true') {
+    button.setAttribute('disabled', disabled);
+  } else {
+    button.removeAttribute('disabled');
+  }
+
+  // Click handler
+  button.onclick = event => {
+    // Do not submit any form on the page using the SDK
+    event.preventDefault();
+    event.stopPropagation();
+
+    // Update look
+    button.style.boxShadow = 'inset 0 0 10px rgba(34, 84, 65, 0.9)';
+
+    // Invoke handler
+    onClick();
+
+    // Reset look
+    window.setTimeout(() => {
+      button.style.boxShadow = 'none';
+    }, 200);
+  };
+
+  // Label
+  button.innerText = label;
+
+  // Position
+  button.style.position = 'absolute';
+  button.style.top = top + 'px';
+  button.style.left = left + 'px';
+  button.style.right = right + 'px';
+
+  // Appearance from checkout
+  for (const [key, value] of Object.entries(styles)) {
+    button.style[key] = value;
+  }
+};
+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);
+  }
+};
+
+const WIDTH = Math.min(480, window.screen.width);
+const HEIGHT = Math.min(840, window.screen.height);
+let popOutWindow;
+const createPopOutWindow = (url, width, height) => {
+  return new Promise(resolve => {
+    try {
+      // Opens 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`;
+      const popOut = window.open(url, 'dintero-checkout', features);
+      if (!popOut) {
+        console.log('createPopOutWindow no popOut');
+        resolve(undefined);
+        return;
+      }
+      const timeout = window.setTimeout(() => {
+        console.log('createPopOutWindow timeout');
+        resolve(undefined);
+      }, 3000);
+      popOut.addEventListener('load', event => {
+        console.log('createPopOutWindow loaded', {
+          popOut,
+          event
+        });
+        clearTimeout(timeout);
+        resolve(popOut);
+      });
+    } catch (err) {
+      resolve(undefined);
+    }
+  });
+};
+const openPopOut = async options => {
+  let unsubscribe;
+  let intervalId = -1;
+  if (popOutWindow && !popOutWindow.closed) {
+    // Skip if already open.
+    return;
+  }
+
+  // Open popup window
+  const url = getPopOutUrl(options);
+  popOutWindow = await createPopOutWindow(url, WIDTH, 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();
+    }
+  };
+
+  // Close pop out if current window is closed
+  window.addEventListener('beforeunload', closePopOut);
+
+  // Check if checkout is still open
+  intervalId = window.setInterval(checkIfPopupClosed, 200);
+
+  // Set up pub/sub of messages from pop out to SDK
+  unsubscribe = options.onOpen(popOutWindow);
+  return {
+    close: closePopOut,
+    focus: focusPopOut,
+    popOutWindow
+  };
+};
+
 /**
  * An event handler that navigates to the href in the event.
  */
-const followHref = event => {
+const followHref = (event, checkout) => {
+  cleanUpPopOut(checkout);
   if (event.href) {
     windowLocationAssign(event.href);
   }
@@ -299,7 +879,7 @@ const scrollToIframeTop = (event, checkout) => {
       behavior: 'smooth'
     });
   } catch (e) {
-    // Ignore erorr silenty bug log it to the console.
+    // Ignore error silently bug log it to the console.
     console.error(e);
   }
 };
@@ -312,30 +892,247 @@ const setLanguage = (event, checkout) => {
     checkout.language = event.language;
   }
 };
-const handleWithResult = (sid, endpoint, handler) => {
-  return (event, checkout) => {
-    const eventKeys = ["sid", "merchant_reference", "transaction_id", "error"];
-    const pairs = eventKeys.map(key => [key, event[key]]);
-    if (event.type === CheckoutEvents.SessionCancel && !event.error) {
-      pairs.push(["error", "cancelled"]);
+
+/**
+ * Wrap function with try catch so an error in a single function won't short circuit other code in the current context.
+ */
+const safelyInvoke = fn => {
+  try {
+    fn();
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+/**
+ *  Handle messages sendt to the SDK from the pop out.
+ */
+const createPopOutMessageHandler = (source, checkout) => {
+  // Change language in embed if changed in pop out
+  const popOutChangedLanguageHandler = {
+    internalPopOutHandler: true,
+    eventTypes: [InternalCheckoutEvents.LanguageChanged],
+    handler: (eventData, checkout) => {
+      // Tell the embedded checkout to change language.
+      postSetLanguage(checkout.iframe, checkout.options.sid, eventData.language);
+    }
+  };
+
+  // Close pop out, and remove SDK rendered button when payment is completed.
+  const paymentCompletedEvents = [CheckoutEvents.SessionCancel, CheckoutEvents.SessionPaymentOnHold, CheckoutEvents.SessionPaymentAuthorized, CheckoutEvents.SessionPaymentError];
+  const popOutCompletedHandler = {
+    internalPopOutHandler: true,
+    eventTypes: paymentCompletedEvents,
+    handler: (eventData, checkout) => {
+      if (eventData.href) {
+        // Remove open pop out button rendered by SDK
+        removePopOutButton();
+
+        // Close checkout
+        try {
+          source.close();
+        } catch (e) {
+          console.error(e);
+        }
+      } else {
+        console.error('Payment Complete event missing href property');
+      }
+    }
+  };
+
+  // Listens to messages from pop out window and routes the events to dedicated handlers
+  const messageRouter = event => {
+    // 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.
+      [
+      // SDK events for managing the pop out flow.
+      popOutChangedLanguageHandler, popOutCompletedHandler,
+      // Events configured when the checkout was embedded.
+      ...checkout.handlers].forEach(handlerObject => {
+        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
+  window.addEventListener('message', messageRouter);
+
+  // Return unsubscribe function
+  return () => {
+    window.removeEventListener('message', messageRouter);
+  };
+};
+
+/**
+ * Configures and shows the pop out with the payment options.
+ */
+const showPopOut = async (event, checkout) => {
+  const {
+    close,
+    focus,
+    popOutWindow
+  } = await openPopOut({
+    sid: checkout.options.sid,
+    endpoint: checkout.options.endpoint,
+    shouldCallValidateSession: Boolean(checkout.options.onValidateSession),
+    language: event.language,
+    onOpen: popOutWindow => createPopOutMessageHandler(popOutWindow, checkout),
+    onClose: () => {
+      removeBackdrop();
+      postClosePopOutEvent(checkout.iframe, checkout.options.sid);
+      setPopOutButtonDisabled(false);
+      checkout.popOutWindow = undefined;
+    }
+  });
+  if (popOutWindow) {
+    postOpenPopOutEvent(checkout.iframe, checkout.options.sid);
+    // Add pop out window to checkout instance
+    checkout.popOutWindow = popOutWindow;
+    createBackdrop({
+      focus,
+      close,
+      event
+    });
+    return true;
+  } else {
+    postOpenPopOutFailedEvent(checkout.iframe, checkout.options.sid);
+    return false;
+  }
+};
+
+/**
+ * Create callback function for the client side validation flow. It allows the
+ * host application to validate the content of the payment session before the
+ * pop out is opened.
+ */
+const createPopOutValidationCallback = (event, checkout) => {
+  return result => {
+    // Tell the embedded iframe about the validation result so it can show an error message if
+    // the validation failed.
+    postValidationResult(checkout.iframe, checkout.options.sid, result);
+    if (result.success && checkout.popOutWindow) {
+      // Redirect user to session in pop out window
+      checkout.popOutWindow.location.href = getPopOutUrl({
+        sid: checkout.options.sid,
+        endpoint: checkout.options.endpoint,
+        shouldCallValidateSession: false,
+        language: event.language
+      });
+    } else {
+      // Close pop out
+      if (checkout.popOutWindow) {
+        checkout.popOutWindow.close();
+      }
+      // Log validation error to console log.
+      console.error(result.clientValidationError);
     }
-    pairs.push(["language", checkout.language]);
-    pairs.push(["sdk", pkg.version]);
-    const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
-    checkout.iframe.setAttribute("src", `${endpoint}/embedResult/?${urlQuery}`);
-    handler(event, checkout);
   };
 };
 
+/**
+ * Handle click event on the SDK rendered pop out button
+ */
+const handlePopOutButtonClick = async (event, checkout) => {
+  // Disable button while pop out is open
+  const opened = await showPopOut(event, checkout);
+  if (opened && checkout.options.onValidateSession) {
+    // Let the host application validate the payment session before opening checkout.
+
+    // Tell the embedded iframe that we are validating the session
+    postValidatePopOutEvent(checkout.iframe, checkout.options.sid);
+
+    // Create callback function added to the SDK event and onValidateSession attributes
+    const callback = createPopOutValidationCallback(event, checkout);
+
+    // Invoke onValidateSession function defined in checkout options
+    try {
+      checkout.options.onValidateSession({
+        type: CheckoutEvents.ValidateSession,
+        session: checkout.session,
+        callback
+      }, checkout, callback);
+    } catch (e) {
+      console.error(e);
+      postValidationResult(checkout.iframe, checkout.options.sid, {
+        success: false,
+        clientValidationError: 'Validation runtime error'
+      });
+    }
+  }
+};
+
+/**
+ * Type guard for ShowPopOutButton
+ */
+const isShowPopOutButton = event => {
+  return event && event.type === InternalCheckoutEvents.ShowPopOutButton;
+};
+
+/**
+ * Display the SDK rendered pop out button on top of the embedded iframe
+ */
+const handleShowButton = (event, checkout) => {
+  if (isShowPopOutButton(event)) {
+    addPopOutButton({
+      container: checkout.options.innerContainer,
+      label: event.openLabel,
+      top: event.top,
+      left: event.left,
+      right: event.right,
+      styles: event.styles,
+      disabled: event.disabled,
+      onClick: () => handlePopOutButtonClick(event, checkout)
+    });
+    setBackdropLabels(event);
+  }
+};
+
+/**
+ * Remove the pop out button above the embedded iframe
+ */
+const handleRemoveButton = (event, checkout) => {
+  if (event.type === InternalCheckoutEvents.HidePopOutButton) {
+    removePopOutButton();
+  }
+};
+const cleanUpPopOut = checkout => {
+  // Ensures that the pop out is no longer open when the payment is completed or the checkout is destroyed.
+  removePopOutButton();
+  removeBackdrop();
+  if (checkout.popOutWindow) {
+    try {
+      checkout.popOutWindow.close();
+      // Pop out message handlers will be removed when the pop out window is closed
+      // via the interval created by openPopOut.
+    } catch (e) {
+      console.error(e);
+    }
+  }
+};
+
 /**
  * Show a dintero payment session in an embedded iframe.
  */
 const embed = async options => {
+  // Create inner container to offset any styling on the container.
+  const innerContainer = document.createElement('div');
+  innerContainer.style.position = 'relative';
+  innerContainer.style['box-sizing'] = 'border-box';
+  const internalOptions = {
+    endpoint: "https://checkout.dintero.com",
+    innerContainer: innerContainer,
+    ...options
+  };
   const {
     container,
     sid,
     language,
-    endpoint = "https://checkout.dintero.com",
+    endpoint,
     onSession,
     onSessionCancel,
     onPayment,
@@ -345,33 +1142,45 @@ const embed = async options => {
     onSessionLocked,
     onSessionLockFailed,
     onActivePaymentType,
-    onValidateSession
-  } = options;
+    onValidateSession,
+    popOut
+  } = internalOptions;
   let checkout;
   const subscriptions = [];
+  let has_delivered_final_event = false;
 
   // Create iframe
+  container.appendChild(innerContainer);
   const {
     iframe,
     initiate
-  } = createIframeAsync(container, endpoint, getSessionUrl({
+  } = createIframeAsync(innerContainer, endpoint, getSessionUrl({
     sid,
     endpoint,
     language,
     ui: "inline",
-    shouldCallValidateSession: onValidateSession !== undefined
+    shouldCallValidateSession: onValidateSession !== undefined,
+    popOut
   }));
 
   /**
-   * Function that removes the iframe and all event listeners.
+   * Function that removes the iframe, pop out and all event listeners.
    */
   const destroy = () => {
+    cleanUpPopOut(checkout);
     if (iframe) {
+      if (internalOptions.popOut) {
+        // Try to remove backdrop if it exists
+        removeBackdrop();
+      }
       subscriptions.forEach(sub => sub.unsubscribe());
       if (iframe.parentElement) {
-        container.removeChild(iframe);
+        innerContainer.removeChild(iframe);
       }
     }
+    if (innerContainer.parentElement) {
+      container.removeChild(innerContainer);
+    }
   };
 
   /**
@@ -392,7 +1201,8 @@ const embed = async options => {
           resolve(sessionEvent);
         },
         eventTypes: [resolveEvent],
-        checkout
+        checkout,
+        source: checkout.iframe.contentWindow
       }));
       eventSubscriptions.push(subscribe({
         sid,
@@ -402,7 +1212,8 @@ const embed = async options => {
           reject(`Received unexpected event: ${rejectEvent}`);
         },
         eventTypes: [rejectEvent],
-        checkout
+        checkout,
+        source: checkout.iframe.contentWindow
       }));
       action();
     });
@@ -423,9 +1234,44 @@ const embed = async options => {
   const submitValidationResult = result => {
     postValidationResult(iframe, sid, result);
   };
+
+  /**
+   *  Internal result event message handler wrapper, to replace the content of the iframe with a success/or
+   *  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) => {
+    return (event, checkout) => {
+      if (!has_delivered_final_event) {
+        has_delivered_final_event = true;
+        cleanUpPopOut(checkout);
+        const eventKeys = ["sid", "merchant_reference", "transaction_id", "error"];
+        const pairs = eventKeys.map(key => [key, event[key]]);
+        if (event.type === CheckoutEvents.SessionCancel && !event.error) {
+          pairs.push(["error", "cancelled"]);
+        }
+        pairs.push(["language", checkout.language]);
+        pairs.push(["sdk", pkg.version]);
+        const urlQuery = pairs.filter(([key, value]) => value).map(([key, value]) => `${key}=${value}`).join("&");
+        checkout.iframe.setAttribute("src", `${endpoint}/embedResult/?${urlQuery}`);
+        handler(event, checkout);
+      }
+    };
+  };
   const wrappedOnValidateSession = (event, checkout) => {
     if (onValidateSession) {
-      onValidateSession(event, checkout, submitValidationResult);
+      try {
+        onValidateSession({
+          ...event,
+          callback: submitValidationResult
+        }, checkout, submitValidationResult);
+      } catch (e) {
+        console.error(e);
+        submitValidationResult({
+          success: false,
+          clientValidationError: "Validation runtime error"
+        });
+      }
     }
   };
   const wrappedOnSessionLocked = (event, checkout) => {
@@ -433,20 +1279,16 @@ const embed = async options => {
       onSessionLocked(event, checkout, refreshSession);
     }
   };
-
-  // Create checkout object that wraps the destroy function.
-  checkout = {
-    destroy,
-    iframe,
-    language,
-    lockSession,
-    refreshSession,
-    setActivePaymentProductType,
-    submitValidationResult
+  const wrappedOnLoadedOrUpdated = (event, checkout) => {
+    // Update the checkout instance to include the session object
+    checkout.session = event.session;
+    if (onSession) {
+      onSession(event, checkout);
+    }
   };
 
   // Add event handlers (or in some cases add a fallback href handler).
-  [{
+  const handlers = [{
     handler: setLanguage,
     eventTypes: [InternalCheckoutEvents.LanguageChanged]
   }, {
@@ -456,7 +1298,7 @@ const embed = async options => {
     handler: scrollToIframeTop,
     eventTypes: [InternalCheckoutEvents.ScrollToTop]
   }, {
-    handler: onSession,
+    handler: wrappedOnLoadedOrUpdated,
     eventTypes: [CheckoutEvents.SessionLoaded, CheckoutEvents.SessionUpdated]
   }, {
     eventTypes: [CheckoutEvents.SessionPaymentOnHold],
@@ -485,7 +1327,28 @@ const embed = async options => {
   }, {
     handler: wrappedOnValidateSession,
     eventTypes: [CheckoutEvents.ValidateSession]
-  }].forEach(({
+  }, {
+    handler: handleShowButton,
+    eventTypes: [InternalCheckoutEvents.ShowPopOutButton]
+  }, {
+    handler: handleRemoveButton,
+    eventTypes: [InternalCheckoutEvents.HidePopOutButton]
+  }];
+  // Create checkout object that wraps the destroy function.
+  checkout = {
+    destroy,
+    iframe,
+    language,
+    lockSession,
+    refreshSession,
+    setActivePaymentProductType,
+    submitValidationResult,
+    options: internalOptions,
+    handlers,
+    session: undefined,
+    popOutWindow: undefined
+  };
+  handlers.forEach(({
     handler,
     eventTypes
   }) => {
@@ -495,7 +1358,8 @@ const embed = async options => {
         endpoint,
         handler,
         eventTypes,
-        checkout
+        checkout,
+        source: checkout.iframe.contentWindow
       }));
     }
   });