Fix unnecessary payment method creation when checkout has validation errors (#4502)

* check if block checkout has validation error
* check if shortcode checkout has validation error
* use comment and variable
* add changelog
* use 'hasValidationErrors' to check for error on block checkout

Cherry-picked from 49ab42e.

Author: Mayisha

changelog.txt

@@ -2,6 +2,7 @@
 
 = 9.7.1 - xxxx-xx-xx =
 * Add - Add state mapping for Lithuania in express checkout
+* Tweak - Check for checkout validation error before creating a payment method in Stripe
 
 = 9.7.0 - 2025-07-21 =
 * Update - Removes BNPL payment methods (Klarna and Affirm) when other official plugins are active

client/blocks/upe/upe-deferred-intent-creation/payment-processor.js

@@ -3,6 +3,7 @@
  */
 import { getPaymentMethods } from '@woocommerce/blocks-registry';
 import { __ } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
 import {
 	PaymentElement,
 	useElements,
@@ -194,6 +195,16 @@ const PaymentProcessor = ( {
 						};
 					}
 
+					const { validationStore } = window.wc?.wcBlocksData ?? {};
+					if ( validationStore ) {
+						const store = select( validationStore );
+						const hasValidationErrors = store.hasValidationErrors();
+						// Return if there is a validation error on the checkout fields.
+						if ( hasValidationErrors ) {
+							return;
+						}
+					}
+
 					// BLIK is a special case which is not handled through the Stripe element.
 					if ( ! ( isPaymentElementComplete || isBlikSelected ) ) {
 						return {

client/classic/upe/deferred-intent.js

@@ -41,6 +41,22 @@ jQuery( function ( $ ) {
 	} );
 
 	$( 'form.checkout' ).on( generateCheckoutEventNames(), function () {
+		const $form = $( 'form.checkout' );
+		// Lose focus for all fields to trigger validation
+		$form
+			.find( '.input-text, select, input:checkbox' )
+			.trigger( 'validate' )
+			.trigger( 'blur' );
+
+		const hasValidationErrors =
+			$form.find( '.woocommerce-invalid' ).length > 0 &&
+			$form.find( '.woocommerce-invalid' ).is( ':visible' );
+
+		// Return if there is a validation error on the checkout fields
+		if ( hasValidationErrors ) {
+			return;
+		}
+
 		return processPaymentIfNotUsingSavedMethod( $( this ) );
 	} );
 

readme.txt

@@ -112,6 +112,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 
 = 9.7.1 - xxxx-xx-xx
 * Add - Add state mapping for Lithuania in express checkout
+* Tweak - Check for checkout validation error before creating a payment method in Stripe
 
 = 9.7.0 - 2025-07-21 =