Fix empty space for express checkout container (#3484)

* return 'true' for 'canMakePayment' only when express checkout is enabled

* fix error when 'paymentMethodsConfig' is not defined

* add 'adjustButtonHeights' function

* add 'checkPaymentMethodIsAvailable' function for blocks

Author: Mayisha

client/blocks/express-checkout/express-checkout-component.js

@@ -29,6 +29,31 @@ const getPaymentMethodsOverride = ( enabledPaymentMethod ) => {
 	};
 };
 
+// Visual adjustments to horizontally align the buttons.
+const adjustButtonHeights = ( buttonOptions, expressPaymentMethod ) => {
+	// Apple Pay has a nearly imperceptible height difference. We increase it by 1px here.
+	if ( buttonOptions.buttonTheme.applePay === 'black' ) {
+		if ( expressPaymentMethod === 'applePay' ) {
+			buttonOptions.buttonHeight = buttonOptions.buttonHeight + 0.4;
+		}
+	}
+
+	// GooglePay with the white theme has a 2px height difference due to its border.
+	if (
+		expressPaymentMethod === 'googlePay' &&
+		buttonOptions.buttonTheme.googlePay === 'white'
+	) {
+		buttonOptions.buttonHeight = buttonOptions.buttonHeight - 2;
+	}
+
+	// Clamp the button height to the allowed range 40px to 55px.
+	buttonOptions.buttonHeight = Math.max(
+		40,
+		Math.min( buttonOptions.buttonHeight, 55 )
+	);
+	return buttonOptions;
+};
+
 const ExpressCheckoutComponent = ( {
 	api,
 	billing,
@@ -77,7 +102,7 @@ const ExpressCheckoutComponent = ( {
 	return (
 		<ExpressCheckoutElement
 			options={ {
-				...buttonOptions,
+				...adjustButtonHeights( buttonOptions, expressPaymentMethod ),
 				...getPaymentMethodsOverride( expressPaymentMethod ),
 			} }
 			onClick={ onButtonClick }

client/blocks/express-checkout/index.js

@@ -1,9 +1,12 @@
+/* global wc_stripe_express_checkout_params */
+
 import { PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT } from './constants';
 import { ExpressCheckoutContainer } from './express-checkout-container';
 import ApplePayPreview from './apple-pay-preview';
 import GooglePayPreview from './google-pay-preview';
 import { loadStripe } from 'wcstripe/blocks/load-stripe';
 import { getBlocksConfiguration } from 'wcstripe/blocks/utils';
+import { checkPaymentMethodIsAvailable } from 'wcstripe/express-checkout/utils/check-payment-method-availability';
 
 const stripePromise = loadStripe();
 
@@ -17,7 +20,16 @@ const expressCheckoutElementsGooglePay = ( api ) => ( {
 		/>
 	),
 	edit: <GooglePayPreview />,
-	canMakePayment: () => true,
+	canMakePayment: ( { cart } ) => {
+		// eslint-disable-next-line camelcase
+		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
+			return false;
+		}
+
+		return new Promise( ( resolve ) => {
+			checkPaymentMethodIsAvailable( 'googlePay', api, cart, resolve );
+		} );
+	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	supports: {
 		features: getBlocksConfiguration()?.supports ?? [],
@@ -34,7 +46,16 @@ const expressCheckoutElementsApplePay = ( api ) => ( {
 		/>
 	),
 	edit: <ApplePayPreview />,
-	canMakePayment: () => true,
+	canMakePayment: ( { cart } ) => {
+		// eslint-disable-next-line camelcase
+		if ( typeof wc_stripe_express_checkout_params === 'undefined' ) {
+			return false;
+		}
+
+		return new Promise( ( resolve ) => {
+			checkPaymentMethodIsAvailable( 'applePay', api, cart, resolve );
+		} );
+	},
 	paymentMethodId: PAYMENT_METHOD_EXPRESS_CHECKOUT_ELEMENT,
 	supports: {
 		features: getBlocksConfiguration()?.supports ?? [],

client/blocks/upe/index.js

@@ -27,7 +27,9 @@ const api = new WCStripeAPI(
 );
 
 const upeMethods = getPaymentMethodsConstants();
-Object.entries( getBlocksConfiguration()?.paymentMethodsConfig )
+const paymentMethodsConfig =
+	getBlocksConfiguration()?.paymentMethodsConfig ?? {};
+Object.entries( paymentMethodsConfig )
 	.filter( ( [ upeName ] ) => upeName !== 'link' )
 	.filter( ( [ upeName ] ) => upeName !== 'giropay' ) // Skip giropay as it was deprecated by Jun, 30th 2024.
 	.forEach( ( [ upeName, upeConfig ] ) => {

client/express-checkout/utils/check-payment-method-availability.js

@@ -0,0 +1,58 @@
+import ReactDOM from 'react-dom';
+import { ExpressCheckoutElement, Elements } from '@stripe/react-stripe-js';
+import { memoize } from 'lodash';
+
+export const checkPaymentMethodIsAvailable = memoize(
+	( paymentMethod, api, cart, resolve ) => {
+		// 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 );
+
+		root.render(
+			<Elements
+				stripe={ api.loadStripe() }
+				options={ {
+					mode: 'payment',
+					paymentMethodCreation: 'manual',
+					amount: Number( cart.cartTotals.total_price ),
+					currency: cart.cartTotals.currency_code.toLowerCase(),
+				} }
+			>
+				<ExpressCheckoutElement
+					onLoadError={ () => resolve( false ) }
+					options={ {
+						paymentMethods: {
+							amazonPay: 'never',
+							applePay:
+								paymentMethod === 'applePay'
+									? 'always'
+									: 'never',
+							googlePay:
+								paymentMethod === 'googlePay'
+									? 'always'
+									: 'never',
+							link: 'never',
+							paypal: 'never',
+						},
+					} }
+					onReady={ ( event ) => {
+						let canMakePayment = false;
+						if ( event.availablePaymentMethods ) {
+							canMakePayment =
+								event.availablePaymentMethods[ paymentMethod ];
+						}
+						resolve( canMakePayment );
+						root.unmount();
+						containerEl.remove();
+					} }
+				/>
+			</Elements>
+		);
+	}
+);