Skip to content

Commit

Permalink
add hpp embedded
Browse files Browse the repository at this point in the history
  • Loading branch information
@slogsdon
slogsdon committed Oct 4, 2017
1 parent 3e4eff1 commit e9e8317
Show file tree
Hide file tree
Showing 8 changed files with 269 additions and 29 deletions.
111 changes: 99 additions & 12 deletions dist/rxp-js.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,7 +286,7 @@ var RealexHpp = (function () {
return internal.getHostnameFromUrl(origin) === internal.getHostnameFromUrl(hppUrl);
},

receiveMessage: function (lightboxInstance, merchantUrl) {
receiveMessage: function (lightboxInstance, merchantUrl, isEmbedded) {
return function (event) {
//Check the origin of the response comes from HPP
if (!internal.isMessageFromHpp(event.origin, hppUrl)) {
Expand All @@ -299,30 +299,40 @@ var RealexHpp = (function () {
var iframeWidth = JSON.parse(event.data).iframe.width;
var iframeHeight = JSON.parse(event.data).iframe.height;

var iFrame = document.getElementById("rxp-frame-" + randomId);
var iFrame;
if (isEmbedded) {
iFrame = lightboxInstance.getIframe();
} else {
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 {
if (!isEmbedded) {
var overlay = document.getElementById("rxp-overlay-" + randomId);
overlay.style.overflowX = "scroll";
overlay.style.overflowY = "scroll";
}
} else if (!isEmbedded) {
iFrame.style.marginLeft = (parseInt(iframeWidth.replace("px", ""), 10) / 2 * -1) + "px";
}

// wrap the below in a setTimeout to prevent a timing issue on a
// cache-miss load
setTimeout(function () {
var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10) / 2) -7) + "px";
}, 200);
if (!isEmbedded) {
// wrap the below in a setTimeout to prevent a timing issue on a
// cache-miss load
setTimeout(function () {
var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10) / 2) -7) + "px";
}, 200);
}
}
} else {
if (isMobileNewTab && tabWindow) {
Expand Down Expand Up @@ -424,6 +434,80 @@ var RealexHpp = (function () {
};
})();

// Initialising some variables used throughout this file.
var RxpEmbedded = (function () {
var instance;

function init() {
var overlayElement;
var spinner;
var iFrame;
var closeButton;
var token;

return {
embedded: function () {
var form = internal.createForm(document, token);
if (iFrame) {
if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
} else {
iFrame.contentWindow.document.appendChild(form);
}
form.submit();
iFrame.style.display = "inherit";
}
},
close: function () {
iFrame.style.display = "none";
},
setToken: function (hppToken) {
token = hppToken;
},
setIframe: function (iframeId) {
iFrame = document.getElementById(iframeId);
},
getIframe: function () {
return iFrame;
}
};
}

return {
// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function (hppToken) {
if (!instance) {
instance = init();
}

//Set the hpp token
instance.setToken(hppToken);

return instance;
},
init: function (idOfEmbeddedButton, idOfTargetIframe, merchantUrl, serverSdkJson) {
//Get the embedded instance (it's a singleton) and set the sdk json
var embeddedInstance = RxpEmbedded.getInstance(serverSdkJson);

embeddedInstance.setIframe(idOfTargetIframe);

// Sets the event listener on the PAY button. The click will invoke the embedded method
if (document.getElementById(idOfEmbeddedButton).addEventListener) {
document.getElementById(idOfEmbeddedButton).addEventListener("click", embeddedInstance.embedded, true);
} else {
document.getElementById(idOfEmbeddedButton).attachEvent('onclick', embeddedInstance.embedded);
}

if (window.addEventListener) {
window.addEventListener("message", internal.receiveMessage(embeddedInstance, merchantUrl, true), false);
} else {
window.attachEvent('message', internal.receiveMessage(embeddedInstance, merchantUrl, true));
}
}
};
})();

