Add error handling for loadError in ECE (#9416)

Author: rafaelzaleski

changelog/fix-9414-unhandled-ece-loaderror

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Handle loadError in ECE for Block Context Initialization.

client/checkout/express-checkout-buttons.scss

@@ -2,7 +2,6 @@
 	margin-top: 1em;
 	width: 100%;
 	clear: both;
-	margin-bottom: 1.5em;
 
 	.woocommerce-cart & {
 		margin-bottom: 0;

client/express-checkout/index.js

@@ -242,7 +242,17 @@ jQuery( ( $ ) => {
 				getExpressCheckoutButtonStyleSettings()
 			);
 
-			wcpayECE.showButton( eceButton );
+			wcpayECE.renderButton( eceButton );
+
+			eceButton.on( 'loaderror', () => {
+				wcPayECEError = __(
+					'The cart is incompatible with express checkout.',
+					'woocommerce-payments'
+				);
+				if ( ! document.getElementById( 'wcpay-woopay-button' ) ) {
+					wcpayECE?.getButtonSeparator()?.hide();
+				}
+			} );
 
 			eceButton.on( 'click', function ( event ) {
 				// If login is required for checkout, display redirect confirmation dialog.
@@ -326,7 +336,19 @@ jQuery( ( $ ) => {
 				onCancelHandler();
 			} );
 
-			eceButton.on( 'ready', onReadyHandler );
+			eceButton.on( 'ready', ( onReadyParams ) => {
+				onReadyHandler( onReadyParams );
+
+				if (
+					onReadyParams?.availablePaymentMethods &&
+					Object.values(
+						onReadyParams.availablePaymentMethods
+					).filter( Boolean ).length
+				) {
+					wcpayECE.show();
+					wcpayECE.getButtonSeparator().show();
+				}
+			} );
 
 			if ( getExpressCheckoutData( 'is_product_page' ) ) {
 				wcpayECE.attachProductPageEventListeners( elements );
@@ -520,18 +542,24 @@ jQuery( ( $ ) => {
 		},
 
 		getElements: () => {
-			return $(
-				'.wcpay-payment-request-wrapper,#wcpay-express-checkout-button-separator'
-			);
+			return $( '#wcpay-express-checkout-element' );
+		},
+
+		getButtonSeparator: () => {
+			return $( '#wcpay-express-checkout-button-separator' );
 		},
 
 		show: () => {
 			wcpayECE.getElements().show();
 		},
 
-		showButton: ( eceButton ) => {
+		hide: () => {
+			wcpayECE.getElements().hide();
+			wcpayECE.getButtonSeparator().hide();
+		},
+
+		renderButton: ( eceButton ) => {
 			if ( $( '#wcpay-express-checkout-element' ).length ) {
-				wcpayECE.show();
 				eceButton.mount( '#wcpay-express-checkout-element' );
 			}
 		},

client/express-checkout/utils/checkPaymentMethodIsAvailable.js

@@ -47,6 +47,7 @@ export const checkPaymentMethodIsAvailable = memoize(
 				} }
 			>
 				<ExpressCheckoutElement
+					onLoadError={ () => resolve( false ) }
 					options={ {
 						paymentMethods: {
 							amazonPay: 'never',

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

@@ -141,7 +141,7 @@ public function display_express_checkout_buttons() {
 
 		// When Payment Request button is enabled, we need the separator markup on the page, but hidden in case the browser doesn't have any payment request methods to display.
 		// More details: https://github.com/Automattic/woocommerce-payments/pull/5399#discussion_r1073633776.
-		$separator_starts_hidden = ( $should_show_payment_request || $should_show_express_checkout_button ) && ! $should_show_woopay;
+		$separator_starts_hidden = ! $should_show_woopay;
 		if ( $should_show_woopay || $should_show_payment_request || $should_show_express_checkout_button ) {
 			?>
 			<div class='wcpay-payment-request-wrapper' >

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

@@ -288,7 +288,7 @@ public function display_express_checkout_button_html() {
 			return;
 		}
 		?>
-		<div id="wcpay-express-checkout-element"></div>
+		<div id="wcpay-express-checkout-element" style="display: none;"></div>
 		<?php
 	}