fix(ras-acc): reCAPTCHA v2 + v3 for RAS-ACC flows (#1811)

Fixes for reCAPTCHA implementation in RAS-ACC modal checkout.
Automattic · Aug 27, 2024 · 5b5f9e2 · 5b5f9e2
1 parent 309f475
commit 5b5f9e2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 6 deletions.
diff --git a/includes/class-modal-checkout.php b/includes/class-modal-checkout.php
@@ -545,10 +545,16 @@ public static function enqueue_scripts() {
 			return;
 		}
 
+		$dependencies = [ 'jquery' ];
+		// Add support reCAPTCHA dependencies, if connected.
+		if ( class_exists( 'Newspack\Recaptcha' ) && \Newspack\Recaptcha::can_use_captcha() ) {
+			$dependencies[] = \Newspack\Recaptcha::SCRIPT_HANDLE;
+		}
+
 		wp_enqueue_script(
 			'newspack-blocks-modal-checkout',
 			plugins_url( 'dist/modalCheckout.js', \NEWSPACK_BLOCKS__PLUGIN_FILE ),
-			[ 'jquery' ],
+			$dependencies,
 			\NEWSPACK_BLOCKS__VERSION,
 			true
 		);
@@ -1021,12 +1027,16 @@ class="button close-button"
 	 * @param string $url The URL from which the checkout originated.
 	 */
 	public static function recaptcha_verify_captcha( $should_verify, $url ) {
+		$is_validation_only = boolval( filter_input( INPUT_POST, 'is_validation_only', FILTER_SANITIZE_NUMBER_INT ) );
 		parse_str( \wp_parse_url( $url, PHP_URL_QUERY ), $query );
 		if (
-			// Only in the context of a checkout request.
-			defined( 'WOOCOMMERCE_CHECKOUT' )
-			&& isset( $query['wc-ajax'] )
-			&& 'wc_stripe_create_order' === $query['wc-ajax']
+			// Only in the context of a true checkout request.
+			$is_validation_only ||
+			(
+				defined( 'WOOCOMMERCE_CHECKOUT' )
+				&& isset( $query['wc-ajax'] )
+				&& 'wc_stripe_create_order' === $query['wc-ajax']
+			)
 		) {
 			return false;
 		}

diff --git a/src/modal-checkout/index.js b/src/modal-checkout/index.js
@@ -365,10 +365,21 @@ domReady(
 				 * @param {boolean} isEditingDetails
 				 */
 				function setEditingDetails( isEditingDetails ) {
+					const newspack_grecaptcha = window.newspack_grecaptcha || {};
+
+					// Scroll to top.
+					window.scroll( { top: 0, left: 0, behavior: 'smooth' } );
+					// Update checkout.
+					$( document.body ).trigger( 'update_checkout' );
 					clearNotices();
 					// Clear checkout details.
 					$( '#checkout_details' ).remove();
 					if ( isEditingDetails ) {
+						$form.append( '<input name="is_validation_only" type="hidden" value="1" />' );
+						// Destroy reCAPTCHA inputs so we don't trigger validation between checkout steps.
+						if ( 'v3' === newspack_grecaptcha?.version ) {
+							newspack_grecaptcha.destroy( $form.get() );
+						}
 						if ( $coupon.length ) {
 							$coupon.hide();
 						}
@@ -385,6 +396,16 @@ domReady(
 						} );
 						$form.on( 'submit', handleFormSubmit );
 					} else {
+						const $validationOnlyField = $form.find( '[name="is_validation_only"]' );
+						if ( $validationOnlyField.length ) {
+							$validationOnlyField.remove();
+						}
+
+						// Initiate reCAPTCHA, if available.
+						if ( newspack_grecaptcha?.render ) {
+							$form.data( 'newspack-recaptcha', 'newspack_modal_checkout' );
+							newspack_grecaptcha.render( $form.get() );
+						}
 						if ( $coupon.length ) {
 							$coupon.show();
 						}

diff --git a/src/modal-checkout/templates/form-checkout.php b/src/modal-checkout/templates/form-checkout.php
@@ -31,7 +31,7 @@
 			<?php do_action( 'woocommerce_checkout_billing' ); ?>
 			<?php do_action( 'woocommerce_checkout_shipping' ); ?>
 			<?php \Newspack_Blocks\Modal_Checkout::maybe_show_wcs_gifting_fields(); ?>
-			<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout_continue" type="submit"><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
+			<button class="newspack-ui__button newspack-ui__button--primary newspack-ui__button--wide" id="checkout_continue" type="submit" data-skip-recaptcha><?php esc_html_e( 'Continue', 'newspack-blocks' ); ?></button>
 		</div>
 		<div id="after_customer_details">
 			<div class="order-review-wrapper hidden">