fix(POS-1250): stretch 3ds iframe for whole height of device on mobile

Author: jakubjasinsky

src/processout/actionhandler.ts

@@ -84,6 +84,9 @@ module ProcessOut {
         public static ThreeDSChallengeFlowNoIframe = "three-d-s-challenge-flow-no-iframe";
         public static ThreeDSFingerprintFlow = "three-d-s-fingerprint-flow";
 
+        // Specifies if merchant provided iframe override
+        public iframeOverriden: boolean = false;
+
         /**
          *
          * @param actionType gateway string
@@ -146,6 +149,7 @@ module ProcessOut {
                 this.flow = ActionFlow.IFrame;
                 this.iframeWidth = override.width;
                 this.iframeHeight = override.height;
+                this.iframeOverriden = true
             }
         }
     }
@@ -228,9 +232,12 @@ module ProcessOut {
                 iframeWrapper.style.width = "100%";
                 iframeWrapper.setAttribute("style", "position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999999; overflow: auto;");
 
+                const cancelButtonWrapperHeight = 80;
+                const calculatedIframeHeight = this.calculateIframeHeight(cancelButtonWrapperHeight);
+
                 // Create the iframe to be used later
                 var iframe = document.createElement("iframe");
-                iframe.setAttribute("style", `margin: 1em auto; width: ${this.options.iframeWidth}px; height: ${this.options.iframeHeight}px; max-width: 100%; max-height: 100%; display: block; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); background-color: #ECEFF1; background-image: url("${this.instance.endpoint("js", "/images/loader.gif")}"); background-repeat: no-repeat; background-position: center;")`);
+                iframe.setAttribute("style", `margin: 1em auto; width: ${this.options.iframeWidth}px; height: ${calculatedIframeHeight}; max-width: 100%; max-height: 100%; display: block; box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07); background-color: #ECEFF1; background-image: url("${this.instance.endpoint("js", "/images/loader.gif")}"); background-repeat: no-repeat; background-position: center;")`);
                 iframe.setAttribute("frameborder", "0");
                 iframe.onload = function() {
                     // Remove the background loader once it is actually loaded
@@ -239,7 +246,7 @@ module ProcessOut {
 
                 // And create the cancel button
                 var buttonWrapper = document.createElement("div");
-                buttonWrapper.setAttribute("style", "width: 150px; text-align: center; margin: 0 auto 1em auto;");
+                buttonWrapper.setAttribute("style", `width: 150px; height: ${cancelButtonWrapperHeight}px; text-align: center; margin: 0 auto 1em auto;`);
                 var button = document.createElement("div");
                 button.setAttribute("style", "cursor: pointer; color: white;");
                 button.innerHTML = Translator.translateMessage("label.cancel", "Cancel");
@@ -551,6 +558,24 @@ module ProcessOut {
             return this.canceled;
         }
 
+        private calculateIframeHeight(cancelButtonWrapperHeight: number) {
+            const defaultIframeHeight = `${this.options.iframeHeight}px`;
+  
+            // always respect merchant specified height
+            if (this.options.iframeOverriden) {
+              return defaultIframeHeight;
+            }
+  
+            // For mobile devices we want to make iframe stretch for the whole height of screen
+            // minus the cancel button wrapper height. This is to make sure that content of iframe
+            // is not cut off.
+            if (window && window.innerWidth < 500) {
+              return `calc(100% - ${cancelButtonWrapperHeight}px)`;
+            }
+  
+            return defaultIframeHeight;
+          }
+
     }
 
 }