Merge pull request #57 from ahumulescu/feature/tr-161-allow-unified-p…

…ayments-communication Allow Unified Payments Communication
globalpayments · Jun 13, 2023 · 03cf2b8 · 03cf2b8
2 parents 80cc3c2 + 5c7237d
commit 03cf2b8
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,12 @@
+<a href="https://github.com/globalpayments" target="_blank">
+    <img src="https://developer.globalpay.com/static/media/logo.dab7811d.svg" alt="Global Payments logo" title="Global Payments" align="right" width="225" />
+</a>
+
+# Changelog
+
+## Latest Version
+#### Enhancements:
+- Allow the communication from Unified Payments
+- Update for the code examples
+
+---
diff --git a/dist/rxp-js.js b/dist/rxp-js.js
@@ -1,4 +1,4 @@
-/*! rxp-js - v1.5.1 - 2021-09-07
+/*! rxp-js - v1.5.2 - 2023-06-08
  * The official Realex Payments JS Library
  * https://github.com/realexpayments/rxp-js
  * Licensed MIT
@@ -19,6 +19,11 @@ var RealexHpp = (function () {
 
 	var hppUrl = "https://pay.realexpayments.com/pay";
 
+	var allowedHppUrls = [
+		'https://pay.realexpayments.com/pay',
+		'https://pay.sandbox.realexpayments.com/pay'
+	];
+
 	var randomId = randomId || Math.random().toString(16).substr(2,8);
 
 	var setHppUrl = function(url) {
@@ -549,6 +554,23 @@ var RealexHpp = (function () {
 			return internal.getUrlParser(url).hostname;
 		},
 
+		/**
+		 * Checks if the origin is HPP.
+		 *
+		 * @param {string} origin
+		 * @returns {boolean}
+		 */
+		isHppOrigin: function(origin) {
+			var result = false;
+			allowedHppUrls.forEach(function (url) {
+				if (internal.getHostnameFromUrl(url) === origin) {
+					result = true;
+				}
+			});
+
+			return result;
+		},
+
 		/**
 		 * Compares the origins from both arguments to validate we have received a postMessage
 		 * from the expected source
@@ -558,7 +580,8 @@ var RealexHpp = (function () {
 		 * @returns true if the origins match
 		 */
 		isMessageFromHpp: function (origin, hppUrl) {
-			return internal.getHostnameFromUrl(origin) === internal.getHostnameFromUrl(hppUrl);
+			var originHostName = internal.getHostnameFromUrl(origin);
+			return originHostName === internal.getHostnameFromUrl(hppUrl) || internal.isHppOrigin(originHostName);
 		},
 
 		/**

diff --git a/dist/rxp-js.min.js b/dist/rxp-js.min.js
diff --git a/examples/hpp/helper.js b/examples/hpp/helper.js
@@ -0,0 +1,9 @@
+function success(response) {
+    console.log('Successful transaction. Message: ', response.MESSAGE);
+}
+
+$(document).ready(function() {
+    $('#paymentMethod').on('change', function() {
+        RealexHpp.setHppUrl(this.value);
+    });
+});
diff --git a/examples/hpp/process-a-payment-embedded-autoload-callback.html b/examples/hpp/process-a-payment-embedded-autoload-callback.html
@@ -3,36 +3,38 @@
 <head>
     <title>HPP embed 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>
+    <style>
+        #targetIframe {
+            min-height: 600px;
+            min-width: 350px;
+        }
+    </style>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./../../dist/rxp-js.js"></script>
+    <script src="./helper.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) {
+            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                 RealexHpp.embedded.init(
                     "autoload",
                     "targetIframe",
-                    function(answer,close){
-						console.log('embed answer',answer)
+                    function (answer, close) {
+						console.log('embed answer: ', answer)
 						close();
-						if(answer.AUTHCODE){
+						if (answer.AUTHCODE) {
                             $('.paymentResult').html('<div class="alert alert-success">All set!</div>');
 							//success
 							success(answer);
 						}
-						else{
+						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,
-                    {
-                        onResize:function(data){
-							$('#targetIframe').css(data)
-                        }
-                    }
+                    jsonFromServerSdk
                 );
                 $('body').addClass('loaded');
             });

diff --git a/examples/hpp/process-a-payment-embedded-autoload.html b/examples/hpp/process-a-payment-embedded-autoload.html
@@ -3,23 +3,24 @@
 <head>
     <title>HPP embed 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>
+    <style>
+        #targetIframe {
+            min-height: 600px;
+            min-width: 350px;
+        }
+    </style>
+    <script src="//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) {
+            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                 RealexHpp.embedded.init(
                     "autoload",
                     "targetIframe",
-                    "/examples/hpp/response.php",
-                    jsonFromServerSdk,
-                    {
-                        onResize:function(data){
-							$('#targetIframe').css(data)
-                        }
-                    }
+                    "./response.php",
+                    jsonFromServerSdk
                 );
                 $('body').addClass('loaded');
             });

diff --git a/examples/hpp/process-a-payment-embedded.html b/examples/hpp/process-a-payment-embedded.html
@@ -3,23 +3,24 @@
 <head>
     <title>HPP embed 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>
+    <style>
+        #targetIframe {
+            min-height: 600px;
+            min-width: 350px;
+        }
+    </style>
+    <script src="//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) {
+            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                 RealexHpp.embedded.init(
                     "payButtonId",
                     "targetIframe",
-                    "/examples/hpp/response.php",   // merchant url
-                    jsonFromServerSdk,  // form data
-                    {   // options
-                        onResize:function(data){
-							$('#targetIframe').css(data)
-                        }
-                    }
+                    "./response.php",   // merchant url
+                    jsonFromServerSdk  // form data
                 );
                 $('body').addClass('loaded');
             });

diff --git a/examples/hpp/process-a-payment-lightbox-callback.html b/examples/hpp/process-a-payment-lightbox-callback.html
@@ -3,25 +3,26 @@
 <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 src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./../../dist/rxp-js.min.js"></script>
+    <script src="./helper.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) {
+            $.getJSON('./proxy-request.php?slug=process-a-payment', function (jsonFromServerSdk) {
                 RealexHpp.setMobileXSLowerBound(480); // default is 480
                 RealexHpp.lightbox.init(
-                    "payButtonId",
-                    function(answer,close){
-						console.log('embed answer',answer)
+                    'payButtonId',
+                    function (answer, close) {
+						console.log('embed answer: ', answer)
 						close();
-						if(answer.AUTHCODE){
+						if (answer.AUTHCODE){
                             $('.paymentResult').html('<div class="alert alert-success">All set!</div>');
 							//success
 							success(answer);
 						}
-						else{
+						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
@@ -35,6 +36,14 @@
     </script>
 </head>
 <body>
+    <div class="method">
+        <label for="paymentMethod">Payment Method: </label>
+        <select name="paymentMethod" id="paymentMethod">
+            <option value="https://pay.sandbox.realexpayments.com/pay">Ecommerce</option>
+            <option value="https://apis.sandbox.globalpay.com/ucp/hpp/transactions">Unified Payments</option>
+        </select>
+    </div>
     <input type="submit" id="payButtonId" value="Checkout Now" />
+    <div class="paymentResult"></div>
 </body>
 </html>
diff --git a/examples/hpp/process-a-payment-lightbox.html b/examples/hpp/process-a-payment-lightbox.html
@@ -3,16 +3,17 @@
 <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 src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+    <script src="./../../dist/rxp-js.js"></script>
+    <script src="./helper.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) {
+            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
                 RealexHpp.lightbox.init(
                     "payButtonId",
-                    "/examples/hpp/response.php", // merchant url
+                    "./response.php", // merchant url
                     jsonFromServerSdk   //form data
                 );
                 $('body').addClass('loaded');
@@ -21,6 +22,13 @@
     </script>
 </head>
 <body>
+    <div class="method">
+        <label for="paymentMethod">Payment Method: </label>
+        <select name="paymentMethod" id="paymentMethod">
+            <option value="https://pay.sandbox.realexpayments.com/pay">Ecommerce</option>
+            <option value="https://apis.sandbox.globalpay.com/ucp/hpp/transactions">Unified Payments</option>
+        </select>
+    </div>
     <input type="submit" id="payButtonId" value="Checkout Now" />
 </body>
 </html>
diff --git a/examples/hpp/redirect-for-payment.html b/examples/hpp/redirect-for-payment.html
@@ -3,14 +3,18 @@
 <head>
     <title>HPP Redirect 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 src="//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.redirect.init("payButtonId", "https://dev.rlxcarts.com/mobileSDKsV2/response.php", jsonFromServerSdk);
+            $.getJSON("./proxy-request.php?slug=process-a-payment", function (jsonFromServerSdk) {
+                RealexHpp.redirect.init(
+                    "payButtonId",
+                    "https://dev.rlxcarts.com/mobileSDKsV2/response.php",
+                    jsonFromServerSdk
+                );
                 $('body').addClass('loaded');
             });
         });

diff --git a/lib/rxp-hpp.js b/lib/rxp-hpp.js
@@ -15,6 +15,11 @@ var RealexHpp = (function () {
 
 	var hppUrl = "https://pay.realexpayments.com/pay";
 
+	var allowedHppUrls = [
+		'https://pay.realexpayments.com/pay',
+		'https://pay.sandbox.realexpayments.com/pay'
+	];
+
 	var randomId = randomId || Math.random().toString(16).substr(2,8);
 
 	var setHppUrl = function(url) {
@@ -545,6 +550,23 @@ var RealexHpp = (function () {
 			return internal.getUrlParser(url).hostname;
 		},
 
+		/**
+		 * Checks if the origin is HPP.
+		 *
+		 * @param {string} origin
+		 * @returns {boolean}
+		 */
+		isHppOrigin: function(origin) {
+			var result = false;
+			allowedHppUrls.forEach(function (url) {
+				if (internal.getHostnameFromUrl(url) === origin) {
+					result = true;
+				}
+			});
+
+			return result;
+		},
+
 		/**
 		 * Compares the origins from both arguments to validate we have received a postMessage
 		 * from the expected source
@@ -554,7 +576,8 @@ var RealexHpp = (function () {
 		 * @returns true if the origins match
 		 */
 		isMessageFromHpp: function (origin, hppUrl) {
-			return internal.getHostnameFromUrl(origin) === internal.getHostnameFromUrl(hppUrl);
+			var originHostName = internal.getHostnameFromUrl(origin);
+			return originHostName === internal.getHostnameFromUrl(hppUrl) || internal.isHppOrigin(originHostName);
 		},
 
 		/**