Implement payments via Express Checkout Element on the Cart and Check…

…out pages (#8914)

Co-authored-by: Rafael Zaleski <rafaelzaleski@users.noreply.github.com>
Co-authored-by: Kristófer R <kristofer.thorlaksson@automattic.com>
Co-authored-by: Kristófer Reykjalín <13835680+reykjalin@users.noreply.github.com>
Co-authored-by: César Costa <10233985+cesarcosta99@users.noreply.github.com>

changelog/kreykjalin-8868-ece-cart-and-checkout-page

@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add support for ECE elements on the Shortcode Cart and Checkout pages

client/express-checkout/blocks/hooks/use-express-checkout.js

@@ -40,7 +40,7 @@ export const useExpressCheckout = ( {
 	};
 
 	const abortPayment = ( onConfirmEvent, message ) => {
-		onConfirmEvent.paymentFailed( 'fail' );
+		onConfirmEvent.paymentFailed( { reason: 'fail' } );
 		setExpressPaymentError( message );
 	};
 

client/express-checkout/event-handlers.js

@@ -9,34 +9,42 @@ import {
 import { getErrorMessageFromNotice } from './utils/index';
 
 export const shippingAddressChangeHandler = async ( api, event, elements ) => {
-	const response = await api.expressCheckoutECECalculateShippingOptions(
-		normalizeShippingAddress( event.address )
-	);
+	try {
+		const response = await api.expressCheckoutECECalculateShippingOptions(
+			normalizeShippingAddress( event.address )
+		);
 
-	if ( response.result === 'success' ) {
-		elements.update( {
-			amount: response.total.amount,
-		} );
-		event.resolve( {
-			shippingRates: response.shipping_options,
-			lineItems: normalizeLineItems( response.displayItems ),
-		} );
-	} else {
+		if ( response.result === 'success' ) {
+			elements.update( {
+				amount: response.total.amount,
+			} );
+			event.resolve( {
+				shippingRates: response.shipping_options,
+				lineItems: normalizeLineItems( response.displayItems ),
+			} );
+		} else {
+			event.reject();
+		}
+	} catch ( e ) {
 		event.reject();
 	}
 };
 
 export const shippingRateChangeHandler = async ( api, event, elements ) => {
-	const response = await api.paymentRequestUpdateShippingDetails(
-		event.shippingRate
-	);
+	try {
+		const response = await api.paymentRequestUpdateShippingDetails(
+			event.shippingRate
+		);
 
-	if ( response.result === 'success' ) {
-		elements.update( { amount: response.total.amount } );
-		event.resolve( {
-			lineItems: normalizeLineItems( response.displayItems ),
-		} );
-	} else {
+		if ( response.result === 'success' ) {
+			elements.update( { amount: response.total.amount } );
+			event.resolve( {
+				lineItems: normalizeLineItems( response.displayItems ),
+			} );
+		} else {
+			event.reject();
+		}
+	} catch ( e ) {
 		event.reject();
 	}
 };
@@ -88,6 +96,6 @@ export const onConfirmHandler = async (
 			completePayment( redirectUrl );
 		}
 	} catch ( e ) {
-		return abortPayment( event, error.message );
+		return abortPayment( event, e.message );
 	}
 };

client/express-checkout/index.js

@@ -81,7 +81,7 @@ jQuery( ( $ ) => {
 		 * @param {string} message Error message to display.
 		 */
 		abortPayment: ( payment, message ) => {
-			payment.paymentFailed();
+			payment.paymentFailed( { reason: 'fail' } );
 			wcpayECE.unblock();
 
 			$( '.woocommerce-error' ).remove();