diff --git a/package.json b/package.json index 2da86cdb..b114a2b9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "processout.js", - "version": "1.0.5", + "version": "1.0.6", "description": "ProcessOut.js is a JavaScript library for ProcessOut's payment processing API.", "scripts": { "build:processout": "tsc -p src/processout && uglifyjs --compress --keep-fnames --ie8 dist/processout.js -o dist/processout.js", diff --git a/src/processout/actionhandler.ts b/src/processout/actionhandler.ts index 62ac9eeb..8f6e429e 100644 --- a/src/processout/actionhandler.ts +++ b/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; + } + } }