@akinon/pz-masterpass-rest 2.0.56-rc.0 → 2.0.56

package/src/hooks/use-masterpass-payment-pending.test.tsx

@@ -0,0 +1,255 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { configureStore } from '@reduxjs/toolkit';
+
+import masterpassRestReducer from '../redux/reducer';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
+
+const prepareMock = jest.fn();
+const finalizeMock = jest.fn();
+const binNumberMock = jest.fn();
+const installmentMock = jest.fn();
+const processPaymentMock = jest.fn();
+const directPaymentMock = jest.fn();
+const handleResponseMock = jest.fn();
+
+const asMutation = (fn: jest.Mock) => () =>
+  [(arg: unknown) => ({ unwrap: () => fn(arg) }), { isLoading: false }];
+
+jest.mock('../redux/api', () => ({
+  usePrepareMasterpassOrderMutation: asMutation(prepareMock),
+  useFinalizeMasterpassOrderMutation: asMutation(finalizeMock),
+  useSetMasterpassRestBinNumberMutation: asMutation(binNumberMock),
+  useCheckoutMasterpassInstallmentMutation: asMutation(installmentMock),
+  useQueryMasterpassRewardsMutation: asMutation(jest.fn()),
+  useSelectMasterpassRewardsMutation: asMutation(jest.fn())
+}));
+
+jest.mock('../services/payment', () => ({
+  PaymentService: class {
+    processPayment = processPaymentMock;
+    directPayment = directPaymentMock;
+  }
+}));
+
+jest.mock('../utils/response-handler', () => ({
+  handleMasterpassResponse: (...args: unknown[]) => handleResponseMock(...args)
+}));
+
+jest.mock('./useMasterpassToken', () => ({
+  useMasterpassToken: () => ({
+    refetch: jest.fn(async () => ({ data: { token: 'fresh-token' } }))
+  })
+}));
+
+// Imported after the mocks so the hook picks them up.
+import { useMasterpassPayment } from './useMasterpassPayment';
+
+const PREPARED_ORDER = {
+  pre_order: { total_amount_with_interest: '100.00' },
+  context_list: [{ page_context: { order_no: 'ORDER-1', extras: {} } }]
+};
+
+const SELECTED_CARD = { cardAlias: 'my card', cardBin: '454671' };
+const SELECTED_INSTALLMENT = { pk: 1, installment_count: 1 };
+
+const NEW_CARD_FORM = {
+  cardNumber: '4546 7112 3456 7890',
+  cardholderName: 'Test User',
+  expiryDate: '12/30',
+  cvv: '123'
+};
+
+const renderPaymentHook = ({ withNewCardForm = false } = {}) => {
+  const store = configureStore({
+    reducer: { masterpassRest: masterpassRestReducer },
+    middleware: (getDefault) => getDefault({ serializableCheck: false })
+  });
+
+  store.dispatch({
+    type: 'masterpassRest/updatePaymentState',
+    payload: {
+      selectedCard: SELECTED_CARD,
+      selectedInstallment: SELECTED_INSTALLMENT,
+      cvc: '123',
+      useThreeD: true
+    }
+  });
+
+  if (withNewCardForm) {
+    store.dispatch({
+      type: 'masterpassRest/setNewCardFormData',
+      payload: NEW_CARD_FORM
+    });
+  }
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <Provider store={store}>{children}</Provider>
+  );
+
+  return { ...renderHook(() => useMasterpassPayment(), { wrapper }), store };
+};
+
+beforeEach(() => {
+  prepareMock.mockResolvedValue(PREPARED_ORDER);
+  finalizeMock.mockResolvedValue({ errors: null });
+  processPaymentMock.mockResolvedValue({ success: true, data: { result: {} } });
+  directPaymentMock.mockResolvedValue({ success: true, data: { result: {} } });
+  handleResponseMock.mockResolvedValue({ success: true });
+});
+
+describe('order number lifecycle during payment', () => {
+  it('marks the order number pending as soon as it is bound to a transaction', async () => {
+    // The SDK call never resolves, so the assertion sees the state the user is
+    // in while the bank page is open.
+    processPaymentMock.mockImplementation(() => new Promise(() => {}));
+
+    const { result } = renderPaymentHook();
+
+    act(() => {
+      void result.current.processPayment();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+
+  it('releases the order number once the backend has completed the order', async () => {
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(finalizeMock).toHaveBeenCalled();
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('keeps the order number pending while the shopper is redirected to 3D', async () => {
+    handleResponseMock.mockResolvedValue({
+      requires3D: true,
+      redirectUrl: 'https://bank.example/3d'
+    });
+
+    // jsdom refuses real navigation; the assignment itself is not under test.
+    const location = window.location;
+    delete (window as any).location;
+    (window as any).location = { ...location, href: '' };
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.processPayment();
+    });
+
+    expect(outcome.requiresRedirect).toBe(true);
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+
+    (window as any).location = location;
+  });
+
+  it('keeps the order number pending while a verification step is open', async () => {
+    handleResponseMock.mockResolvedValue({
+      success: false,
+      requiresOTP: true,
+      otpType: 'OTP'
+    });
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+
+  it('releases the order number when the payment is rejected outright', async () => {
+    handleResponseMock.mockResolvedValue({
+      success: false,
+      message: 'Insufficient funds'
+    });
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('releases the order number when the flow throws', async () => {
+    prepareMock.mockRejectedValue(new Error('network down'));
+    setPaymentPending('STALE-ORDER');
+
+    const { result } = renderPaymentHook();
+
+    await act(async () => {
+      await result.current.processPayment();
+    });
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('marks the order number pending on the new-card flow too', async () => {
+    directPaymentMock.mockImplementation(() => new Promise(() => {}));
+
+    const { result } = renderPaymentHook({ withNewCardForm: true });
+
+    act(() => {
+      void result.current.processDirectPayment();
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-1');
+  });
+});
+
+describe('completing a payment after a verification step', () => {
+  it('sends the verification result to the backend and releases the order number', async () => {
+    setPaymentPending('ORDER-1');
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.finalizePaymentAfterVerification({
+        result: { responseCode: '0000', token: 'verified-token' }
+      });
+    });
+
+    expect(finalizeMock).toHaveBeenCalledWith({
+      responseCode: '0000',
+      token: 'verified-token',
+      three_d_secure: true,
+      transactionType: 'PURCHASE_3D'
+    });
+    expect(outcome.success).toBe(true);
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('surfaces backend errors instead of reporting success', async () => {
+    finalizeMock.mockResolvedValue({ errors: { non_field_errors: 'ORDER_NO_MISMATCH' } });
+
+    const { result } = renderPaymentHook();
+
+    let outcome: any;
+    await act(async () => {
+      outcome = await result.current.finalizePaymentAfterVerification({
+        result: { responseCode: '0000', token: 'verified-token' }
+      });
+    });
+
+    expect(outcome.success).toBe(false);
+    expect(outcome.message).toEqual({ non_field_errors: 'ORDER_NO_MISMATCH' });
+  });
+});

package/src/hooks/useMasterpassAccount.ts

@@ -19,12 +19,12 @@ import {
   handleMasterpassResponse,
   handleVerification
 } from '../utils/response-handler';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
 import type {
   AccountAccessSuccessResponse,
   CardModel
 } from '../types/account.types';
 import { useMasterpassToken } from './useMasterpassToken';
-import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 
 export const useMasterpassAccount = () => {
   const dispatch = useDispatch();
@@ -41,16 +41,7 @@ export const useMasterpassAccount = () => {
 
   const initializeAccount = useCallback(
     async (newTokenData: any, rawToken?: string) => {
-      if (!newTokenData?.AccountKey) {
-        dispatch(
-          setAccountStatus({
-            isAccountNotFound: false,
-            isAccountNotLinked: true,
-            shouldShowDirectForm: true
-          })
-        );
-        return;
-      }
+      if (!newTokenData?.AccountKey) return;
 
       const accountService = new AccountService(rawToken || token, newTokenData?.MerchantId);
 
@@ -136,19 +127,13 @@ export const useMasterpassAccount = () => {
     dispatch(resetState());
   }, [dispatch]);
 
-  const refreshToken = async (options?: {
-    three_d?: boolean;
-    skipReset?: boolean;
-  }) => {
+  const refreshToken = async (options?: { three_d?: boolean; skipReset?: boolean }) => {
     if (options?.three_d !== false && !options?.skipReset) {
       resetData();
     }
     const result = await refetch(options);
     if (result?.data?.token) {
-      const decodedToken = decodeMasterpassToken(result.data.token);
-      if (!decodedToken) {
-        return null;
-      }
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -202,6 +187,7 @@ export const useMasterpassAccount = () => {
         dispatch(
           updateModalState({
             otpType: result.otpType,
+            otpContext: 'account',
             verificationData: result.data,
             showLinkModal: false,
             showOTPModal: true
@@ -221,9 +207,22 @@ export const useMasterpassAccount = () => {
   const handleOTPSubmit = useCallback(
     async (otp: string, texts?: any) => {
       const result = await handleVerification(otp, token, tokenData?.MerchantId);
+      const isPaymentContext = modalState.otpContext === 'payment';
 
       if (result.success) {
         dispatch(setShowOTPModal(false));
+
+        // A payment-context OTP still has an open Masterpass transaction. The
+        // caller has to complete it against the backend; refreshing the account
+        // here would leave the order unfinalized.
+        if (isPaymentContext) {
+          return {
+            success: true,
+            isPaymentContext: true,
+            verificationData: result.data
+          };
+        }
+
         await refreshAccountData();
         return { success: true };
       } else if (result.sessionExpired) {
@@ -234,12 +233,8 @@ export const useMasterpassAccount = () => {
             informationModalData: {
               type: 'warning',
               title: texts?.sessionExpiredTitle || 'Session Expired',
-              message:
-                texts?.sessionExpiredMessage ||
-                'Your session has expired due to inactivity. Please restart the process to continue.',
-              secondaryMessage:
-                texts?.sessionExpiredSecondaryMessage ||
-                'For security reasons, verification codes are only valid for a limited time.',
+              message: texts?.sessionExpiredMessage || 'Your session has expired due to inactivity. Please restart the process to continue.',
+              secondaryMessage: texts?.sessionExpiredSecondaryMessage || 'For security reasons, verification codes are only valid for a limited time.',
               buttonText: texts?.sessionExpiredButton || 'Start Again'
             }
           })
@@ -250,6 +245,13 @@ export const useMasterpassAccount = () => {
         };
       } else if (result.requires3D && result.redirectUrl) {
         dispatch(setShowOTPModal(false));
+
+        // Leaving the tab for the bank restarts the wait, so refresh the record
+        // without losing the order number it was opened with.
+        if (isPaymentContext) {
+          setPaymentPending(getPaymentPending()?.orderNo ?? null);
+        }
+
         window.location.href = result.redirectUrl;
         return {
           success: false,
@@ -277,7 +279,13 @@ export const useMasterpassAccount = () => {
         };
       }
     },
-    [dispatch, refreshAccountData, token, tokenData?.MerchantId]
+    [
+      dispatch,
+      refreshAccountData,
+      token,
+      tokenData?.MerchantId,
+      modalState.otpContext
+    ]
   );
 
   const handleRemoveCard = useCallback(
@@ -355,7 +363,7 @@ export const useMasterpassAccount = () => {
         const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
         if (!activeTokenData?.AccountKey) {
-          return { success: false, message: '' };
+          throw new Error('Token data not available');
         }
 
         const accountService = new AccountService(activeToken, activeMerchantId);
@@ -388,6 +396,7 @@ export const useMasterpassAccount = () => {
           dispatch(
             updateModalState({
               otpType: result.otpType,
+              otpContext: 'account',
               verificationData: result.data,
               showLinkModal: false,
               showOTPModal: true

package/src/hooks/useMasterpassPayment.ts

@@ -25,11 +25,12 @@ import {
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
-import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 import {
   createPaymentRequest,
   createDirectPaymentRequest,
-  getTransactionType
+  getTransactionType,
+  setPaymentPending,
+  clearPaymentPending
 } from '../utils/payment-utils';
 import { handleMasterpassResponse } from '../utils/response-handler';
 import type { Installment, RewardItem } from '../types/payment.types';
@@ -94,10 +95,7 @@ export const useMasterpassPayment = (
   const refreshTokenForPayment = useCallback(async () => {
     const result = await refetchToken({ skipReset: true });
     if (result?.data?.token) {
-      const decodedToken = decodeMasterpassToken(result.data.token);
-      if (!decodedToken) {
-        return null;
-      }
+      const decodedToken = window.Utils.decodeJwt(result.data.token);
       return {
         tokenData: decodedToken,
         token: result.data.token,
@@ -252,13 +250,20 @@ export const useMasterpassPayment = (
 
       dispatch(setOrderData(prepareResult));
 
+      const orderNo = prepareResult.context_list?.[0]?.page_context?.order_no;
+
+      // From here on the order number is bound to a Masterpass transaction.
+      // Regenerating it before that transaction settles makes the backend
+      // reject the completion with ORDER_NO_MISMATCH.
+      setPaymentPending(orderNo);
+
       const paymentService = new PaymentService(activeToken, activeMerchantId);
       const paymentRequest = createPaymentRequest({
         cvc,
         cardAlias: selectedCard.cardAlias,
         accountKey: activeTokenData.AccountKey,
         amount: prepareResult.pre_order?.total_amount_with_interest,
-        orderNo: prepareResult.context_list?.[0]?.page_context?.order_no,
+        orderNo,
         currencyCode: currency,
         installmentCount: selectedInstallment.installment_count,
         authenticationMethod: activeTokenData.AuthenticationMethod,
@@ -288,6 +293,7 @@ export const useMasterpassPayment = (
         }).unwrap();
 
         dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
 
         if (finalizeResult.errors) {
           return { success: false, message: finalizeResult.errors };
@@ -297,6 +303,10 @@ export const useMasterpassPayment = (
         return { success: true };
       }
 
+      if (!response.requiresOTP) {
+        clearPaymentPending();
+      }
+
       return {
         success: response.success,
         requiresOTP: response.requiresOTP,
@@ -304,6 +314,7 @@ export const useMasterpassPayment = (
         message: response.message
       };
     } catch (error) {
+      clearPaymentPending();
       return {
         success: false,
         message:
@@ -351,12 +362,23 @@ export const useMasterpassPayment = (
       const activeToken = freshResult?.token;
       const activeMerchantId = freshResult?.merchantId || tokenData?.MerchantId;
 
+      if (!activeTokenData?.AccountKey) {
+        return { success: false, message: 'Token data not available' };
+      }
+
       const prepareResult = await prepareMasterpassOrder({
         use_three_d: paymentState.useThreeD
       }).unwrap();
 
       dispatch(setOrderData(prepareResult));
 
+      const orderNo = prepareResult.context_list?.[0]?.page_context?.order_no;
+
+      // From here on the order number is bound to a Masterpass transaction.
+      // Regenerating it before that transaction settles makes the backend
+      // reject the completion with ORDER_NO_MISMATCH.
+      setPaymentPending(orderNo);
+
       const paymentService = new PaymentService(activeToken, activeMerchantId);
       const directPaymentRequest = createDirectPaymentRequest({
         cvc: newCardFormData.cvv,
@@ -364,13 +386,13 @@ export const useMasterpassPayment = (
         cardHolderName: newCardFormData.cardholderName || '',
         cardAlias: newCardFormData.cardAlias || '',
         expiryDate: newCardFormData.expiryDate,
-        accountKey: activeTokenData?.AccountKey || '',
+        accountKey: activeTokenData.AccountKey,
         amount: prepareResult.pre_order?.total_amount_with_interest,
-        orderNo: prepareResult.context_list?.[0]?.page_context?.order_no,
+        orderNo,
         currencyCode: currency,
         installmentCount: selectedInstallment.installment_count,
-        authenticationMethod: activeTokenData?.AuthenticationMethod,
-        secure3DModel: activeTokenData?.Secure3dType,
+        authenticationMethod: activeTokenData.AuthenticationMethod,
+        secure3DModel: activeTokenData.Secure3dType,
         terminalGroupId,
         acquirerIcaNumber: bankIca,
         additionalFields:
@@ -398,6 +420,7 @@ export const useMasterpassPayment = (
         }).unwrap();
 
         dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
 
         if (finalizeResult.errors) {
           return { success: false, message: finalizeResult.errors };
@@ -407,6 +430,10 @@ export const useMasterpassPayment = (
         return { success: true };
       }
 
+      if (!response.requiresOTP) {
+        clearPaymentPending();
+      }
+
       return {
         success: response.success,
         requiresOTP: response.requiresOTP,
@@ -414,6 +441,7 @@ export const useMasterpassPayment = (
         message: response.message
       };
     } catch (error) {
+      clearPaymentPending();
       return {
         success: false,
         message:
@@ -435,6 +463,41 @@ export const useMasterpassPayment = (
     dispatch
   ]);
 
+  const finalizePaymentAfterVerification = useCallback(
+    async (verificationResponse: any): Promise<PaymentResult> => {
+      const { useThreeD } = paymentState;
+
+      try {
+        const finalizeResult = await finalizeMasterpassOrder({
+          responseCode: verificationResponse?.result?.responseCode,
+          token: verificationResponse?.result?.token,
+          three_d_secure: useThreeD,
+          transactionType: getTransactionType(useThreeD)
+        }).unwrap();
+
+        dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
+
+        if (finalizeResult.errors) {
+          return { success: false, message: finalizeResult.errors };
+        }
+
+        dispatch(setOrderCompleted(true));
+        return { success: true };
+      } catch (error) {
+        clearPaymentPending();
+        return {
+          success: false,
+          message:
+            error instanceof Error
+              ? error.message
+              : 'An unexpected error occurred'
+        };
+      }
+    },
+    [paymentState, finalizeMasterpassOrder, dispatch]
+  );
+
   return {
     paymentState,
 
@@ -451,6 +514,7 @@ export const useMasterpassPayment = (
     handleInstallmentSelect,
     processPayment,
     processDirectPayment,
+    finalizePaymentAfterVerification,
     fetchRewardsForCard,
     openRewardModal,
     closeRewardModal,

package/src/hooks/useMasterpassToken.ts

@@ -14,10 +14,6 @@ import {
   updatePaymentState
 } from '../redux/reducer';
 import { isTokenExpired } from '../utils/payment-utils';
-import {
-  waitForUtilsReady,
-  decodeMasterpassToken
-} from '../utils/wait-for-utils-ready';
 
 interface UseMasterpassTokenProps {
   useThreeD: boolean;
@@ -69,37 +65,12 @@ export const useMasterpassToken = ({
       return;
     }
 
-    if (!(data?.token && data.token !== reduxToken)) {
-      return;
-    }
-
-    const token = data.token;
-    const extras = data.extras;
-    let cancelled = false;
-
-    // The token request can resolve before the Masterpass SDK script has
-    // loaded (common on slow/3G networks). Wait for `window.Utils.decodeJwt`
-    // to exist before decoding, otherwise the checkout crashes with
-    // `Cannot read properties of undefined (reading 'decodeJwt')`.
-    //
-    // Redux writes are deferred until after the wait resolves: dispatching
-    // `setMasterpassRestToken` synchronously would change the `reduxToken`
-    // dependency, re-run this effect and cancel the in-flight decode.
-    (async () => {
-      const ready = await waitForUtilsReady();
-      if (cancelled) {
-        return;
-      }
-
-      dispatch(setMasterpassRestToken(token));
-      dispatch(setMasterpassTerminalGroupId(extras.terminal_group_id));
-      dispatch(setMasterpassBankIca(extras.bank_ica));
-
-      const decodedToken = ready ? decodeMasterpassToken(token) : undefined;
-      if (!decodedToken) {
-        return;
-      }
+    if (data?.token && data.token !== reduxToken) {
+      dispatch(setMasterpassRestToken(data.token));
+      dispatch(setMasterpassTerminalGroupId(data.extras.terminal_group_id));
+      dispatch(setMasterpassBankIca(data.extras.bank_ica));
 
+      const decodedToken = window.Utils.decodeJwt(data.token);
       dispatch(setMasterpassRestTokenData(decodedToken));
 
       if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
@@ -107,11 +78,7 @@ export const useMasterpassToken = ({
       }
 
       stableOnTokenReady(decodedToken);
-    })();
-
-    return () => {
-      cancelled = true;
-    };
+    }
   }, [data?.token, reduxToken, dispatch, stableOnTokenReady]);
 
   const refetchToken = useCallback(
@@ -127,19 +94,15 @@ export const useMasterpassToken = ({
         );
         dispatch(setMasterpassBankIca(result.data.extras.bank_ica));
 
-        await waitForUtilsReady();
-        const decodedToken = decodeMasterpassToken(result.data.token);
-
-        if (decodedToken) {
-          dispatch(setMasterpassRestTokenData(decodedToken));
+        const decodedToken = window.Utils.decodeJwt(result.data.token);
+        dispatch(setMasterpassRestTokenData(decodedToken));
 
-          if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
-            dispatch(updatePaymentState({ useThreeD: false }));
-          }
+        if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
+          dispatch(updatePaymentState({ useThreeD: false }));
+        }
 
-          if (options?.three_d !== false && !options?.skipReset) {
-            stableOnTokenReady(decodedToken);
-          }
+        if (options?.three_d !== false && !options?.skipReset) {
+          stableOnTokenReady(decodedToken);
         }
       }
 

package/src/index.ts

@@ -19,7 +19,6 @@ export * from './utils/reward-utils';
 export * from './utils/card-utils';
 export * from './utils/validation-schemas';
 export * from './utils/masterpass-sdk';
-export * from './utils/wait-for-utils-ready';
 export type { MasterpassEnvironment } from './utils/constants';
 
 export * from './types/payment.types';