iframe fixed!

public/js/app.js

@@ -0,0 +1,177 @@
+'use strict';
+var payModule = (function(BrowserEnabled, GestPay, configuration, util) {
+  // BrowserEnabled is true if everything is OK
+  if (!BrowserEnabled) {
+    // the browser is NOT supported
+    util.showErrors('', 'Browser not supported!', 'start');
+    return;
+  }
+
+  //If the browser is supported, let's create the payment page.
+  // shopLogin and encryptedString come from "/pay" action (see WsCryptEncrypt.encrypt())
+  GestPay.CreatePaymentPage(
+    configuration.shopLogin,
+    configuration.encryptedString,
+    pageLoadedCallback
+  );
+
+  /**
+	 * After Gestpay has verified the page, created the iFrame, this function is called.
+	 * Here you can check if the loading is valid. For example, if the shopLogin or the encryptedString are invalid,
+	 * you'll get an error inside result.
+	 * @param result
+	 */
+  function pageLoadedCallback(result) {
+    // 10 means everything OK.
+    //if ErrorCode is not 10, an error has occurred
+    //result.ErrorCode will return the Error occurred
+    //Result.ErrorDescription will return the Error Description
+    if (result.ErrorCode != 10) {
+      util.showErrors(
+        result.ErrorCode,
+        result.ErrorDescription,
+        'pageLoadedCallback'
+      );
+      return;
+    }
+
+    // until now, the "Pay" button has been disabled. Since Gestpay has succesfully created the iframe, we can
+    // enable the button.
+    if (document.getElementById('submit')) {
+      document.getElementById('submit').disabled = false;
+      document.getElementById('submit').setAttribute('value', 'Pay');
+    }
+
+    // the PaRes variable is defined during the 3D-Secure process; after the 3D-Secure validation, this file is
+    // re-called with a new PaRes variable. It will be used in "pay-secure.hbs" template.
+    var PaRes = configuration.PaRes;
+
+    if (PaRes) {
+      var transKey = util.getCookie('transKey');
+      handle3Dsecurity(PaRes, transKey);
+    }
+  }
+
+  /**
+	 * This is the only function exposed outside this js module. It is called when the user clicks on "pay".
+	 * It will read data from the form and send the payment to Gestpay. Then, the paymentCompletedCallback is called.
+	 * @returns {boolean} false to say that no other action must occour in the form.
+	 */
+  function checkCC() {
+    document.getElementById('submit').disabled = true;
+    GestPay.SendPayment(
+      {
+        CC: document.getElementById('CC').value,
+        EXPMM: document.getElementById('ExpMM').value,
+        EXPYY: document.getElementById('ExpYY').value,
+        CVV2: document.getElementById('CVV2').value
+      },
+      paymentCompletedCallback
+    );
+    return false;
+  }
+
+  /**
+	 * Once Gestpay has given a response, this function is called.
+	 * If the card is not 3D-Enrolled, and the transaction is OK, result.ErrorCode will be 0.
+	 * If the card is 3D-Enrolled, then another step is necessary. result.ErrorCode will be 8006.
+	 * Else, we'll have an error.
+	 * @param result Gestpay errorCodes and errorDescription.
+	 */
+  var paymentCompletedCallback = function(result) {
+    if (result.ErrorCode == 0) {
+      //Call went good. proceed to decrypt the Result.EncryptedResponse property
+      redirectToResponsePage(result);
+    } else if (result.ErrorCode == 8006) {
+      // 8006 : Card holder authorization required
+      start3DSecureVerification(result);
+    } else {
+      //Call failed for other errors
+      //.... place here error handle code...
+      util.showErrors(
+        result.ErrorCode,
+        result.ErrorDescription,
+        'paymentCompletedCallback'
+      );
+    }
+  };
+
+  /**
+	 * This function will redirect the user to the 3DSecure page from Gestpay.
+	 * @param result
+	 */
+  function start3DSecureVerification(result) {
+    //Get the TransKey
+    //NOTE: you have to store this value somewhere (for example, in a cookie)
+    //for further use. After the redirect, you'll need this.
+    document.cookie = 'transKey=' + result.TransKey;
+    //Store the encrypted string required to access the issuer authentication page
+    document.cookie = 'encryptedString= ' + configuration.encryptedString;
+    //Store the shopLogin required to access the issuer authentication page
+    document.cookie = 'shopLogin=' + configuration.shopLogin;
+    //Get the VBVRisp; we will need it soon !
+    var VBVRisp = result.VBVRisp;
+
+    //place here the code to redirect the card holder to the authentication website
+    // similar behavior as an HTTP redirect
+    var gestpay3dUrl = 'https://testecomm.sella.it/pagam/pagam3d.aspx';
+    //after the 3d authentication, gestpay will redirect to this url:
+    var baseUrl = util.getCookie('base_url');
+    var redirectUrl = location.origin + baseUrl + '/pay-secure';
+    document.location.replace(
+      gestpay3dUrl +
+        '?a=' +
+        configuration.shopLogin +
+        '&b=' +
+        VBVRisp +
+        '&c=' +
+        redirectUrl
+    );
+  }
+
+  /**
+	 * If 3DSecure validation has been performed, this method will be called. transKey has been saved in
+	 * start3DSecureVerification function (at the first step), while PaRes is coming from Gestpay (second step).
+	 * @param PaRes
+	 * @param transKey
+	 */
+  function handle3Dsecurity(PaRes, transKey) {
+    GestPay.SendPayment(
+      {
+        TransKey: transKey,
+        PARes: PaRes
+      },
+      paymentSuccededCallback
+    );
+  }
+
+  function redirectToResponsePage(result) {
+    document.location.replace(
+      'response?a=' + configuration.shopLogin + '&b=' + result.EncryptedString
+    );
+  }
+
+  /**
+	 * Called
+	 * @param result
+	 */
+  function paymentSuccededCallback(result) {
+    if (result.ErrorCode != 0) {
+      //Call failed an error has occurred
+      //.... place here error handle code...
+      util.showErrors(
+        result.ErrorCode,
+        result.ErrorDescription,
+        'paymentSuccededCallback'
+      );
+    } else {
+      //Call went good
+      //place here the code to retreive the encrypted string
+      redirectToResponsePage(result);
+    }
+  }
+
+  return {
+    checkCC: checkCC
+  };
+})(window.BrowserEnabled, window.GestPay, window.configuration, util);

public/js/util.js

@@ -0,0 +1,37 @@
+/**
+ * Created by michelenasti on 21/03/17.
+ */
+'use strict';
+var util = (function() {
+
+	//private functions
+	function showErrors(errorCode, errorDescription, phase) {
+		var errorSection = document.getElementById('errorSection');
+		errorSection.classList.remove('is-hidden');
+		var errorCodeDiv = document.getElementById('ErrorCode');
+		errorCodeDiv.innerHTML = errorCode;
+		var errorDescriptionDiv = document.getElementById('ErrorDescription');
+		errorDescriptionDiv.innerHTML = phase + '<br>' + errorDescription;
+	}
+
+	function getCookie(cname) {
+		var name = cname + "=";
+		var ca = document.cookie.split(';');
+		for(var i = 0; i < ca.length; i++) {
+			var c = ca[i];
+			while (c.charAt(0) == ' ') {
+				c = c.substring(1);
+			}
+			if (c.indexOf(name) == 0) {
+				return c.substring(name.length, c.length);
+			}
+		}
+		return "";
+	}
+
+	return {
+		showErrors: showErrors,
+		getCookie: getCookie
+	}
+
+}());

server.js

@@ -21,6 +21,12 @@ const app = express();
 // these templates are in "/views", while in "/views/partials"" there are templates
 // that are used by other templates.
 hbs.registerPartials(__dirname + '/views/partials');
+hbs.registerHelper('getGestpayJS', () => {
+  if (properties.testEnv) {
+    return 'https://testecomm.sella.it/pagam/JavaScript/js_GestPay.js';
+  }
+  return 'https://ecomm.sella.it/pagam/JavaScript/js_GestPay.js';
+});
 app.set('view engine', 'hbs');
 
 //configuration of middlewares.
@@ -64,6 +70,32 @@ app.post('/pay', (req, res) => {
     });
 });
 
+app.post('/pay-secure', (req, res) => {
+  let item = req.body.item;
+  let amount = req.body.price;
+  let PaRes = req.body.PaRes;
+  console.log(`received request for ${item} with price ${amount}...`);
+  gestpayService
+    .encrypt({
+      item,
+      amount
+    })
+    .then(cryptedString => {
+      res.render('pay-secure.hbs', {
+        shopLogin: properties.shopLogin,
+        cryptedString,
+        item,
+        amount,
+        PaRes
+      });
+    })
+    .catch(err => {
+      res.render('error.hbs', {
+        error: err
+      });
+    });
+});
+
 /**
  * Once the user has payed on Gestpay page, Gestpay will redirect the user to
  * a page on your server. You must configure Gestpay Back office to return on

views/pay-secure.hbs

@@ -0,0 +1,36 @@
+<html>
+{{> header}}
+
+<body>
+	{{> banner}}
+
+	<section class="hero is-warning is-hidden" id="errorSection">
+		<div class="hero-body">
+			<div class="container">
+				<h1 class="title" id="ErrorCode">
+				</h1>
+				<h2 class="subtitle" id="ErrorDescription">
+				</h2>
+			</div>
+		</div>
+	</section>
+
+	<section class="section container">
+
+		<h1 class="title">Payment in process...</h1>
+		<h2 class="subTitle">Don't close this page until the payment has finished</h2>
+
+	</section>
+	<script src="{{getGestpayJS}}" type="text/javascript"></script>
+	<script src="js/util.js" type="text/javascript"></script>
+	<script type="text/javascript">
+		var configuration = {
+			shopLogin: '{{shopLogin}}',
+			encryptedString: util.getCookie('encryptedString'),
+			PaRes: '{{PaRes}}'
+		}
+	</script>
+	<script src="js/app.js" type="text/javascript"></script>
+</body>
+
+</html>

views/pay.hbs

@@ -1,23 +1,73 @@
-<!DOCTYPE>
 <html>
-
-{{> header }}
+{{> header}}
 
 <body>
-	{{> banner }}
+	{{> banner}}
+
+	<section class="hero is-warning is-hidden" id="errorSection">
+		<div class="hero-body">
+			<div class="container">
+				<h1 class="title" id="ErrorCode">
+				</h1>
+				<h2 class="subtitle" id="ErrorDescription">
+				</h2>
+			</div>
+		</div>
+	</section>
 
 	<section class="section container">
-		<p>You have requested to buy <b>{{item}}</b>.</p>
-		<p>The price is <b>{{amount}} &euro;</b>.</p>
-		<br>
-		<p>
-			<form action="https://testecomm.sella.it/pagam/pagam.aspx" method="GET">
-				<input type="hidden" name="a" value="{{ shopLogin }}">
-				<input type="hidden" name="b" value="{{ cryptedString }}">
-				<input type="submit" value="Pay Now!" class="button">
-			</form>
-		</p>
+
+		<div class="columns">
+			<div class="column">
+				<h1 class="title">Object to buy: <b>
+                {{item}}
+            </b>.</h1>
+				<h2 class="subtitle">Price: <b>
+                {{amount}}
+                &euro;</b>.</h2>
+				<br>
+				<p>
+			</div>
+			<div class="column is-6">
+
+				<h2 class="title">Credit Card Data</h2>
+
+				<form name="CCForm" id="CCForm" onsubmit="return payModule.checkCC();">
+					<div class="field">
+						<label class="label" for="CC">Credit Card Number</label>
+						<p class="control">
+							<input class="input" type="text" autocomplete="off" id="CC" placeholder="1234 5678 1234 5678" />
+						</p>
+						<label class="label" for="ExpMM">Expiry Month</label>
+						<p class="control">
+							<input class="input" type="text" id="ExpMM" placeholder="05" />
+						</p>
+						<label class="label" for="ExpYY">Expiry Year</label>
+						<p class="control">
+							<input class="input" type="text" id="ExpYY" placeholder="27" />
+						</p>
+						<label class="label" for="CVV2">CVV2 / 4DBC</label>
+						<p class="control">
+							<input class="input" type="text" id="CVV2" placeholder="123" />
+						</p>
+						<p class="control">
+							<input type="submit" id="submit" disabled="true" class="button is-primary" value="Loading..." />
+						</p>
+					</div>
+				</form>
+			</div>
+		</div>
 	</section>
+	<script type="text/javascript">
+		var configuration = {
+			shopLogin: '{{shopLogin}}',
+			encryptedString: '{{cryptedString}}',
+			PaRes: '{{PaRes}}'
+		}
+	</script>
+	<script src="{{getGestpayJS}}" type="text/javascript"></script>
+	<script src="js/util.js" type="text/javascript"></script>
+	<script src="js/app.js" type="text/javascript"></script>
 </body>
 
 </html>