Prevent multiple save appearance AJAX calls on Block Checkout (#4506)

* Fix multiple save appearance AJAX calls

- Update global appearance data immediately after generation to prevent subsequent calls from seeing empty data
- Add concurrency flag to prevent multiple simultaneous save appearance requests

* Add changelog entries

Cherry-picked from 2e3adcd

Author: malithsen

changelog.txt

@@ -3,6 +3,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
+* Fix - Prevent multiple save appearance AJAX calls on Block Checkout
 * Fix - Fix required field error message and PHP warning for custom checkout fields that don't have a label
 
 = 9.7.0 - 2025-07-21 =

client/stripe-utils/utils.js

@@ -613,6 +613,10 @@ export const showErrorPaymentMethod = ( errorMessage, containerSelector ) => {
  *
  * @return {Object} The appearance object for the UPE.
  */
+
+// Track if save appearance is already in progress to prevent multiple calls
+let isSavingAppearance = false;
+
 export const initializeUPEAppearance = ( api, isBlockCheckout = 'false' ) => {
 	let appearance =
 		isBlockCheckout === 'true'
@@ -631,8 +635,21 @@ export const initializeUPEAppearance = ( api, isBlockCheckout = 'false' ) => {
 				! data.isChangingPayment );
 
 		// If we have re-built the appearance, only update the settings in the checkout context
-		if ( isValidUpdateContext ) {
-			api.saveAppearance( appearance, isBlockCheckout );
+		if ( isValidUpdateContext && ! isSavingAppearance ) {
+			// Set flag to prevent concurrent saves
+			isSavingAppearance = true;
+
+			// Update the global variable immediately to prevent multiple AJAX calls
+			if ( isBlockCheckout === 'true' ) {
+				data.blocksAppearance = appearance;
+			} else {
+				data.appearance = appearance;
+			}
+
+			api.saveAppearance( appearance, isBlockCheckout ).finally( () => {
+				// Reset flag when save completes (success or failure)
+				isSavingAppearance = false;
+			} );
 		}
 	}
 

readme.txt

@@ -113,6 +113,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
+* Fix - Prevent multiple save appearance AJAX calls on Block Checkout
 * Fix - Fix required field error message and PHP warning for custom checkout fields that don't have a label
 
 = 9.7.0 - 2025-07-21 =