Register Independent ECE Payment Methods within the Blocks Implementa…

…tion (#9047)

changelog/add-9045-split-ece-pms-registration-for-blocks

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add independent ECE instances in WC Blocks.

client/checkout/blocks/index.js

@@ -19,7 +19,10 @@ import PaymentMethodLabel from './payment-method-label';
 import request from '../utils/request';
 import enqueueFraudScripts from 'fraud-scripts';
 import paymentRequestPaymentMethod from '../../payment-request/blocks';
-import expressCheckoutElementPaymentMethod from '../../express-checkout/blocks';
+import {
+	expressCheckoutElementApplePay,
+	expressCheckoutElementGooglePay,
+} from '../../express-checkout/blocks';
 import tokenizedCartPaymentRequestPaymentMethod from '../../tokenized-payment-request/blocks';
 
 import {
@@ -161,7 +164,8 @@ if ( getUPEConfig( 'isTokenizedCartPrbEnabled' ) ) {
 		tokenizedCartPaymentRequestPaymentMethod( api )
 	);
 } else if ( getUPEConfig( 'isExpressCheckoutElementEnabled' ) ) {
-	registerExpressPaymentMethod( expressCheckoutElementPaymentMethod( api ) );
+	registerExpressPaymentMethod( expressCheckoutElementApplePay( api ) );
+	registerExpressPaymentMethod( expressCheckoutElementGooglePay( api ) );
 } else {
 	registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
 }

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

@@ -2,11 +2,38 @@
  * External dependencies
  */
 import { ExpressCheckoutElement } from '@stripe/react-stripe-js';
+/**
+ * Internal dependencies
+ */
 import {
 	shippingAddressChangeHandler,
 	shippingRateChangeHandler,
 } from '../../event-handlers';
 import { useExpressCheckout } from '../hooks/use-express-checkout';
+import { PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT } from 'wcpay/checkout/constants';
+
+const getPaymentMethodsOverride = ( enabledPaymentMethod ) => {
+	const allDisabled = {
+		amazonPay: 'never',
+		applePay: 'never',
+		googlePay: 'never',
+		link: 'never',
+		paypal: 'never',
+	};
+
+	const enabledParam = [ 'applePay', 'googlePay' ].includes(
+		enabledPaymentMethod
+	)
+		? 'always'
+		: 'auto';
+
+	return {
+		paymentMethods: {
+			...allDisabled,
+			[ enabledPaymentMethod ]: enabledParam,
+		},
+	};
+};
 
 /**
  * ExpressCheckout express payment method component.
@@ -22,6 +49,7 @@ const ExpressCheckoutComponent = ( {
 	setExpressPaymentError,
 	onClick,
 	onClose,
+	expressPaymentMethod = '',
 } ) => {
 	const {
 		buttonOptions,
@@ -45,12 +73,33 @@ const ExpressCheckoutComponent = ( {
 	const onShippingRateChange = ( event ) =>
 		shippingRateChangeHandler( api, event, elements );
 
+	const onElementsReady = ( event ) => {
+		const paymentMethodContainer = document.getElementById(
+			`express-payment-method-${ PAYMENT_METHOD_NAME_EXPRESS_CHECKOUT_ELEMENT }_${ expressPaymentMethod }`
+		);
+
+		const availablePaymentMethods = event.availablePaymentMethods || {};
+
+		if (
+			paymentMethodContainer &&
+			! availablePaymentMethods[ expressPaymentMethod ]
+		) {
+			paymentMethodContainer.style.display = 'none';
+		}
+
+		// Any actions that WooPayments needs to perform.
+		onReady( event );
+	};
+
 	return (
 		<ExpressCheckoutElement
-			options={ buttonOptions }
+			options={ {
+				...buttonOptions,
+				...getPaymentMethodsOverride( expressPaymentMethod ),
+			} }
 			onClick={ onButtonClick }
 			onConfirm={ onConfirm }
-			onReady={ onReady }
+			onReady={ onElementsReady }
 			onCancel={ onCancel }
 			onShippingAddressChange={ onShippingAddressChange }
 			onShippingRateChange={ onShippingRateChange }

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

@@ -1,16 +1,21 @@
 /**
  * External dependencies
  */
+import { useMemo } from 'react';
 import { Elements } from '@stripe/react-stripe-js';
-import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
 
 /**
  * Internal dependencies
  */
 import ExpressCheckoutComponent from './express-checkout-component';
+import { getExpressCheckoutButtonAppearance } from 'wcpay/express-checkout/utils';
 
 const ExpressCheckoutContainer = ( props ) => {
-	const { stripe, billing } = props;
+	const { api, billing } = props;
+
+	const stripePromise = useMemo( () => {
+		return api.loadStripe();
+	}, [ api ] );
 
 	const options = {
 		mode: 'payment',
@@ -22,7 +27,7 @@ const ExpressCheckoutContainer = ( props ) => {
 
 	return (
 		<div style={ { minHeight: '50px' } }>
-			<Elements stripe={ stripe } options={ options }>
+			<Elements stripe={ stripePromise } options={ options }>
 				<ExpressCheckoutComponent { ...props } />
 			</Elements>
 		</div>