Adding simple card error handling

templates/frontend/cardentryform.twig

@@ -1,11 +1,13 @@
 <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
-<script type="text/javascript" src="/extensions/vendor/ginger/squarepay/sq-paymentform.js"></script>
+<script type="text/javascript" src="/extensions/vendor/ginger/squarepay/sq-paymentform.js?v=2018-10-30-a"></script>
 <script>
 // For sq-paymentform.js	
 var applicationId = '{{ testmode ? sq_sandbox_app_id : sq_app_id }}';
 var locationId = '{{ testmode ? sq_sandbox_location_id : sq_location_id }}';
 </script>
 
+<div id="card-error-area" class="hidden"></div>
+
 <div id="cc-form">
 	<form id="nonce-form" novalidate action="/process-square" method="post">
 	<input type="hidden" id="card-nonce" name="nonce">

web/sq-paymentform.js

@@ -49,19 +49,43 @@ function init() {
 		// SqPaymentForm callback functions
 		callbacks: {
 	  
+			methodsSupported: function (methods) {
+			},
+
 			unsupportedBrowserDetected: function() {
 				alert('UNSUPPORTED BROWSER');
 			},
 	
-			cardNonceResponseReceived: function(errors, nonce, cardData, billingContact, shippingContact) {
+			cardNonceResponseReceived: function(errors, nonce) {
+				var f = document.getElementById('nonce-form');
+				var translatedErrors = [];
+				if (!f.name.value.trim()) {
+					translatedErrors.push(translateError({field: 'name'}));
+				}
+				if (!f.email.value.trim()) {
+					translatedErrors.push(translateError({field: 'email'}));
+				}
+				if (!f.date.value.trim()) {
+					translatedErrors.push(translateError({field: 'date'}));
+				}
+				if (!f.booker.value.trim()) {
+					translatedErrors.push(translateError({field: 'booker'}));
+				}
+				if (translatedErrors.length) {
+					document.getElementById('card-error-area').innerHTML = translatedErrors.join('<br>');
+					document.getElementById('card-error-area').classList.remove('hidden');
+					return;
+				}
 				if (errors) {
 					// Log errors from nonce generation to the Javascript console
-					console.log("Encountered errors:");
 					errors.forEach(function(error) {
-						console.log('  ' + error.message);
+						translatedErrors.push(translateError(error));
 					});
+					document.getElementById('card-error-area').innerHTML = translatedErrors.join('<br>');
+					document.getElementById('card-error-area').classList.remove('hidden');
 					return;
 				}
+				document.getElementById('card-error-area').classList.add('hidden');
 				document.getElementById('card-nonce').value = nonce; // Assign the nonce value to the hidden form field
 				document.getElementById('nonce-form').submit();	// POST the nonce form to the payment processing page
 			}
@@ -82,6 +106,31 @@ function requestCardNonce(event) {
 
 // ---------------------------------------------------------------------------------------------------------------------
 
+function translateError(error) {
+	switch(error.field) {
+		case 'name':
+			return 'Please enter your name';
+		case 'email':
+			return 'Please enter your email address';
+		case 'date':
+			return 'Please enter the date of your booking with The Grand Expedition';
+		case 'booker':
+			return 'Please enter the name of the person who made the original booking';
+		case 'cardNumber':
+			return 'Please enter a valid card number';
+		case 'cvv':
+			return 'Please enter a valid CVV (the 3-digit number on the back of your card)';
+		case 'expirationDate':
+			return 'Please enter a valid expiry date';
+		case 'postalCode':
+			return 'Please enter a valid post code';
+		default:
+			return error.message;
+	}
+}
+
+// ---------------------------------------------------------------------------------------------------------------------
+
 if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', init);
 } else {  // `DOMContentLoaded` already fired