diff --git a/lib/rxp-hpp.js b/lib/rxp-hpp.js index a61b1be..7a1c6d1 100644 --- a/lib/rxp-hpp.js +++ b/lib/rxp-hpp.js @@ -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() { @@ -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() { @@ -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"; @@ -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() { @@ -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); } @@ -86,6 +127,7 @@ var RealexHpp = (function() { spinner.style.marginLeft="-15px"; spinner.style.top="120px"; + document.body.appendChild(spinner); //Create the iframe @@ -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"; @@ -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)"; @@ -151,6 +212,7 @@ var RealexHpp = (function() { form.appendChild(hppOrigin); + if (iFrame.contentWindow.document.body) { iFrame.contentWindow.document.body.appendChild(form); } else { @@ -193,7 +255,9 @@ var RealexHpp = (function() { }, setToken : function(hppToken) { token = hppToken; - } + }, + isMobileXS : isMobileXS, + isIOS: isIOS }; } @@ -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"; @@ -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 + }; +}()); diff --git a/package.json b/package.json index da4ec6e..a2984b4 100644 --- a/package.json +++ b/package.json @@ -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",