Added a logger for the steps performed by the library

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
 

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.
 

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
 	};
 

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('<div class="alert alert-success">All set!</div>');
-							//success
-							success(answer);
-						}
-						else {
-							//error
+                            //success
+                            success(answer);
+                        }
+                        else {
+                            //error
                             $('.paymentResult').html('<div class="alert alert-danger">'+answer.MESSAGE+'</div>');
                             //would you retry? This part should be handled at the rxp side, stay in the modal/iframe... TODO
-						}
-					},
+                        }
+                    },
                     jsonFromServerSdk
                 );
                 $('body').addClass('loaded');

examples/hpp/process-a-payment-embedded.html

@@ -13,6 +13,13 @@
     <script src="./../../dist/rxp-js.js"></script>
     <script>
         RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
+
+        // Enable the logger. Should be used for debugging only.
+        RealexHpp.setConfigItem('enableLogging', true);
+        window.addEventListener(RealexHpp.constants.logEventName, function(e) {
+            console.log(e.detail);
+        });
+
         // get the HPP JSON from the server-side SDK
         $(document).ready(function () {
             $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {

examples/hpp/process-a-payment-lightbox-callback.html

@@ -15,19 +15,19 @@
                 RealexHpp.lightbox.init(
                     'payButtonId',
                     function (answer, close) {
-						console.log('embed answer: ', answer)
-						close();
-						if (answer.AUTHCODE){
+                        console.log('embed answer: ', answer)
+                        close();
+                        if (answer.AUTHCODE) {
                             $('.paymentResult').html('<div class="alert alert-success">All set!</div>');
-							//success
-							success(answer);
-						}
-						else {
-							//error
+                            //success
+                            success(answer);
+                        }
+                        else {
+                            //error
                             $('.paymentResult').html('<div class="alert alert-danger">'+answer.MESSAGE+'</div>');
                             //would you retry? This part should be handled at the rxp side, stay in the modal/iframe... TODO
-						}
-					},
+                        }
+                    },
                     jsonFromServerSdk   //form data
                 );
                 $('body').addClass('loaded');

examples/hpp/process-a-payment-lightbox.html

@@ -8,6 +8,13 @@
     <script src="./helper.js"></script>
     <script>
         RealexHpp.setHppUrl('https://pay.sandbox.realexpayments.com/pay');
+
+        // Enable the logger. Should be used for debugging only.
+        RealexHpp.setConfigItem('enableLogging', true);
+        window.addEventListener(RealexHpp.constants.logEventName, function(e) {
+            console.log(e.detail);
+        });
+
         // get the HPP JSON from the server-side SDK
         $(document).ready(function () {
             $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {