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

Author: Mayisha

changelog.txt

@@ -27,6 +27,7 @@
 * Update - Add the number of pending webhooks to the Account status section
 * Fix - Prevent "Undefined array key charges_enabled" PHP warning when determining live‑mode status
 * Update - Deprecate `wc_gateway_stripe_process_payment`, `wc_gateway_stripe_process_redirect_payment` and `wc_gateway_stripe_process_webhook_payment` actions in favour of `wc_gateway_stripe_process_payment_charge`
+* Tweak - Check for checkout validation error before creating a payment method in Stripe
 * Add - Add state mapping for Lithuania in express checkout
 * Tweak - Use wp_ajax prefix for its built-in security for Add Payment Method action
 

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

@@ -137,6 +137,7 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Update - Add the number of pending webhooks to the Account status section
 * Fix - Prevent "Undefined array key charges_enabled" PHP warning when determining live‑mode status
 * Update - Deprecate `wc_gateway_stripe_process_payment`, `wc_gateway_stripe_process_redirect_payment` and `wc_gateway_stripe_process_webhook_payment` actions in favour of `wc_gateway_stripe_process_payment_charge`
+* Tweak - Check for checkout validation error before creating a payment method in Stripe
 * Add - Add state mapping for Lithuania in express checkout
 * Tweak - Use wp_ajax prefix for its built-in security for Add Payment Method action