Fix React error when the Express Checkout's container element is not found. (#9420)

Author: asumaran

changelog/as-fix-react-error-container-not-found

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Create div container element with JS dynamically.

client/express-checkout/utils/checkPaymentMethodIsAvailable.js

@@ -15,11 +15,15 @@ import { getUPEConfig } from 'wcpay/utils/checkout';
 
 export const checkPaymentMethodIsAvailable = memoize(
 	( paymentMethod, cart, resolve ) => {
-		const root = ReactDOM.createRoot(
-			document.getElementById(
-				`express-checkout-check-availability-container-${ paymentMethod }`
-			)
-		);
+		// Create the DIV container on the fly
+		const containerEl = document.createElement( 'div' );
+
+		// Ensure the element is hidden and doesn’t interfere with the page layout.
+		containerEl.style.display = 'none';
+
+		document.querySelector( 'body' ).appendChild( containerEl );
+
+		const root = ReactDOM.createRoot( containerEl );
 
 		const api = new WCPayAPI(
 			{
@@ -71,6 +75,7 @@ export const checkPaymentMethodIsAvailable = memoize(
 						}
 						resolve( canMakePayment );
 						root.unmount();
+						containerEl.remove();
 					} }
 				/>
 			</Elements>

includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php

@@ -95,10 +95,6 @@ public function init() {
 		$is_woopay_enabled          = WC_Payments_Features::is_woopay_enabled();
 		$is_payment_request_enabled = 'yes' === $this->gateway->get_option( 'payment_request' );
 
-		if ( $is_payment_request_enabled ) {
-			$this->add_html_container_for_test_express_checkout_buttons();
-		}
-
 		if ( $is_woopay_enabled || $is_payment_request_enabled ) {
 			add_action( 'wc_ajax_wcpay_add_to_cart', [ $this->express_checkout_ajax_handler, 'ajax_add_to_cart' ] );
 			add_action( 'wc_ajax_wcpay_empty_cart', [ $this->express_checkout_ajax_handler, 'ajax_empty_cart' ] );
@@ -178,31 +174,6 @@ public function add_order_attribution_inputs() {
 		echo '<wc-order-attribution-inputs id="wcpay-express-checkout__order-attribution-inputs"></wc-order-attribution-inputs>';
 	}
 
-
-	/**
-	 * Add HTML containers to be used by the Express Checkout buttons that check if the payment method is available.
-	 *
-	 * @return void
-	 */
-	private function add_html_container_for_test_express_checkout_buttons() {
-		add_filter(
-			'the_content',
-			function ( $content ) {
-				$supported_payment_methods = [ 'applePay' , 'googlePay' ];
-				// Restrict adding these HTML containers to only the necessary pages.
-				if ( $this->express_checkout_helper->is_checkout() || $this->express_checkout_helper->is_cart() ) {
-					foreach ( $supported_payment_methods as $value ) {
-						// The inline styles ensure that the HTML elements don't occupy space on the page.
-						$content = '<div id="express-checkout-check-availability-container-' . $value . '" style="height: 0; float:left; opacity: 0; pointer-events: none;"></div>' . $content;
-					}
-				}
-				return $content;
-			},
-			10,
-			1
-		);
-	}
-
 	/**
 	 * Check if the pay-for-order flow is supported.
 	 *