Skip to content

Commit

Permalink
ATP-790 - Payment window updates for mobile devices
Browse files Browse the repository at this point in the history
  • Loading branch information
Mark Stanford authored and Mark Stanford committed Oct 22, 2015
1 parent ad72cd0 commit 4b00496
Show file tree
Hide file tree
Showing 4 changed files with 278 additions and 220 deletions.
247 changes: 138 additions & 109 deletions dist/rxp-js.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/*! rxp-js - v1.1.1 - 2015-09-25
/*! rxp-js - v1.2.0 - 2015-10-22
* The official Realex Payments JS SDK
* https://github.com/realexpayments/rxp-js
* Licensed MIT
Expand All @@ -15,9 +15,16 @@ var RealexHpp = (function() {
hppUrl = url;
};

var isWindowsMobileOs = /Windows Phone|IEMobile/.test(navigator.userAgent);
var isAndroidOrIOs = /Android|iPad|iPhone|iPod/.test(navigator.userAgent);
var isMobileXS = ( (((window.innerWidth > 0) ? window.innerWidth : screen.width) <= 360 ? true : false) || (((window.innerHeight > 0) ? window.innerHeight : screen.Height) <= 360 ? true : false)) ;
var isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;


// Display IFrame on WIndows Phone OS mobile devices
var isMobileIFrame = isWindowsMobileOs;

// For IOs/Android and small screen devices always open in new tab/window
var isMobileNewTab = !isWindowsMobileOs && (isAndroidOrIOs || isMobileXS);
var tabWindow;

// Initialising some variables used throughout this file.
var RxpLightbox = (function() {
Expand All @@ -29,22 +36,21 @@ var RealexHpp = (function() {
var spinner;
var iFrame;
var closeButton;

var token;
function checkDevicesOrientation(){
if(window.orientation === 90 || window.orientation === -90){
return true;
}else{
return false;
}
}
var isLandscape = checkDevicesOrientation();
if(isIOS && isMobileXS || isMobileXS){
if(isMobileIFrame){
if(window.addEventListener){
window.addEventListener("orientationchange", function() {
window.addEventListener("orientationchange", function() {
isLandscape = checkDevicesOrientation();
}, false);
}
Expand All @@ -61,8 +67,8 @@ var RealexHpp = (function() {
overlay.style.left="0";
overlay.style.transition="all 0.3s ease-in-out";
overlay.style.zIndex="100";
if(isIOS && isMobileXS){
if(isMobileIFrame){
overlay.style.position="absolute !important";
overlay.style.WebkitOverflowScrolling = "touch";
overlay.style.overflowX = "hidden";
Expand All @@ -89,27 +95,56 @@ var RealexHpp = (function() {
setTimeout(function(){
closeButton.style.opacity = "1";
},500);
if(isIOS && isMobileXS || isMobileXS){
if(isMobileIFrame){
closeButton.style.position = "absolute";
closeButton.style.float = "right";
closeButton.style.top = "20px";
closeButton.style.left = "initial";
closeButton.style.marginLeft = "0px";
if(isMobileXS && isLandscape){
closeButton.style.right = "15% !important";
}else{
closeButton.style.right = "20px";
}
closeButton.style.right = "20px";
}



closeButton.addEventListener("click", closeModal, true);
overlayElement.appendChild(closeButton);
}
}

function createForm(doc){
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", hppUrl);

for ( var key in token) {

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", token[key]);

form.appendChild(hiddenField);
}

var hppTemplateType = document.createElement("input");
hppTemplateType.setAttribute("type", "hidden");
hppTemplateType.setAttribute("name", "HPP_TEMPLATE_TYPE");
hppTemplateType.setAttribute("value", "LIGHTBOX");

form.appendChild(hppTemplateType);

var parser = document.createElement('a');
parser.href = window.location.href;
var hppOriginParam = parser.protocol + '//' + parser.host;

var hppOrigin = document.createElement("input");
hppOrigin.setAttribute("type", "hidden");
hppOrigin.setAttribute("name", "HPP_ORIGIN");
hppOrigin.setAttribute("value", hppOriginParam);

form.appendChild(hppOrigin);
return form;
}

function createIFrame() {

//Create the spinner
Expand All @@ -126,7 +161,6 @@ var RealexHpp = (function() {
spinner.style.marginLeft="-15px";
spinner.style.top="120px";


document.body.appendChild(spinner);

//Create the iframe
Expand All @@ -136,10 +170,8 @@ var RealexHpp = (function() {
iFrame.setAttribute("height", "85%");
iFrame.setAttribute("frameBorder", "0");
iFrame.setAttribute("width", "360px");

iFrame.setAttribute("seamless", "seamless");


iFrame.style.zIndex="10001";
iFrame.style.position="absolute";
iFrame.style.transition="transform 0.5s ease-in-out";
Expand All @@ -148,8 +180,7 @@ var RealexHpp = (function() {

overlayElement.appendChild(iFrame);


if(isIOS && isMobileXS || isMobileXS){
if(isMobileIFrame){
iFrame.style.top = "0px";
iFrame.style.bottom = "0px";
iFrame.style.left = "0px";
Expand All @@ -168,7 +199,7 @@ var RealexHpp = (function() {
iFrame.style.left="50%";
iFrame.style.marginLeft="-180px";
}

iFrame.onload = function() {
iFrame.style.opacity="1";
iFrame.style.transform="scale(1)";
Expand All @@ -179,47 +210,29 @@ var RealexHpp = (function() {
createCloseButton();
};

var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", hppUrl);

for ( var key in token) {

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", key);
hiddenField.setAttribute("value", token[key]);

form.appendChild(hiddenField);
}

var hppTemplateType = document.createElement("input");
hppTemplateType.setAttribute("type", "hidden");
hppTemplateType.setAttribute("name", "HPP_TEMPLATE_TYPE");
hppTemplateType.setAttribute("value", "LIGHTBOX");

form.appendChild(hppTemplateType);

var parser = document.createElement('a');
parser.href = window.location.href;
var hppOriginParam = parser.protocol + '//' + parser.host;

var hppOrigin = document.createElement("input");
hppOrigin.setAttribute("type", "hidden");
hppOrigin.setAttribute("name", "HPP_ORIGIN");
hppOrigin.setAttribute("value", hppOriginParam);

form.appendChild(hppOrigin);


var form = createForm(document);
if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
} else {
iFrame.contentWindow.document.appendChild(form);
}

form.submit();
}

function openWindow() {

tabWindow = window.open();
var doc = tabWindow.document;
var form = createForm(doc);

if (doc.body) {
doc.body.appendChild(form);
} else {
doc.appendChild(form);
}

form.submit();
}

function closeModal() {
Expand All @@ -243,20 +256,23 @@ var RealexHpp = (function() {
}
}, 300);
}

return {
lightbox : function() {
createOverlay();
createIFrame();

if(isMobileNewTab){
openWindow();
} else {
createOverlay();
createIFrame();
}
},
close : function() {
closeModal();
},
setToken : function(hppToken) {
token = hppToken;
},
isMobileXS : isMobileXS,
isIOS: isIOS
}
};
}

Expand Down Expand Up @@ -292,55 +308,68 @@ var RealexHpp = (function() {
}

function receiveMessage(event) {
// check for iframe resize values
if (event.data && JSON.parse(event.data).iframe) {
var iframeWidth = JSON.parse(event.data).iframe.width;
var iframeHeight = JSON.parse(event.data).iframe.height;

var iFrame = document.getElementById("rxp-frame-" + randomId);
iFrame.setAttribute("width", iframeWidth);
iFrame.setAttribute("height", iframeHeight);
iFrame.style.backgroundColor="#ffffff";

if(lightboxInstance.isIOS && lightboxInstance.isMobileXS || lightboxInstance.isMobileXS){
var overlay = document.getElementById("rxp-overlay-" + randomId);
iFrame.style.marginLeft = "0px";
iFrame.style.WebkitOverflowScrolling = "touch";
iFrame.style.overflowX = "scroll";
iFrame.style.overflowY = "scroll";
overlay.style.overflowX = "scroll";
overlay.style.overflowY = "scroll";

}else{
iFrame.style.marginLeft = (parseInt(iframeWidth.replace("px", ""), 10)/2 * -1 ) + "px";
}

var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10)/2) -7) + "px";
}

//Check the origin of the response comes from HPP
else if (getHostnameFromUrl(event.origin) === getHostnameFromUrl(hppUrl)) {
if (getHostnameFromUrl(event.origin) === getHostnameFromUrl(hppUrl)) {

//Close the lightbox
lightboxInstance.close();

var response = event.data;
// check for iframe resize values
if (event.data && JSON.parse(event.data).iframe) {
if(!isMobileNewTab){
var iframeWidth = JSON.parse(event.data).iframe.width;
var iframeHeight = JSON.parse(event.data).iframe.height;

var iFrame = document.getElementById("rxp-frame-" + randomId);
iFrame.setAttribute("width", iframeWidth);
iFrame.setAttribute("height", iframeHeight);
iFrame.style.backgroundColor="#ffffff";

if(isMobileIFrame){
var overlay = document.getElementById("rxp-overlay-" + randomId);
iFrame.style.marginLeft = "0px";
iFrame.style.WebkitOverflowScrolling = "touch";
iFrame.style.overflowX = "scroll";
iFrame.style.overflowY = "scroll";
overlay.style.overflowX = "scroll";
overlay.style.overflowY = "scroll";

}else{
iFrame.style.marginLeft = (parseInt(iframeWidth.replace("px", ""), 10)/2 * -1 ) + "px";
}

//Create a form and submit the hpp response to the merchant's response url
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", merchantUrl);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "hppResponse");
hiddenField.setAttribute("value", response);
var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10)/2) -7) + "px";
}

form.appendChild(hiddenField);

document.body.appendChild(form);
} else {

if(isMobileNewTab){
//Close the new window
if(tabWindow){
tabWindow.close();
}
} else {
//Close the lightbox
lightboxInstance.close();
}

var response = event.data;

form.submit();
//Create a form and submit the hpp response to the merchant's response url
var form = document.createElement("form");
form.setAttribute("method", "POST");
form.setAttribute("action", merchantUrl);

var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "hppResponse");
hiddenField.setAttribute("value", response);

form.appendChild(hiddenField);

document.body.appendChild(form);

form.submit();
}
}
}

Expand Down
Loading

0 comments on commit 4b00496

Please sign in to comment.