defer execution to next event loop cycle

Author: Sidsector9

src/blocks/cash-app-pay/component-cash-app-pay.js

@@ -12,6 +12,7 @@ import {
 	createPaymentRequest,
 	setContinuationSession,
 	log,
+	deferExecution,
 } from './utils';
 import { PAYMENT_METHOD_ID } from './constants';
 
@@ -106,7 +107,7 @@ export const ComponentCashAppPay = ( props ) => {
 				await cashAppPay.attach( `#${ buttonId }`, buttonStyles );
 
 				// Handle the payment response.
-				cashAppPay.addEventListener( 'ontokenization', ( event ) => {
+				cashAppPay.addEventListener( 'ontokenization', async ( event ) => {
 					const { tokenResult, error } = event.detail;
 					if ( error ) {
 						setPaymentNonce( '' );
@@ -121,6 +122,9 @@ export const ComponentCashAppPay = ( props ) => {
 						// Set the nonce.
 						setPaymentNonce( nonce );
 
+						// See function DocBlock.
+						await deferExecution();
+
 						// Place an Order.
 						onSubmit();
 					} else {

src/blocks/digital-wallets/content.js

@@ -7,7 +7,7 @@ import { useEffect, useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { tokenize } from './utils';
-import { getSquareServerData } from '../square-utils/utils';
+import { getSquareServerData, deferExecution } from '../square-utils/utils';
 import {
 	useSquare,
 	usePaymentRequest,
@@ -76,6 +76,9 @@ const Content = ( {
 				onClose();
 			} else {
 				setTokenResult( __tokenResult );
+
+				// See function DocBlock.
+				await deferExecution();
 				onSubmit();
 			}
 		} )();

src/blocks/square-utils/utils.js

@@ -134,4 +134,22 @@ const log = ( data, type = 'notice' ) => {
 	}
 };
 
-export { getSquareServerData, handleErrors, log, logData };
+/**
+ * Defers execution to the next event loop cycle to ensure state updates are committed.
+ *
+ * React 18 (introduced in WooCommerce 9.8) batches state updates inside event handlers,
+ * which can cause issues where state is not updated in time before dependent logic runs.
+ *
+ * This utility function forces JavaScript to defer execution to the next microtask,
+ * ensuring that any state updates are fully committed before continuing execution.
+ *
+ * Introduced specifically to handle WooCommerce 9.8 and above, where React 18's
+ * concurrent rendering changes impact payment tokenization timing.
+ *
+ * @see https://github.com/woocommerce/woocommerce/pull/52473 for more details.
+ *
+ * @returns {Promise<void>} A promise that resolves in the next event loop cycle.
+ */
+const deferExecution = () => new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
+
+export { getSquareServerData, handleErrors, log, logData, deferExecution };