Skip to content

Commit

Permalink
Mobile fixed some problems
Browse files Browse the repository at this point in the history
  • Loading branch information
Wilmer Rojas committed Sep 25, 2015
1 parent 8c433c8 commit 24146aa
Show file tree
Hide file tree
Showing 2 changed files with 242 additions and 17 deletions.
257 changes: 241 additions & 16 deletions lib/rxp-hpp.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
/*
* rxp-hpp.js
* https://github.com/realexpayments-developers/rxp-js
*
* Copyright (c) 2015 Realex Developer
* Licensed under the MIT license.
/*! rxp-js - v1.1.1 - 2015-08-17
* The official Realex Payments JS SDK
* https://github.com/realexpayments/rxp-js
* Licensed MIT
*/
/*jslint browser:true */
var RealexHpp = (function() {
Expand All @@ -18,6 +16,10 @@ var RealexHpp = (function() {
hppUrl = url;
};

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;


// Initialising some variables used throughout this file.
var RxpLightbox = (function() {

Expand All @@ -30,10 +32,27 @@ var RealexHpp = (function() {
var closeButton;

var token;

var isLandscape = checkDevicesOrientation();

if(isIOS && isMobileXS || isMobileXS){
if(window.addEventListener){
window.addEventListener("orientationchange", function() {
isLandscape = checkDevicesOrientation();
}, false);
}
}

function checkDevicesOrientation(){
if(window.orientation === 90 || window.orientation === -90){
return true;
}else{
return false;
}
}

// Initialising some variables used throughout this function.
function createOverlay() {

var overlay = document.createElement("div");
overlay.setAttribute("id", "rxp-overlay-" + randomId);
overlay.style.position="fixed";
Expand All @@ -44,6 +63,13 @@ var RealexHpp = (function() {
overlay.style.transition="all 0.3s ease-in-out";
overlay.style.zIndex="100";

if(isIOS && isMobileXS){
overlay.style.position="absolute !important";
overlay.style.WebkitOverflowScrolling = "touch";
overlay.style.overflowX = "hidden";
overlay.style.overflowY = "scroll";
}

document.body.appendChild(overlay);

setTimeout(function() {
Expand All @@ -65,6 +91,21 @@ var RealexHpp = (function() {
closeButton.style.opacity = "1";
},500);

if(isIOS && isMobileXS || isMobileXS){
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.addEventListener("click", closeModal, true);
overlayElement.appendChild(closeButton);
}
Expand All @@ -86,6 +127,7 @@ var RealexHpp = (function() {
spinner.style.marginLeft="-15px";
spinner.style.top="120px";


document.body.appendChild(spinner);

//Create the iframe
Expand All @@ -98,9 +140,7 @@ var RealexHpp = (function() {

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

iFrame.style.top="40px";
iFrame.style.left="50%";
iFrame.style.marginLeft="-180px";

iFrame.style.zIndex="10001";
iFrame.style.position="absolute";
iFrame.style.transition="transform 0.5s ease-in-out";
Expand All @@ -109,6 +149,27 @@ var RealexHpp = (function() {

overlayElement.appendChild(iFrame);


if(isIOS && isMobileXS || isMobileXS){
iFrame.style.top = "0px";
iFrame.style.bottom = "0px";
iFrame.style.left = "0px";
iFrame.style.marginLeft = "0px;";
iFrame.style.width = "100%";
iFrame.style.height = "100%";
iFrame.style.minHeight = "100%";
iFrame.style.WebkitTransform = "translate3d(0,0,0)";
iFrame.style.transform = "translate3d(0, 0, 0)";
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}else{
iFrame.style.top="40px";
iFrame.style.left="50%";
iFrame.style.marginLeft="-180px";
}

iFrame.onload = function() {
iFrame.style.opacity="1";
iFrame.style.transform="scale(1)";
Expand Down Expand Up @@ -151,6 +212,7 @@ var RealexHpp = (function() {

form.appendChild(hppOrigin);


if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
} else {
Expand Down Expand Up @@ -193,7 +255,9 @@ var RealexHpp = (function() {
},
setToken : function(hppToken) {
token = hppToken;
}
},
isMobileXS : isMobileXS,
isIOS: isIOS
};
}

Expand Down Expand Up @@ -229,18 +293,29 @@ var RealexHpp = (function() {
}

function receiveMessage(event) {

console.log(event);
// check for iframe resize values
if (event.data && JSON.parse(event.data).iframe) {
var jsonData = JSON.parse(event.data);
var iframeWidth = jsonData.iframe.width;
var iframeHeight = jsonData.iframe.height;
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";
iFrame.style.marginLeft = (parseInt(iframeWidth.replace("px", ""), 10)/2 * -1 ) + "px";

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";
Expand Down Expand Up @@ -291,3 +366,153 @@ var RealexHpp = (function() {
};

}());

var RealexRemote = (function() {

'use strict';

/*
* Validate Card Number. Returns true if card number valid. Only allows
* non-empty numeric values between 12 and 19 characters. A Luhn check is
* also run against the card number.
*/
var validateCardNumber = function(cardNumber) {
// test numeric and length between 12 and 19
if (!/^\d{12,19}$/.test(cardNumber)) {
return false;
}

// luhn check
var sum = 0;
var digit = 0;
var addend = 0;
var timesTwo = false;

for (var i = cardNumber.length - 1; i >= 0; i--) {
digit = parseInt(cardNumber.substring(i, i + 1), 10);
if (timesTwo) {
addend = digit * 2;
if (addend > 9) {
addend -= 9;
}
} else {
addend = digit;
}
sum += addend;
timesTwo = !timesTwo;
}

var modulus = sum % 10;
if (modulus !== 0) {
return false;
}

return true;
};

/*
* Validate Card Holder Name. Returns true if card holder valid. Only allows
* non-empty ISO/IEC 8859-1 values 100 characters or less.
*/
var validateCardHolderName = function(cardHolderName) {
// test for undefined
if (!cardHolderName) {
return false;
}

// test white space only
if (!cardHolderName.trim()) {
return false;
}

// test ISO/IEC 8859-1 characters between 1 and 100
if (!/^[\u0020-\u007E\u00A0-\u00FF]{1,100}$/.test(cardHolderName)) {
return false;
}

return true;
};

/*
* Validate CVN. Applies to non-Amex card types. Only allows 3 numeric
* characters.
*/
var validateCvn = function(cvn) {
// test numeric length 3
if (!/^\d{3}$/.test(cvn)) {
return false;
}

return true;
};

/*
* Validate Amex CVN. Applies to Amex card types. Only allows 4 numeric
* characters.
*/
var validateAmexCvn = function(cvn) {
// test numeric length 4
if (!/^\d{4}$/.test(cvn)) {
return false;
}

return true;
};

/*
* Validate Expiry Date Format. Only allows 4 numeric characters. Month must
* be between 1 and 12.
*/
var validateExpiryDateFormat = function(expiryDate) {

// test numeric of length 4
if (!/^\d{4}$/.test(expiryDate)) {
return false;
}

var month = parseInt(expiryDate.substring(0, 2), 10);
var year = parseInt(expiryDate.substring(2, 4), 10);

// test month range is 1-12
if (month < 1 || month > 12) {
return false;
}

return true;
};

/*
* Validate Expiry Date Not In Past. Also runs checks from
* validateExpiryDateFormat.
*/
var validateExpiryDateNotInPast = function(expiryDate) {
// test valid format
if (!validateExpiryDateFormat(expiryDate)) {
return false;
}

var month = parseInt(expiryDate.substring(0, 2), 10);
var year = parseInt(expiryDate.substring(2, 4), 10);

// test date is not in the past
var now = new Date();
var currentMonth = now.getMonth() + 1;
var currentYear = now.getFullYear();
if (year < (currentYear % 100)) {
return false;
} else if (year === (currentYear % 100) && month < currentMonth) {
return false;
}

return true;
};

return {
validateCardNumber : validateCardNumber,
validateCardHolderName : validateCardHolderName,
validateCvn : validateCvn,
validateAmexCvn : validateAmexCvn,
validateExpiryDateFormat : validateExpiryDateFormat,
validateExpiryDateNotInPast : validateExpiryDateNotInPast
};
}());
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "rxp-js",
"description": "The official Realex Payments JS SDK",
"version": "1.1.0",
"version": "1.1.1",
"homepage": "https://github.com/realexpayments/rxp-js",
"author": {
"name": "Realex Developer",
Expand Down

0 comments on commit 24146aa

Please sign in to comment.