Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS SDK 1.2.0 Pull Request #4

Merged
merged 4 commits into from
Nov 10, 2015
Merged

JS SDK 1.2.0 Pull Request #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4b00496
ATP-790 - Payment window updates for mobile devices
Oct 22, 2015
417d940
ATP-790 - iOS 8 viewport fix
Oct 28, 2015
793b703
Merge remote-tracking branch 'origin/ATP-790' into develop
Oct 29, 2015
bc330e7
Merge remote-tracking branch 'origin/develop'
Oct 29, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
254 changes: 145 additions & 109 deletions dist/rxp-js.js
View file
Open in desktop
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-28
* 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,36 @@ 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() {

//open new window
tabWindow = window.open();
var doc = tabWindow.document;

//add meta tag to new window (needed for iOS 8 bug)
var meta = doc.createElement("meta");
var name = doc.createAttribute("name");
name.value="viewport";
meta.setAttributeNode(name);
var content = doc.createAttribute("content");
content.value="width=device-width";
meta.setAttributeNode(content);
doc.head.appendChild(meta);

//create form, append to new window and submit
var form = createForm(doc);
doc.body.appendChild(form);
form.submit();
}

function closeModal() {
Expand All @@ -243,20 +263,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 +315,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