Fix ECE exception when payment fails (#10048)

Co-authored-by: Alfredo Sumaran <[email protected]>
Automattic · Jan 3, 2025 · 6846918 · 6846918
1 parent 75b102d
commit 6846918
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 28 deletions.
diff --git a/changelog/fix-9990-payment-failed-exception b/changelog/fix-9990-payment-failed-exception
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix JS exception when ECE payment fails.
diff --git a/client/express-checkout/blocks/hooks/use-express-checkout.js b/client/express-checkout/blocks/hooks/use-express-checkout.js
@@ -45,8 +45,7 @@ export const useExpressCheckout = ( {
 		window.location = redirectUrl;
 	};
 
-	const abortPayment = ( onConfirmEvent, message ) => {
-		onConfirmEvent.paymentFailed( { reason: 'fail' } );
+	const abortPayment = ( message ) => {
 		setExpressPaymentError( message );
 		onAbortPaymentHandler();
 	};

diff --git a/client/express-checkout/event-handlers.js b/client/express-checkout/event-handlers.js
@@ -77,15 +77,15 @@ export const onConfirmHandler = async (
 ) => {
 	const { error: submitError } = await elements.submit();
 	if ( submitError ) {
-		return abortPayment( event, submitError.message );
+		return abortPayment( submitError.message );
 	}
 
 	const { paymentMethod, error } = await stripe.createPaymentMethod( {
 		elements,
 	} );
 
 	if ( error ) {
-		return abortPayment( event, error.message );
+		return abortPayment( error.message );
 	}
 
 	try {
@@ -104,7 +104,6 @@ export const onConfirmHandler = async (
 
 		if ( orderResponse.result !== 'success' ) {
 			return abortPayment(
-				event,
 				getErrorMessageFromNotice( orderResponse.messages )
 			);
 		}
@@ -121,7 +120,6 @@ export const onConfirmHandler = async (
 		}
 	} catch ( e ) {
 		return abortPayment(
-			event,
 			e.message ??
 				__(
 					'There was a problem processing the order.',

diff --git a/client/express-checkout/index.js b/client/express-checkout/index.js
@@ -102,11 +102,9 @@ jQuery( ( $ ) => {
 		/**
 		 * Abort the payment and display error messages.
 		 *
-		 * @param {PaymentResponse} payment Payment response instance.
-		 * @param {string} message Error message to display.
+		 * @param {string}  message Error message to display.
 		 */
-		abortPayment: ( payment, message ) => {
-			payment.paymentFailed( { reason: 'fail' } );
+		abortPayment: ( message ) => {
 			onAbortPaymentHandler();
 
 			$( '.woocommerce-error' ).remove();

diff --git a/client/express-checkout/test/event-handlers.js b/client/express-checkout/test/event-handlers.js
@@ -283,10 +283,7 @@ describe( 'Express checkout event handlers', () => {
 			);
 
 			expect( elements.submit ).toHaveBeenCalled();
-			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
-				'Submit error'
-			);
+			expect( abortPayment ).toHaveBeenCalledWith( 'Submit error' );
 			expect( completePayment ).not.toHaveBeenCalled();
 		} );
 
@@ -310,7 +307,6 @@ describe( 'Express checkout event handlers', () => {
 				elements,
 			} );
 			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
 				'Payment method error'
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
@@ -340,7 +336,6 @@ describe( 'Express checkout event handlers', () => {
 				expectedOrderData
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
 				'Order creation error'
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
@@ -432,7 +427,6 @@ describe( 'Express checkout event handlers', () => {
 				'https://example.com/redirect'
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
 				'Intent confirmation error'
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
@@ -467,7 +461,6 @@ describe( 'Express checkout event handlers', () => {
 				expectedOrderData
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
 				'Order creation error'
 			);
 			expect( completePayment ).not.toHaveBeenCalled();
@@ -562,7 +555,6 @@ describe( 'Express checkout event handlers', () => {
 				'https://example.com/redirect'
 			);
 			expect( abortPayment ).toHaveBeenCalledWith(
-				event,
 				'Intent confirmation error'
 			);
 			expect( completePayment ).not.toHaveBeenCalled();

diff --git a/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js b/client/tokenized-express-checkout/blocks/hooks/use-express-checkout.js
@@ -45,8 +45,7 @@ export const useExpressCheckout = ( {
 		window.location = redirectUrl;
 	};
 
-	const abortPayment = ( onConfirmEvent, message ) => {
-		onConfirmEvent.paymentFailed( { reason: 'fail' } );
+	const abortPayment = ( message ) => {
 		setExpressPaymentError( message );
 		onAbortPaymentHandler();
 	};

diff --git a/client/tokenized-express-checkout/event-handlers.js b/client/tokenized-express-checkout/event-handlers.js
@@ -105,15 +105,15 @@ export const onConfirmHandler = async (
 ) => {
 	const { error: submitError } = await elements.submit();
 	if ( submitError ) {
-		return abortPayment( event, submitError.message );
+		return abortPayment( submitError.message );
 	}
 
 	const { paymentMethod, error } = await stripe.createPaymentMethod( {
 		elements,
 	} );
 
 	if ( error ) {
-		return abortPayment( event, error.message );
+		return abortPayment( error.message );
 	}
 
 	try {
@@ -133,7 +133,6 @@ export const onConfirmHandler = async (
 
 		if ( orderResponse.payment_result.payment_status !== 'success' ) {
 			return abortPayment(
-				event,
 				getErrorMessageFromNotice(
 					orderResponse.message ??
 						orderResponse.payment_result?.payment_details.find(
@@ -163,7 +162,6 @@ export const onConfirmHandler = async (
 		}
 
 		return abortPayment(
-			event,
 			getErrorMessageFromNotice(
 				e.message ||
 					e.payment_result?.payment_details.find(

diff --git a/client/tokenized-express-checkout/index.js b/client/tokenized-express-checkout/index.js
@@ -146,11 +146,9 @@ jQuery( ( $ ) => {
 		/**
 		 * Abort the payment and display error messages.
 		 *
-		 * @param {PaymentResponse} payment Payment response instance.
 		 * @param {string} message Error message to display.
 		 */
-		abortPayment: ( payment, message ) => {
-			payment.paymentFailed( { reason: 'fail' } );
+		abortPayment: ( message ) => {
 			onAbortPaymentHandler();
 
 			$( '.woocommerce-error' ).remove();