Fix express checkout methods dependency (#3847)

* Respect express checkout methods dependency

* Filter express payment types before render buttons

* Remove unnecessary check on render Amazon Pay checkbox

* Add changelog entry

* Render Amazon Pay if Amazon Pay is enabled

* Update tests for payment request section

* Fix Blocks cart and checkout pages express buttons dependency

Author: hsingyuc

changelog.txt

@@ -46,6 +46,7 @@
 * Tweak - Improve settings page load by delaying oauth URL generation.
 * Tweak - Update the Woo logo in the Configure connection modal
 * Add - Add currency restriction pill on Amazon Pay.
+* Fix - Express checkout methods dependency.
 
 = 9.1.1 - 2025-01-10 =
 * Fix - Fixes the webhook order retrieval by intent charges. The processed event is an object, not an array.

client/blocks/upe/index.js

@@ -109,15 +109,18 @@ Object.entries( paymentMethodsConfig )
 		} );
 	} );
 
-if ( getBlocksConfiguration()?.isECEEnabled ) {
-	// Register Express Checkout Elements.
-
-	// Hide behind feature flag so the editor does not show the button.
-	if ( getBlocksConfiguration()?.isAmazonPayAvailable ) {
-		registerExpressPaymentMethod( expressCheckoutElementAmazonPay( api ) );
-	}
+// Register Express Checkout Elements.
+if (
+	getBlocksConfiguration()?.isAmazonPayAvailable && // Hide behind feature flag so the editor does not show the button.
+	getBlocksConfiguration()?.isAmazonPayEnabled
+) {
+	registerExpressPaymentMethod( expressCheckoutElementAmazonPay( api ) );
+}
+if ( getBlocksConfiguration()?.isPaymentRequestEnabled ) {
 	registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
 	registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
+}
+if ( getBlocksConfiguration()?.isLinkEnabled ) {
 	registerExpressPaymentMethod( expressCheckoutElementStripeLink( api ) );
 } else {
 	// Register Stripe Payment Request.

client/entrypoints/express-checkout/index.js

@@ -1,4 +1,6 @@
-/*global wcStripeExpressCheckoutPayForOrderParams */
+/* global wcStripeExpressCheckoutPayForOrderParams */
+/* global wc_stripe_express_checkout_params */
+
 import { __ } from '@wordpress/i18n';
 import { debounce } from 'lodash';
 import jQuery from 'jquery';
@@ -150,16 +152,28 @@ jQuery( function ( $ ) {
 
 			const shippingRates = getShippingRates();
 
+			const isPaymentRequestEnabled =
+				wc_stripe_express_checkout_params?.stripe // eslint-disable-line camelcase
+					?.is_payment_request_enabled;
+			const isAmazonPayEnabled =
+				wc_stripe_express_checkout_params?.stripe // eslint-disable-line camelcase
+					?.is_amazon_pay_enabled;
+			const isLinkEnabled =
+				wc_stripe_express_checkout_params?.stripe?.is_link_enabled; // eslint-disable-line camelcase
+
 			// For each supported express payment type, create their own
 			// express checkout element. This is necessary as some express payment types
 			// may require different options or configurations, e.g. Amazon Pay
 			// does not support paymentMethodCreation: 'manual'.
 			const expressPaymentTypes = [
-				EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY,
-				EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY,
-				EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
-				EXPRESS_PAYMENT_METHOD_SETTING_LINK,
-			];
+				isPaymentRequestEnabled &&
+					EXPRESS_PAYMENT_METHOD_SETTING_APPLE_PAY,
+				isPaymentRequestEnabled &&
+					EXPRESS_PAYMENT_METHOD_SETTING_GOOGLE_PAY,
+				isAmazonPayEnabled && EXPRESS_PAYMENT_METHOD_SETTING_AMAZON_PAY,
+				isLinkEnabled && EXPRESS_PAYMENT_METHOD_SETTING_LINK,
+			].filter( Boolean );
+
 			expressPaymentTypes.forEach( ( expressPaymentType ) => {
 				wcStripeECE.createExpressCheckoutElement( expressPaymentType, {
 					...options,

client/settings/payment-request-section/__tests__/index.test.js

@@ -41,7 +41,6 @@ describe( 'PaymentRequestSection', () => {
 		useAmazonPayEnabledSettings.mockReturnValue( [ false, jest.fn() ] );
 		global.wc_stripe_settings_params = {
 			...globalValues,
-			is_ece_enabled: true,
 			is_amazon_pay_available: true,
 		};
 	} );
@@ -118,22 +117,20 @@ describe( 'PaymentRequestSection', () => {
 		expect( linkCheckbox ).not.toBeChecked();
 	} );
 
-	it( 'hide Amazon Pay if ECE is disabled', () => {
+	it( 'render Amazon Pay if feature flag is on', () => {
 		global.wc_stripe_settings_params = {
 			...globalValues,
-			is_ece_enabled: false,
 			is_amazon_pay_available: true,
 		};
 
 		render( <PaymentRequestSection /> );
 
-		expect( screen.queryByText( 'Amazon Pay' ) ).toBeNull();
+		expect( screen.queryByText( 'Amazon Pay' ) ).toBeInTheDocument();
 	} );
 
 	it( 'hide Amazon Pay if feature flag is off', () => {
 		global.wc_stripe_settings_params = {
 			...globalValues,
-			is_ece_enabled: true,
 			is_amazon_pay_available: false,
 		};
 

client/settings/payment-request-section/index.js

@@ -76,7 +76,6 @@ const PaymentRequestSection = () => {
 		}
 	);
 
-	const isECEEnabled = wc_stripe_settings_params.is_ece_enabled; // eslint-disable-line camelcase
 	const isAmazonPayAvailable =
 		wc_stripe_settings_params.is_amazon_pay_available; // eslint-disable-line camelcase
 
@@ -239,7 +238,7 @@ const PaymentRequestSection = () => {
 							</div>
 						</li>
 					) }
-					{ isAmazonPayAvailable && isECEEnabled && (
+					{ isAmazonPayAvailable && (
 						<li className="express-checkout has-icon-border">
 							<div className="express-checkout__checkbox">
 								<CheckboxControl

includes/admin/class-wc-stripe-settings-controller.php

@@ -245,7 +245,6 @@ public function admin_scripts( $hook_suffix ) {
 			'plugin_version'            => WC_STRIPE_VERSION,
 			'account_country'           => $this->account->get_account_country(),
 			'are_apms_deprecated'       => WC_Stripe_Feature_Flags::are_apms_deprecated(),
-			'is_ece_enabled'            => WC_Stripe_Feature_Flags::is_stripe_ece_enabled(),
 			'is_amazon_pay_available'   => WC_Stripe_Feature_Flags::is_amazon_pay_available(),
 			'oauth_nonce'               => wp_create_nonce( 'wc_stripe_get_oauth_urls' ),
 		];

includes/payment-methods/class-wc-stripe-express-checkout-element.php

@@ -191,6 +191,7 @@ public function javascript_params() {
 				'is_link_enabled'             => WC_Stripe_UPE_Payment_Method_Link::is_link_enabled(),
 				'is_express_checkout_enabled' => $this->express_checkout_helper->is_express_checkout_enabled(),
 				'is_amazon_pay_enabled'       => $this->express_checkout_helper->is_amazon_pay_enabled(),
+				'is_payment_request_enabled'  => $this->express_checkout_helper->is_payment_request_enabled(),
 			],
 			'nonce'                  => [
 				'payment'                   => wp_create_nonce( 'wc-stripe-express-checkout' ),

includes/payment-methods/class-wc-stripe-express-checkout-helper.php

@@ -1354,13 +1354,20 @@ public function get_button_locations() {
 	}
 
 	/**
-	 * Returns whether Stripe express checkout element is enabled.
-	 *
-	 * This option defines whether Apple Pay and Google Pay buttons are enabled.
+	 * Returns whether any of the Stripe express checkout element is enabled.=
 	 *
 	 * @return boolean
 	 */
 	public function is_express_checkout_enabled() {
+		return $this->is_payment_request_enabled() || $this->is_amazon_pay_enabled() || WC_Stripe_UPE_Payment_Method_Link::is_link_enabled();
+	}
+
+	/**
+	 * Checks if Apple Pay and Google Pay buttons are enabled.
+	 *
+	 * @return boolean
+	 */
+	public function is_payment_request_enabled() {
 		return isset( $this->stripe_settings['payment_request'] ) && 'yes' === $this->stripe_settings['payment_request'];
 	}
 

includes/payment-methods/class-wc-stripe-upe-payment-gateway.php

@@ -411,6 +411,8 @@ public function javascript_params() {
 			}
 		}
 
+		$express_checkout_helper = new WC_Stripe_Express_Checkout_Helper();
+
 		$stripe_params['isCheckout']                       = ( is_checkout() || has_block( 'woocommerce/checkout' ) ) && empty( $_GET['pay_for_order'] ); // wpcs: csrf ok.
 		$stripe_params['return_url']                       = $this->get_stripe_return_url();
 		$stripe_params['ajax_url']                         = WC_AJAX::get_endpoint( '%%endpoint%%' );
@@ -428,6 +430,9 @@ public function javascript_params() {
 		$stripe_params['enabledBillingFields']             = $enabled_billing_fields;
 		$stripe_params['cartContainsSubscription']         = $this->is_subscription_item_in_cart();
 		$stripe_params['accountCountry']                   = WC_Stripe::get_instance()->account->get_account_country();
+		$stripe_params['isPaymentRequestEnabled']          = $express_checkout_helper->is_payment_request_enabled();
+		$stripe_params['isAmazonPayEnabled']               = $express_checkout_helper->is_amazon_pay_enabled();
+		$stripe_params['isLinkEnabled']                    = WC_Stripe_UPE_Payment_Method_Link::is_link_enabled();
 
 		// Add appearance settings.
 		$stripe_params['appearance']          = get_transient( $this->get_appearance_transient_key() );

readme.txt

@@ -156,5 +156,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Tweak - Improve settings page load by delaying oauth URL generation.
 * Tweak - Update the Woo logo in the Configure connection modal
 * Add - Add currency restriction pill on Amazon Pay.
+* Fix - Express checkout methods dependency.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).