diff --git a/changelog/as-fix-react-error-container-not-found b/changelog/as-fix-react-error-container-not-found new file mode 100644 index 00000000000..4ca1309b3e3 --- /dev/null +++ b/changelog/as-fix-react-error-container-not-found @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Create div container element with JS dynamically. diff --git a/client/express-checkout/utils/checkPaymentMethodIsAvailable.js b/client/express-checkout/utils/checkPaymentMethodIsAvailable.js index a42d7ffefe9..0792974909b 100644 --- a/client/express-checkout/utils/checkPaymentMethodIsAvailable.js +++ b/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(); } } /> diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php b/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php index a5e3e08939c..4a78920db88 100644 --- a/includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php +++ b/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 ''; } - - /** - * 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 = '
' . $content; - } - } - return $content; - }, - 10, - 1 - ); - } - /** * Check if the pay-for-order flow is supported. *