TR-92: add 3DS

assets/frontend/css/globalpayments-secure-payment-fields.css

@@ -1,3 +1,7 @@
 .globalpayments iframe {
 	min-height: 3.6rem;
 }
+
+div[id^="GlobalPayments-overlay-"] {
+	z-index: 1001 !important;
+}

assets/frontend/js/globalpayments-secure-payment-fields.js

@@ -4,14 +4,16 @@
 	$,
 	wc_checkout_params,
 	GlobalPayments,
-	globalpayments_secure_payment_fields_params
+	GlobalPayments3DS,
+	globalpayments_secure_payment_fields_params,
+	globalpayments_secure_payment_threedsecure_params
 ) {
 	/**
 	 * Frontend code for Global Payments in WooCommerce
 	 *
 	 * @param {object} options
 	 */
-	function GlobalPaymentsWooCommerce(options) {
+	function GlobalPaymentsWooCommerce( options, threeDSecureOptions ) {
 
 		/**
 		 * Card form instance
@@ -26,18 +28,37 @@
 		 * @type {string}
 		 */
 		this.id = options.id;
+
 		/**
 		 * Payment field options
 		 *
 		 * @type {object}
 		 */
 		this.fieldOptions = options.field_options;
+
 		/**
 		 * Payment gateway options
 		 *
 		 * @type {object}
 		 */
 		this.gatewayOptions = options.gateway_options;
+
+		/**
+		 * 3DS endpoints
+		 */
+		this.threedsecure = threeDSecureOptions.threedsecure;
+
+		/**
+		 * Order info
+		 */
+		this.order = threeDSecureOptions.order;
+
+		/**
+		 *
+		 * @type {null}
+		 */
+		this.tokenResponse = null;
+
 		this.attachEventHandlers();
 	};
 
@@ -64,12 +85,18 @@
 			// Order Pay + Add payment method
 			if ( $( document.body ).hasClass( 'woocommerce-order-pay' ) || $( 'form#add_payment_method' ).length > 0 ) {
 				$( document ).ready( this.renderPaymentFields.bind( this ) );
+				if ( 'globalpayments_gpapi' === this.id) {
+					$( document ).ready( this.threeDSSecure.bind( this ) );
+				}
 				return;
 			}
 
 			// Checkout
 			if ( wc_checkout_params.is_checkout ) {
 				$( document.body ).on( 'updated_checkout', this.renderPaymentFields.bind( this ) );
+				if ( 'globalpayments_gpapi' === this.id) {
+					$( document.body ).on( 'updated_checkout', this.threeDSSecure.bind( this ) );
+				}
 				return;
 			}
 		},
@@ -198,7 +225,7 @@
 				return;
 			}
 
-			console.log(response);
+			this.tokenResponse = JSON.stringify(response);
 
 			var that = this;
 
@@ -232,6 +259,165 @@
 			});
 		},
 
