squarepay/web/sq-paymentform.js

// Create and initialize a payment form object
var paymentForm;

// ---------------------------------------------------------------------------------------------------------------------

function init() {

	paymentForm = new SqPaymentForm({
  
		// Initialize the payment form elements
		applicationId: applicationId,
		locationId: locationId,
		autoBuild: false,
	  
		inputClass: 'sq-input',

		// Customize the CSS for SqPaymentForm iframe elements
		inputStyles: [{
			fontSize: '1.15em',
			fontFamily: 'courier, monospace',
			color: 'white',
			placeholderColor: '#EEE',
			backgroundColor: '#0f193c',
			fontWeight: 'normal',
			padding: '5px 10px'
		}],
	  
		applePay: false,
		googlePay: false,
		masterpass: false,

		// Initialize the credit card placeholders
		cardNumber: {
			elementId: 'sq-card-number',
			placeholder: '•••• •••• •••• ••••'
		},
		cvv: {
			elementId: 'sq-cvv',
			placeholder: 'cvv'
		},
		expirationDate: {
			elementId: 'sq-expiration-date',
			placeholder: 'mm/yy'
		},
		postalCode: {
			elementId: 'sq-postal-code'
		},
	  
		// SqPaymentForm callback functions
		callbacks: {
	  
			methodsSupported: function (methods) {
			},

			unsupportedBrowserDetected: function() {
				alert('UNSUPPORTED BROWSER');
			},
	
			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
					errors.forEach(function(error) {
						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
			}
		}
	});

	paymentForm.build();
	return paymentForm;
}

// ---------------------------------------------------------------------------------------------------------------------

// Called when 'Pay With Card' is clicked
function requestCardNonce(event) {
	event.preventDefault(); // Don't submit the form until SqPaymentForm returns with a nonce
	paymentForm.requestCardNonce(); // Request a nonce from the SqPaymentForm object
}

// ---------------------------------------------------------------------------------------------------------------------

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
    init();
}