diff --git a/CHANGELOG.md b/CHANGELOG.md
index 747406d..6a3b6b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,10 @@
# Changelog
-## Latest Version - v1.5.4 (07/02/24)
+## Latest Version - v1.5.5 (10/15/24)
+- Added a logger for the steps performed by the library
+
+## v1.5.4 (07/02/24)
#### Enhancements:
- Allow digital wallets payments when the mode is set to embedded
diff --git a/README.md b/README.md
index 5aea9df..84f36dd 100644
--- a/README.md
+++ b/README.md
@@ -16,6 +16,15 @@ RealexHpp.init(payButtonId, merchantUrl, jsonFromServerSdk[, options]);
* options/events
- onResize (iframe embed) Send resize iframe events so the parent frame can be adjusted
+### Enable the logger
+The following code enables a logger that will emit an event on each step performed by the library. Should be used for debugging only.
+```javascript
+RealexHpp.setConfigItem('enableLogging', true);
+window.addEventListener(RealexHpp.constants.logEventName, function(e) {
+ console.log(e.detail);
+});
+```
+
### Consuming the resulting POST
Once the payment has completed the Realex JSON response will be posted within to the supplied merchantUrl. The name of the field containing the JSON response is hppResponse.
diff --git a/dist/rxp-js.js b/dist/rxp-js.js
index 1822cb0..8948765 100644
--- a/dist/rxp-js.js
+++ b/dist/rxp-js.js
@@ -1,4 +1,4 @@
-/*! rxp-js - v1.5.4 - 2024-07-02
+/*! rxp-js - v1.5.5 - 2024-10-15
* The official Realex Payments JS Library
* https://github.com/realexpayments/rxp-js
* Licensed MIT
@@ -35,6 +35,41 @@ var RealexHpp = (function () {
mobileXSLowerBound = lowerBound;
};
+ var config = {
+ enableLogging: false
+ };
+ var setConfigItem = function(configItem, value) {
+ if (!config.hasOwnProperty(configItem)) {
+ return;
+ }
+ config[configItem] = value;
+ };
+ var constants = {
+ logEventName: 'rxp-log'
+ };
+ var eventMessages = {
+ form: {
+ append: 'Form appended to the iframe',
+ create: 'Hidden form created',
+ submit: 'Form submitted'
+ },
+ iFrame: {
+ create: 'iFrame created',
+ find: 'iFrame found'
+ },
+ initialize: function(mode) {
+ return mode + ' initialized';
+ }
+ }
+ var logEvent = function(message, data = {}) {
+ if (!config.enableLogging) {
+ return;
+ }
+
+ var event = new CustomEvent(constants.logEventName, { detail: { message: message, data: data } });
+ window.dispatchEvent(event);
+ };
+
var isWindowsMobileOs = /Windows Phone|IEMobile/.test(navigator.userAgent);
var isAndroidOrIOs = /Android|iPad|iPhone|iPod/.test(navigator.userAgent);
var isMobileXS = function () {
@@ -454,6 +489,8 @@ var RealexHpp = (function () {
iFrame.style.marginLeft = "-180px";
}
+ logEvent(eventMessages.iFrame.create, { iFrame: iFrame });
+
var closeButton;
iFrame.onload = function () {
@@ -476,13 +513,17 @@ var RealexHpp = (function () {
};
var form = internal.createForm(document, token);
+ logEvent(eventMessages.form.create, { form: form });
if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
+ logEvent(eventMessages.form.append);
} else {
iFrame.contentWindow.document.appendChild(form);
+ logEvent(eventMessages.form.append);
}
form.submit();
+ logEvent(eventMessages.form.submit);
return {
spinner: spinner,
@@ -765,11 +806,12 @@ var RealexHpp = (function () {
return instance;
},
init: function (idOfLightboxButton, merchantUrl, serverSdkJson) {
+ logEvent(eventMessages.initialize('RxpLightbox'));
//Get the lightbox instance (it's a singleton) and set the sdk json
var lightboxInstance = RxpLightbox.getInstance(serverSdkJson);
//if you want the form to load on function call, set to autoload
- if(idOfLightboxButton==='autoload'){
+ if (idOfLightboxButton === 'autoload') {
lightboxInstance.lightbox();
}
// Sets the event listener on the PAY button. The click will invoke the lightbox method
@@ -805,13 +847,18 @@ var RealexHpp = (function () {
return {
embedded: function () {
var form = internal.createForm(document, token);
+ logEvent(eventMessages.form.create, { form: form });
if (iFrame) {
+ logEvent(eventMessages.iFrame.find, { iFrame: iFrame });
if (iFrame.contentWindow.document.body) {
iFrame.contentWindow.document.body.appendChild(form);
+ logEvent(eventMessages.form.append);
} else {
iFrame.contentWindow.document.appendChild(form);
+ logEvent(eventMessages.form.append);
}
form.submit();
+ logEvent(eventMessages.form.submit);
iFrame.style.display = "inherit";
}
},
@@ -846,13 +893,15 @@ var RealexHpp = (function () {
return instance;
},
init: function (idOfEmbeddedButton, idOfTargetIframe, merchantUrl, serverSdkJson,events) {
+ logEvent(eventMessages.initialize('RxpEmbedded'));
+
//Get the embedded instance (it's a singleton) and set the sdk json
var embeddedInstance = RxpEmbedded.getInstance(serverSdkJson);
embeddedInstance.events=events;
embeddedInstance.setIframe(idOfTargetIframe);
//if you want the form to load on function call, set to autoload
- if(idOfEmbeddedButton==='autoload'){
+ if (idOfEmbeddedButton === 'autoload') {
embeddedInstance.embedded();
}
// Sets the event listener on the PAY button. The click will invoke the embedded method
@@ -898,8 +947,10 @@ var RealexHpp = (function () {
return {
redirect: function () {
var form = internal.createForm(document, token, true);
+ logEvent(eventMessages.form.create, { form: form });
document.body.append(form);
form.submit();
+ logEvent(eventMessages.form.submit);
},
setToken: function (hppToken) {
token = hppToken;
@@ -920,6 +971,8 @@ var RealexHpp = (function () {
return instance;
},
init: function (idOfButton, merchantUrl, serverSdkJson) {
+ logEvent(eventMessages.initialize('RxpRedirect'));
+
// Get the redirect instance (it's a singleton) and set the sdk json
var redirectInstance = RxpRedirect.getInstance(serverSdkJson);
redirectUrl = merchantUrl;
@@ -958,6 +1011,8 @@ var RealexHpp = (function () {
},
setHppUrl: setHppUrl,
setMobileXSLowerBound: setMobileXSLowerBound,
+ setConfigItem: setConfigItem,
+ constants: constants,
_internal: internal
};
diff --git a/dist/rxp-js.min.js b/dist/rxp-js.min.js
index 24285fa..e071acc 100644
Binary files a/dist/rxp-js.min.js and b/dist/rxp-js.min.js differ
diff --git a/examples/hpp/process-a-payment-embedded-autoload-callback.html b/examples/hpp/process-a-payment-embedded-autoload-callback.html
index 2c334a9..b2b9463 100644
--- a/examples/hpp/process-a-payment-embedded-autoload-callback.html
+++ b/examples/hpp/process-a-payment-embedded-autoload-callback.html
@@ -21,19 +21,19 @@
"autoload",
"targetIframe",
function (answer, close) {
- console.log('embed answer: ', answer)
- close();
- if (answer.AUTHCODE) {
+ console.log('embed answer: ', answer)
+ close();
+ if (answer.AUTHCODE) {
$('.paymentResult').html('All set!
');
- //success
- success(answer);
- }
- else {
- //error
+ //success
+ success(answer);
+ }
+ else {
+ //error
$('.paymentResult').html(''+answer.MESSAGE+'
');
//would you retry? This part should be handled at the rxp side, stay in the modal/iframe... TODO
- }
- },
+ }
+ },
jsonFromServerSdk
);
$('body').addClass('loaded');
diff --git a/examples/hpp/process-a-payment-embedded.html b/examples/hpp/process-a-payment-embedded.html
index 794e4fe..fdd12dd 100644
--- a/examples/hpp/process-a-payment-embedded.html
+++ b/examples/hpp/process-a-payment-embedded.html
@@ -13,6 +13,13 @@