+		/**
+		 * Validate mandatory checkout fields
+		 *
+		 * @returns {boolean}
+		 */
+		validateFields: function() {
+			if ( ! $( '#billing_first_name' ).val()
+				|| ! $( '#billing_last_name' ).val()
+				|| ! $( '#billing_address_1' ).val()
+				|| ! $( '#billing_city' ).val()
+				|| ! $( '#billing_postcode' ).val()
+				|| ! $( '#billing_phone' ).val()
+				|| ! $( '#billing_email' ).val() ) {
+				this.showPaymentError( 'Please fill in the required fields.' );
+				return false;
+			}
+
+			if ( ! this.isValidZipCode( $( '#billing_postcode' ).val() ) ) {
+				this.showPaymentError( 'Billing ZIP is not a valid postcode / ZIP. ' );
+				return false;
+			}
+
+			return true;
+		},
+
+		/**
+		 * Validate zipcode
+		 *
+		 * @param {String} zipcode
+		 * @return {Boolean}
+		 */
+		isValidZipCode: function ( zipcode ) {
+			let pattern = /^[a-zA-Z0-9-\s]{1,16}$/;
+
+			return pattern.test(zipcode);
+		},
+
+		/**
+		 * 3DS Process
+		 */
+		threeDSSecure: function () {
+			const {
+				checkVersion,
+				initiateAuthentication,
+				ChallengeWindowSize,
+			} = GlobalPayments.ThreeDSecure;
+
+			const checkVersionButton = $( this.getPlaceOrderButtonSelector() );
+			if ( ! checkVersionButton ) {
+				console.error( 'Warning! Place Order button cannot be loaded' );
+				return;
+			}
+
+			// handle 3DS 2.0 workflow
+			const start3DS = async (e) => {
+				e.preventDefault();
+
+				if ( wc_checkout_params.is_checkout && ! this.validateFields() ) {
+					return;
+				}
+
+				try {
+					versionCheckData = await checkVersion(this.threedsecure.checkEnrollmentUrl, {
+						tokenResponse: this.tokenResponse,
+						wcTokenId: $( 'input[name="wc-' + this.id + '-payment-token"]:checked', this.getForm() ).val(),
+						amount: this.order.amount,
+						currency: this.order.currency,
+						challengeWindow: {
+							windowSize: ChallengeWindowSize.Windowed500x600,
+							displayMode: 'lightbox',
+							hide: false,
+						},
+					});
+
+					// Card holder not enrolled in 3D Secure, continue the WooCommerce flow.
+					if (versionCheckData.enrolled === "NOT_ENROLLED") {
+						$( this.getForm() ).submit();
+						return;
+					}
+
+					//Something went wrong with CheckEnrolment request on server side
+					if (versionCheckData.error) {
+						this.showPaymentError( versionCheckData.message );
+						return;
+					}
+				} catch ( e ) {
+					console.error( e.reasons );
+					this.showPaymentError( e.reasons[0].message );
+					return;
+				}
+
+				if ( "ONE" === versionCheckData.version ) {
+					this.createInputElement( 'serverTransId', versionCheckData.serverTransactionId );
+					this.createInputElement( 'PaRes', versionCheckData.challenge.response.data.PaRes );
+					$( this.getForm() ).submit();
+					return;
+				}
+
+				try {
+					authenticationData = await initiateAuthentication(this.threedsecure.initiateAuthenticationUrl, {
+						tokenResponse: this.tokenResponse,
+						wcTokenId: $( 'input[name="wc-' + this.id + '-payment-token"]:checked', this.getForm() ).val(),
+						versionCheckData: versionCheckData,
+						challengeWindow: {
+							windowSize: ChallengeWindowSize.Windowed500x600,
+							displayMode: 'lightbox',
+						},
+						order: this.order,
+					});
+
+					switch (authenticationData.result) {
+						case "SUCCESS_AUTHENTICATED":
+						case "AUTHENTICATION_SUCCESSFUL":
+							// frictionless authentication success
+							this.createInputElement( 'serverTransId', authenticationData.serverTransactionId );
+							$( this.getForm() ).submit();
+							return;
+						case "CHALLENGE_REQUIRED":
+							// challenge authentication success
+							if (authenticationData.challenge.response.data.transStatus == "Y") {
+								this.createInputElement( 'serverTransId', versionCheckData.serverTransactionId);
+								$( this.getForm() ).submit();
+								 return;
+							}
+							// challenge authentication failure
+							this.showPaymentError('3DS Authentication failed. Please try again!');
+							return;
+						case "NOT_AUTHENTICATED":
+						case "FAILED":
+						default:
+							this.showPaymentError('3DS Authentication failed. Please try again!');
+							return;
+					}
+				} catch (e) {
+					console.error( e );
+					this.showPaymentError( e.reasons );
+					return;
+				}
+
+				return false;
+			};
+
+			checkVersionButton.on('click', start3DS );
+		},
+
+		createInputElement: function ( name, value ) {
+			var inputElement = (document.getElementById( this.id + '-' + name ));
+
+			if ( ! inputElement) {
+				inputElement      = document.createElement( 'input' );
+				inputElement.id   = this.id + '-' + name;
+				inputElement.name = this.id + '[' + name + ']';
+				inputElement.type = 'hidden';
+				this.getForm().appendChild( inputElement );
+			}
+
+			inputElement.value = value;
+		},
+
 		/**
 		 * Places/submits the order to WooCommerce
 		 *
@@ -307,6 +493,28 @@
 			$( '.' + this.id + '.' + fieldType + ' .validation-error' ).show();
 		},
 
+		/**
+		 * Shows payment error  and scrolls to it
+		 *
+		 * @param {string} message Error message
+		 *
+		 * @returns
+		 */
+		showPaymentError: function ( message ) {
+			var $form     = $( this.getForm() );
+
+			this.unblockOnError();
+
+			// Remove notices from all sources
+			$( '.woocommerce-error, .woocommerce-message' ).remove();
+
+			$form.prepend( '<div class="woocommerce-NoticeGroup woocommerce-NoticeGroup-updateOrderReview woocommerce-error">' + message + '</div>' );
+
+			$( 'html, body' ).animate( {
+				scrollTop: ( $form.offset().top - 100 )
+			}, 1000 );
+		},
+
 		/**
 		 * Handles errors from the payment field iframes
 		 *
@@ -613,7 +821,7 @@
 		}
 	};
 
-	new GlobalPaymentsWooCommerce( globalpayments_secure_payment_fields_params );
+	new GlobalPaymentsWooCommerce( globalpayments_secure_payment_fields_params, globalpayments_secure_payment_threedsecure_params );
 }(
 	/**
 	 * Global `jQuery` reference
@@ -633,10 +841,22 @@
 	 * @type {any}
 	 */
 	(window).GlobalPayments,
+	/**
+	 * Global `GlobalPayments` reference
+	 *
+	 * @type {any}
+	 */
+	(window).GlobalPayments.ThreeDSecure,
 	/**
 	 * Global `globalpayments_secure_payment_fields_params` reference
 	 *
 	 * @type {any}
 	 */
-	(window).globalpayments_secure_payment_fields_params
+	(window).globalpayments_secure_payment_fields_params,
+	/**
+	 * Global `globalpayments_secure_payment_threedsecure_params` reference
+	 *
+	 * @type {any}
+	 */
+	(window).globalpayments_secure_payment_threedsecure_params || {}
 ));