Merge release/8.2.1 into trunk

Author: htdat

changelog.txt

@@ -1,5 +1,8 @@
 *** WooPayments Changelog ***
 
+= 8.2.1 - 2024-09-13 =
+* Fix - Create div container element with JS dynamically.
+
 = 8.2.0 - 2024-09-11 =
 * Add - add: test instructions icon animation
 * Add - Added Embdedded KYC, currently behind feature flag.

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.
 	 *

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "woocommerce-payments",
-  "version": "8.2.0",
+  "version": "8.2.1",
   "main": "webpack.config.js",
   "author": "Automattic",
   "license": "GPL-3.0-or-later",

package.json

@@ -4,7 +4,7 @@ Tags: woocommerce payments, apple pay, credit card, google pay, payment, payment
 Requires at least: 6.0
 Tested up to: 6.6
 Requires PHP: 7.3
-Stable tag: 8.2.0
+Stable tag: 8.2.1
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -94,6 +94,10 @@ Please note that our support for the checkout block is still experimental and th
 
 == Changelog ==
 
+= 8.2.1 - 2024-09-13 =
+* Fix - Create div container element with JS dynamically.
+
+
 = 8.2.0 - 2024-09-11 =
 * Add - add: test instructions icon animation
 * Add - Added Embdedded KYC, currently behind feature flag.

readme.txt

@@ -11,7 +11,7 @@
  * WC tested up to: 9.2.0
  * Requires at least: 6.0
  * Requires PHP: 7.3
- * Version: 8.2.0
+ * Version: 8.2.1
  * Requires Plugins: woocommerce
  *
  * @package WooCommerce\Payments