Hide express checkout if no product variation selected (#4133)

* Hide ECE buttons when product variation selection is needed

* Add changelog and readme entries

* Add e2e tests

Author: Anne Mirasol

changelog.txt

@@ -31,6 +31,7 @@
 * Fix - Hide Amazon Pay in settings when legacy checkout is enabled.
 * Fix - Fix subscription renewal issues for Amazon Pay.
 * Tweak - SPE: Remove radio buttons
+* Update - Hide express checkout buttons when no product variation is selected.
 
 = 9.3.1 - 2025-03-14 =
 * Fix - Temporarily disables the subscriptions detached notice feature due to long loading times on stores with many subscriptions.

client/entrypoints/express-checkout/index.js

@@ -181,6 +181,24 @@ jQuery( function ( $ ) {
 		return shippingAddressChangeHandler( api, event, elements );
 	};
 
+	// Check if the product is waiting for a variation to be selected.
+	const isVariationSelectionNeeded = () => {
+		// This check only makes sense on the product page.
+		const isProductPage = getExpressCheckoutData( 'is_product_page' );
+		if ( ! isProductPage ) {
+			return false;
+		}
+
+		const isVariationProduct = document.querySelector(
+			'.single_variation_wrap'
+		);
+		const variationId = document.querySelector(
+			'input[name="variation_id"]'
+		)?.value;
+		const variationSelected = variationId && variationId !== '0';
+		return isVariationProduct && ! variationSelected;
+	};
+
 	const wcStripeECE = {
 		createButton: ( elements, options ) =>
 			elements.create( 'expressCheckout', options ),
@@ -418,6 +436,7 @@ jQuery( function ( $ ) {
 				onReadyHandler( onReadyParams );
 
 				if (
+					! isVariationSelectionNeeded() &&
 					onReadyParams.availablePaymentMethods &&
 					Object.values(
 						onReadyParams.availablePaymentMethods
@@ -707,6 +726,11 @@ jQuery( function ( $ ) {
 			$( document.body )
 				.off( 'woocommerce_variation_has_changed' )
 				.on( 'woocommerce_variation_has_changed', () => {
+					if ( isVariationSelectionNeeded() ) {
+						wcStripeECE.hide();
+						return;
+					}
+
 					wcStripeECE.blockExpressCheckoutButton();
 
 					$.when( wcStripeECE.getSelectedProductData() )
@@ -737,6 +761,7 @@ jQuery( function ( $ ) {
 										response
 									);
 								}
+
 								wcStripeECE.show();
 							}
 						} )
@@ -748,6 +773,14 @@ jQuery( function ( $ ) {
 						} );
 				} );
 
+			$( document.body )
+				.off( 'woocommerce_update_variation_values' )
+				.on( 'woocommerce_update_variation_values', () => {
+					if ( isVariationSelectionNeeded() ) {
+						wcStripeECE.hide();
+					}
+				} );
+
 			$( '.quantity' )
 				.off( 'input', '.qty' )
 				.on(

readme.txt

@@ -141,5 +141,6 @@ If you get stuck, you can ask for help in the [Plugin Forum](https://wordpress.o
 * Fix - Hide Amazon Pay in settings when legacy checkout is enabled.
 * Fix - Fix subscription renewal issues for Amazon Pay.
 * Tweak - SPE: Remove radio buttons
+* Update - Hide express checkout buttons when no product variation is selected.
 
 [See changelog for all versions](https://raw.githubusercontent.com/woocommerce/woocommerce-gateway-stripe/trunk/changelog.txt).

tests/e2e/tests/express-checkout/express-checkout.spec.js

@@ -16,9 +16,7 @@ const addProductToCart = async ( page, productSlug = 'beanie' ) => {
 	).toBeVisible();
 };
 
-const testLink = async ( page, navigateTo, isBlockPage = false ) => {
-	await page.goto( navigateTo );
-
+const getLinkButton = async ( page, isBlockPage = false ) => {
 	let frameLocator;
 	if ( isBlockPage ) {
 		frameLocator = await page.frameLocator(
@@ -32,6 +30,14 @@ const testLink = async ( page, navigateTo, isBlockPage = false ) => {
 	const linkButton = await frameLocator.getByRole( 'button', {
 		name: 'Pay with Link',
 	} );
+
+	return linkButton;
+};
+
+const testLink = async ( page, navigateTo, isBlockPage = false ) => {
+	await page.goto( navigateTo );
+
+	const linkButton = await getLinkButton( page, isBlockPage );
 	await expect( linkButton ).toBeEnabled();
 
 	const context = await page.context();
@@ -74,3 +80,29 @@ test.describe( 'customer can use Link express checkout', () => {
 		await testLink( page, '/checkout', true );
 	} );
 } );
+
+test.describe( 'express checkout and variable products', () => {
+	test( 'is hidden when no product variation is selected', async ( {
+		page,
+	} ) => {
+		await page.goto( '/product/hoodie' );
+
+		// We want to wait for the express checkout element to be loaded,
+		// before asserting that it is hidden. Immedidately asserting that it is hidden
+		// might cause the test to pass only because the element is not yet loaded.
+		const linkContainer = page.locator(
+			'#wc-stripe-express-checkout-element-link iframe[name^="__privateStripeFrame"]'
+		);
+		await expect( linkContainer ).toHaveCount( 1 );
+		await expect( linkContainer ).toBeHidden();
+	} );
+
+	test( 'is visible when a product variation is selected', async ( {
+		page,
+	} ) => {
+		await page.goto( '/product/hoodie' );
+		await page.getByLabel( 'Logo', { exact: true } ).selectOption( 'Yes' );
+		const linkButton = await getLinkButton( page );
+		await expect( linkButton ).toBeVisible();
+	} );
+} );