Check payment method is available before rendering it (#9378)

Co-authored-by: Brian Borman <[email protected]>

Author: asumaran

changelog/as-fix-empty-express-checkout-element

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Check payment method is available before rendering it.

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

@@ -40,11 +40,7 @@ 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' ) {
-			// The maximum allowed size is 55px.
-			buttonOptions.buttonHeight = Math.min(
-				buttonOptions.buttonHeight + 0.4,
-				55
-			);
+			buttonOptions.buttonHeight = buttonOptions.buttonHeight + 0.4;
 		}
 	}
 
@@ -56,6 +52,11 @@ const adjustButtonHeights = ( buttonOptions, expressPaymentMethod ) => {
 		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;
 };
 

client/express-checkout/blocks/express-checkout-element.scss

@@ -14,3 +14,10 @@
 	margin: 24px 0 !important;
 	height: 20px;
 }
+
+.wc-block-components-express-payment
+	.wc-block-components-express-payment__event-buttons
+	> li {
+	margin-left: 1px !important;
+	width: 99% !important;
+}

client/express-checkout/blocks/index.js

@@ -6,6 +6,7 @@ import { getConfig } from 'wcpay/utils/checkout';
 import ApplePayPreview from './components/apple-pay-preview';
 import ExpressCheckoutContainer from './components/express-checkout-container';
 import GooglePayPreview from './components/google-pay-preview';
+import { checkPaymentMethodIsAvailable } from '../utils/checkPaymentMethodIsAvailable';
 
 const expressCheckoutElementApplePay = ( api ) => ( {
 	paymentMethodId: PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT,
@@ -17,35 +18,41 @@ const expressCheckoutElementApplePay = ( api ) => ( {
 	supports: {
 		features: getConfig( 'features' ),
 	},
-	canMakePayment: () => {
+	canMakePayment: ( { cart } ) => {
 		if ( typeof wcpayExpressCheckoutParams === 'undefined' ) {
 			return false;
 		}
 
-		return true;
+		return new Promise( ( resolve ) => {
+			checkPaymentMethodIsAvailable( 'applePay', cart, resolve );
+		} );
 	},
 } );
 
-const expressCheckoutElementGooglePay = ( api ) => ( {
-	paymentMethodId: PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT,
-	name: PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT + '_googlePay',
-	content: (
-		<ExpressCheckoutContainer
-			api={ api }
-			expressPaymentMethod="googlePay"
-		/>
-	),
-	edit: <GooglePayPreview />,
-	supports: {
-		features: getConfig( 'features' ),
-	},
-	canMakePayment: () => {
-		if ( typeof wcpayExpressCheckoutParams === 'undefined' ) {
-			return false;
-		}
+const expressCheckoutElementGooglePay = ( api ) => {
+	return {
+		paymentMethodId: PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT,
+		name: PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT + '_googlePay',
+		content: (
+			<ExpressCheckoutContainer
+				api={ api }
+				expressPaymentMethod="googlePay"
+			/>
+		),
+		edit: <GooglePayPreview />,
+		supports: {
+			features: getConfig( 'features' ),
+		},
+		canMakePayment: ( { cart } ) => {
+			if ( typeof wcpayExpressCheckoutParams === 'undefined' ) {
+				return false;
+			}
 
-		return true;
-	},
-} );
+			return new Promise( ( resolve ) => {
+				checkPaymentMethodIsAvailable( 'googlePay', cart, resolve );
+			} );
+		},
+	};
+};
 
 export { expressCheckoutElementApplePay, expressCheckoutElementGooglePay };

client/express-checkout/utils/checkPaymentMethodIsAvailable.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import ReactDOM from 'react-dom';
+import { ExpressCheckoutElement, Elements } from '@stripe/react-stripe-js';
+import { memoize } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import { isLinkEnabled } from 'wcpay/checkout/utils/upe';
+import request from 'wcpay/checkout/utils/request';
+import WCPayAPI from 'wcpay/checkout/api';
+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 }`
+			)
+		);
+
+		const api = new WCPayAPI(
+			{
+				publishableKey: getUPEConfig( 'publishableKey' ),
+				accountId: getUPEConfig( 'accountId' ),
+				forceNetworkSavedCards: getUPEConfig(
+					'forceNetworkSavedCards'
+				),
+				locale: getUPEConfig( 'locale' ),
+				isStripeLinkEnabled: isLinkEnabled(
+					getUPEConfig( 'paymentMethodsConfig' )
+				),
+			},
+			request
+		);
+
+		root.render(
+			<Elements
+				stripe={ api.loadStripe() }
+				options={ {
+					mode: 'payment',
+					paymentMethodCreation: 'manual',
+					amount: Number( cart.cartTotals.total_price ),
+					currency: cart.cartTotals.currency_code.toLowerCase(),
+				} }
+			>
+				<ExpressCheckoutElement
+					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();
+					} }
+				/>
+			</Elements>
+		);
+	}
+);

includes/express-checkout/class-wc-payments-express-checkout-button-display-handler.php

@@ -95,6 +95,10 @@ 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' ] );
@@ -174,6 +178,31 @@ 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.
 	 *