feat(payment): Added BCP FL corresponding error for 422 payment status (#2941)

* feat(payment): Added corresponding error for 422 payment status

* feat(payment): Added corresponding error for 422 payment status

Author: andriiVitvitskyi1990

packages/bigcommerce-payments-integration/src/bigcommerce-payments-fastlane/bigcommerce-payments-fastlane-payment-initialize-options.ts

@@ -61,6 +61,11 @@ export default interface BigCommercePaymentsFastlanePaymentInitializeOptions {
      */
     onChange?: (showPayPalCardSelector: () => Promise<CardInstrument | undefined>) => void;
 
+    /**
+     * Callback that handles errors
+     */
+    onError?: (error: unknown) => void;
+
     /**
      * Is a stylisation options for customizing BigCommercePayments Fastlane components
      *

packages/bigcommerce-payments-integration/src/bigcommerce-payments-fastlane/bigcommerce-payments-fastlane-payment-strategy.spec.ts

@@ -407,6 +407,10 @@ describe('BigCommercePaymentsFastlanePaymentStrategy', () => {
     });
 
     describe('#execute()', () => {
+        afterEach(() => {
+            jest.clearAllMocks();
+        });
+
         const mockedInstrumentId = 'mockInstrumentId123';
 
         const executeOptions = {
@@ -740,6 +744,34 @@ describe('BigCommercePaymentsFastlanePaymentStrategy', () => {
                 }
             });
         });
+
+        it('throws specific error when get 422 error on payment request', async () => {
+            const initOptions = {
+                methodId,
+                bigcommerce_payments_fastlane: {
+                    onInit: jest.fn(),
+                    onChange: jest.fn(),
+                    onError: jest.fn(),
+                },
+            };
+            jest.spyOn(paymentIntegrationService, 'submitPayment').mockRejectedValue({
+                name: 'Error',
+                message: 'Payment request failed',
+                response: {
+                    status: 422,
+                    name: 'INVALID_REQUEST',
+                },
+            });
+            await strategy.initialize(initOptions);
+
+            try {
+                await strategy.execute(executeOptions);
+            } catch (error: unknown) {
+                expect(initOptions.bigcommerce_payments_fastlane.onError).toHaveBeenCalledWith({
+                    translationKey: 'payment.errors.invalid_request_error',
+                });
+            }
+        });
     });
 
     describe('#onInit option callback', () => {

packages/bigcommerce-payments-integration/src/bigcommerce-payments-fastlane/bigcommerce-payments-fastlane-payment-strategy.ts

@@ -2,6 +2,7 @@ import {
     BigCommercePaymentsFastlaneUtils,
     BigCommercePaymentsInitializationData,
     getFastlaneStyles,
+    isBigcommerceFastlaneRequestError,
     isPayPalFastlaneCustomer,
     PayPalFastlaneAuthenticationState,
     PayPalFastlaneCardComponentMethods,
@@ -32,14 +33,17 @@ import {
 
 import BigCommercePaymentsRequestSender from '../bigcommerce-payments-request-sender';
 
-import { WithBigCommercePaymentsFastlanePaymentInitializeOptions } from './bigcommerce-payments-fastlane-payment-initialize-options';
+import BigCommercePaymentsFastlanePaymentInitializeOptions, {
+    WithBigCommercePaymentsFastlanePaymentInitializeOptions,
+} from './bigcommerce-payments-fastlane-payment-initialize-options';
 import { LiabilityShiftEnum } from '../bigcommerce-payments-types';
 import { isExperimentEnabled } from '@bigcommerce/checkout-sdk/utility';
 
 export default class BigCommercePaymentsFastlanePaymentStrategy implements PaymentStrategy {
     private paypalComponentMethods?: PayPalFastlaneCardComponentMethods;
     private threeDSVerificationMethod?: string;
     private paypalFastlaneSdk?: PayPalFastlaneSdk;
+    private bigcommerce_payments_fastlane?: BigCommercePaymentsFastlanePaymentInitializeOptions;
     private methodId?: string;
     private orderId?: string;
 
@@ -74,6 +78,8 @@ export default class BigCommercePaymentsFastlanePaymentStrategy implements Payme
             );
         }
 
+        this.bigcommerce_payments_fastlane = bigcommerce_payments_fastlane;
+
         if (
             !bigcommerce_payments_fastlane.onInit ||
             typeof bigcommerce_payments_fastlane.onInit !== 'function'
@@ -160,6 +166,19 @@ export default class BigCommercePaymentsFastlanePaymentStrategy implements Payme
             // TODO: we should probably update this method with removeStorageSessionId for better reading experience
             this.bigCommercePaymentsFastlaneUtils.updateStorageSessionId(true);
         } catch (error) {
+            if (
+                isBigcommerceFastlaneRequestError(error) &&
+                error.response.name === 'INVALID_REQUEST'
+            ) {
+                const invalidRequestError = {
+                    translationKey: 'payment.errors.invalid_request_error',
+                };
+
+                this.handleError(invalidRequestError);
+
+                return Promise.reject();
+            }
+
             if (error instanceof Error && error.name !== 'FastlaneError') {
                 throw error;
             }
@@ -510,4 +529,13 @@ export default class BigCommercePaymentsFastlanePaymentStrategy implements Payme
 
         return isExperimentEnabled(features, 'PROJECT-7080.bcp_fastlane_three_ds');
     }
+
+    private handleError(error: unknown): void {
+        if (
+            this.bigcommerce_payments_fastlane?.onError &&
+            typeof this.bigcommerce_payments_fastlane.onError === 'function'
+        ) {
+            this.bigcommerce_payments_fastlane.onError(error);
+        }
+    }
 }

packages/bigcommerce-payments-utils/src/index.ts

@@ -21,3 +21,5 @@ export { default as PayPalSdkHelper } from './paypal-sdk-helper';
  */
 export { default as createBigCommercePaymentsFastlaneUtils } from './create-bigcommerce-payments-fastlane-utils';
 export { default as BigCommercePaymentsFastlaneUtils } from './bigcommerce-payments-fastlane-utils';
+
+export { default as isBigcommerceFastlaneRequestError } from './utils/is-bigcommerce-fastlane-request-error';

packages/bigcommerce-payments-utils/src/utils/is-bigcommerce-fastlane-request-error.spec.ts

@@ -0,0 +1,17 @@
+import isBigcommerceFastlaneRequestError, {
+    BigcommerceFastlaneRequestError,
+} from './is-bigcommerce-fastlane-request-error';
+
+describe('isBigcommerceFastlaneRequestError', () => {
+    it('should return true if paypal fastlane request is invalid', () => {
+        const invalidRequestError: BigcommerceFastlaneRequestError = {
+            name: 'Error',
+            message: 'Invalid request',
+            response: {
+                name: 'INVALID_REQUEST',
+            },
+        };
+
+        expect(isBigcommerceFastlaneRequestError(invalidRequestError)).toBe(true);
+    });
+});

packages/bigcommerce-payments-utils/src/utils/is-bigcommerce-fastlane-request-error.ts

@@ -0,0 +1,19 @@
+export interface BigcommerceFastlaneRequestError {
+    name: string;
+    message: string;
+    response: {
+        name: string;
+    };
+}
+
+export default function isBigcommerceFastlaneRequestError(
+    error: unknown,
+): error is BigcommerceFastlaneRequestError {
+    return (
+        typeof error === 'object' &&
+        error !== null &&
+        'message' in error &&
+        'response' in error &&
+        'name' in (error as BigcommerceFastlaneRequestError).response
+    );
+}