var RxpRedirect = (function () {
var instance;

Expand Down Expand Up @@ -494,6 +578,9 @@ var RealexHpp = (function () {
lightbox: {
init: RxpLightbox.init
},
embedded: {
init: RxpEmbedded.init
},
redirect: {
init: RxpRedirect.init
},
Expand Down
2 changes: 1 addition & 1 deletion dist/rxp-js.min.js
View file

Large diffs are not rendered by default.

29 changes: 29 additions & 0 deletions examples/hpp/process-a-payment-embedded.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<title>HPP Lightbox Demo</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/dist/rxp-js.js"></script>
<script>
RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
// get the HPP JSON from the server-side SDK
$(document).ready(function () {
$.getJSON("/examples/hpp/proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
RealexHpp.embedded.init(
"payButtonId",
"targetIframe",
"https://dev.rlxcarts.com/mobileSDKsV2/response.php",
jsonFromServerSdk
);
$('body').addClass('loaded');
});
});
</script>
</head>
<body>
<input type="submit" id="payButtonId" value="Checkout Now" />
<br />
<iframe id="targetIframe" style="display:none;"></iframe>
</body>
</html>
0 examples/hpp/process-a-payment.html → examples/hpp/process-a-payment-lightbox.html
View file
File renamed without changes.
111 changes: 99 additions & 12 deletions lib/rxp-hpp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,7 +282,7 @@ var RealexHpp = (function () {
return internal.getHostnameFromUrl(origin) === internal.getHostnameFromUrl(hppUrl);
},

receiveMessage: function (lightboxInstance, merchantUrl) {
receiveMessage: function (lightboxInstance, merchantUrl, isEmbedded) {
return function (event) {
//Check the origin of the response comes from HPP
if (!internal.isMessageFromHpp(event.origin, hppUrl)) {
Expand All @@ -295,30 +295,40 @@ var RealexHpp = (function () {
var iframeWidth = JSON.parse(event.data).iframe.width;
var iframeHeight = JSON.parse(event.data).iframe.height;

var iFrame = document.getElementById("rxp-frame-" + randomId);
var iFrame;
if (isEmbedded) {
iFrame = lightboxInstance.getIframe();
} else {
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 {
if (!isEmbedded) {
var overlay = document.getElementById("rxp-overlay-" + randomId);
overlay.style.overflowX = "scroll";
overlay.style.overflowY = "scroll";
}
} else if (!isEmbedded) {
iFrame.style.marginLeft = (parseInt(iframeWidth.replace("px", ""), 10) / 2 * -1) + "px";
}

// wrap the below in a setTimeout to prevent a timing issue on a
// cache-miss load
setTimeout(function () {
var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10) / 2) -7) + "px";
}, 200);
if (!isEmbedded) {
// wrap the below in a setTimeout to prevent a timing issue on a
// cache-miss load
setTimeout(function () {
var closeButton = document.getElementById("rxp-frame-close-" + randomId);
closeButton.style.marginLeft = ((parseInt(iframeWidth.replace("px", ""), 10) / 2) -7) + "px";
}, 200);
}
}
} else {
if (isMobileNewTab && tabWindow) {
Expand Down Expand Up @@ -420,6 +430,80 @@ var RealexHpp = (function () {
};
})();

// Initialising some variables used throughout this file.
var RxpEmbedded = (function () {
var instance;

function init() {
var overlayElement;
var spinner;
var iFrame;
var closeButton;
var token;

return {
embedded: function () {
var form = internal.createForm(document, token);
if (iFrame) {
if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
} else {
iFrame.contentWindow.document.appendChild(form);
}
form.submit();
iFrame.style.display = "inherit";
}
},
close: function () {
iFrame.style.display = "none";
},
setToken: function (hppToken) {
token = hppToken;
},
setIframe: function (iframeId) {
iFrame = document.getElementById(iframeId);
},
getIframe: function () {
return iFrame;
}
};
}

return {
// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function (hppToken) {
if (!instance) {
instance = init();
}

//Set the hpp token
instance.setToken(hppToken);

return instance;
},
init: function (idOfEmbeddedButton, idOfTargetIframe, merchantUrl, serverSdkJson) {
//Get the embedded instance (it's a singleton) and set the sdk json
var embeddedInstance = RxpEmbedded.getInstance(serverSdkJson);

embeddedInstance.setIframe(idOfTargetIframe);

// Sets the event listener on the PAY button. The click will invoke the embedded method
if (document.getElementById(idOfEmbeddedButton).addEventListener) {
document.getElementById(idOfEmbeddedButton).addEventListener("click", embeddedInstance.embedded, true);
} else {
document.getElementById(idOfEmbeddedButton).attachEvent('onclick', embeddedInstance.embedded);
}

if (window.addEventListener) {
window.addEventListener("message", internal.receiveMessage(embeddedInstance, merchantUrl, true), false);
} else {
window.attachEvent('message', internal.receiveMessage(embeddedInstance, merchantUrl, true));
}
}
};
})();

var RxpRedirect = (function () {
var instance;

Expand Down Expand Up @@ -490,6 +574,9 @@ var RealexHpp = (function () {
lightbox: {
init: RxpLightbox.init
},
embedded: {
init: RxpEmbedded.init
},
redirect: {
init: RxpRedirect.init
},
Expand Down
35 changes: 35 additions & 0 deletions specs/functional/hpp/embedded-positives_spec.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
define(function (require) {
var bdd = require('intern!bdd');
var assert = require('intern/chai!assert');
var successHelper = require('intern/dojo/node!../../helpers/hpp').iframeSuccessHelper;

bdd.describe('RealexRemote - HPP Embedded Positive Tests', function () {
bdd.it('should process a payment successfully',
successHelper(
// url
require.toUrl('http://localhost:8989/examples/hpp/process-a-payment-embedded.html'),
// iframe selector
'#targetIframe',
// fields to enter
[
{ name: 'pas_ccnum', type: 'text', value: '4111111111111111' },
{ name: 'pas_expiry', type: 'text', value: '1225' },
{ name: 'pas_cccvc', type: 'text', value: '012' },
{ name: 'pas_ccname', type: 'text', value: 'Jane Doe' },
],
// callback to assert against result
function (command) {
return command
.execute(() => document.body.innerText)
.then(function (text) {
// make our assertions on the HPP response
var json = JSON.parse(text);
json = JSON.parse(json.response);
assert.isOk(json.AUTHCODE);
})
.end();
}
).bind(this)
);
});
});
6 changes: 4 additions & 2 deletions specs/functional/hpp/lightbox-positives_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ define(function (require) {
var assert = require('intern/chai!assert');
var successHelper = require('intern/dojo/node!../../helpers/hpp').iframeSuccessHelper;

bdd.describe('RealexRemote - HPP Positive Tests', function () {
bdd.describe('RealexRemote - HPP Lightbox Positive Tests', function () {
bdd.it('should process a payment successfully',
successHelper(
// url
require.toUrl('http://localhost:8989/examples/hpp/process-a-payment.html'),
require.toUrl('http://localhost:8989/examples/hpp/process-a-payment-lightbox.html'),
// iframe selector
'[id^="rxp-frame-"]',
// fields to enter
[
{ name: 'pas_ccnum', type: 'text', value: '4111111111111111' },
Expand Down
Loading

0 comments on commit e9e8317

Please sign in to comment.