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

package/src/hooks/useMasterpassAccount.ts

@@ -19,6 +19,7 @@ import {
   handleMasterpassResponse,
   handleVerification
 } from '../utils/response-handler';
+import { getPaymentPending, setPaymentPending } from '../utils/payment-utils';
 import type {
   AccountAccessSuccessResponse,
   CardModel
@@ -186,6 +187,7 @@ export const useMasterpassAccount = () => {
         dispatch(
           updateModalState({
             otpType: result.otpType,
+            otpContext: 'account',
             verificationData: result.data,
             showLinkModal: false,
             showOTPModal: true
@@ -205,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) {
@@ -230,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,
@@ -257,7 +279,13 @@ export const useMasterpassAccount = () => {
         };
       }
     },
-    [dispatch, refreshAccountData, token, tokenData?.MerchantId]
+    [
+      dispatch,
+      refreshAccountData,
+      token,
+      tokenData?.MerchantId,
+      modalState.otpContext
+    ]
   );
 
   const handleRemoveCard = useCallback(
@@ -368,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

@@ -28,7 +28,9 @@ import { PaymentService } from '../services/payment';
 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';
@@ -248,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,
@@ -284,6 +293,7 @@ export const useMasterpassPayment = (
         }).unwrap();
 
         dispatch(setOrderData(finalizeResult));
+        clearPaymentPending();
 
         if (finalizeResult.errors) {
           return { success: false, message: finalizeResult.errors };
@@ -293,6 +303,10 @@ export const useMasterpassPayment = (
         return { success: true };
       }
 
+      if (!response.requiresOTP) {
+        clearPaymentPending();
+      }
+
       return {
         success: response.success,
         requiresOTP: response.requiresOTP,
@@ -300,6 +314,7 @@ export const useMasterpassPayment = (
         message: response.message
       };
     } catch (error) {
+      clearPaymentPending();
       return {
         success: false,
         message:
@@ -357,6 +372,13 @@ 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 directPaymentRequest = createDirectPaymentRequest({
         cvc: newCardFormData.cvv,
@@ -366,7 +388,7 @@ export const useMasterpassPayment = (
         expiryDate: newCardFormData.expiryDate,
         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,
@@ -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/redux/reducer.ts

@@ -82,6 +82,7 @@ const initialState: MasterpassRestState = {
     showRewardModal: false,
     informationModalData: null,
     otpType: 'OTP',
+    otpContext: 'account',
     verificationData: null,
     cardToDelete: null,
     removingCardId: null
@@ -270,6 +271,7 @@ const masterpassRestSlice = createSlice({
         showRewardModal: false,
         informationModalData: null,
         otpType: 'OTP',
+        otpContext: 'account',
         verificationData: null,
         cardToDelete: null,
         removingCardId: null

package/src/types/custom-render.types.ts

@@ -114,6 +114,10 @@ export type MasterpassRestOptionRenderProps = {
   cvc: string;
   error: any;
 
+  /** True while a Masterpass transaction started on this tab has not settled. */
+  isPaymentPending: boolean;
+  dismissPaymentPending: () => void;
+
   accountData: any;
   accountStatus: any;
   modalState: any;

package/src/types/payment.types.ts

@@ -102,6 +102,8 @@ export interface InformationModalData {
   buttonText: string;
 }
 
+export type OTPContext = 'account' | 'payment';
+
 export interface ModalState {
   showLinkModal: boolean;
   showOTPModal: boolean;
@@ -110,6 +112,7 @@ export interface ModalState {
   showRewardModal: boolean;
   informationModalData: InformationModalData | null;
   otpType: OTPType;
+  otpContext: OTPContext;
   verificationData: any | null;
   cardToDelete: any | null;
   removingCardId: string | null;

package/src/utils/payment-pending.test.ts

@@ -0,0 +1,89 @@
+import {
+  setPaymentPending,
+  getPaymentPending,
+  clearPaymentPending
+} from './payment-utils';
+
+const STORAGE_KEY = 'masterpass_rest_payment_pending';
+const TTL_MS = 30 * 60 * 1000;
+
+describe('payment pending record', () => {
+  it('reports nothing pending when no payment has started', () => {
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('remembers the order number the transaction was opened with', () => {
+    setPaymentPending('ORDER-123');
+
+    expect(getPaymentPending()).toEqual({
+      orderNo: 'ORDER-123',
+      startedAt: expect.any(Number)
+    });
+  });
+
+  it('still marks a payment pending when no order number is known', () => {
+    setPaymentPending(null);
+
+    const record = getPaymentPending();
+    expect(record).not.toBeNull();
+    expect(record?.orderNo).toBeNull();
+  });
+
+  it('stops reporting pending once cleared', () => {
+    setPaymentPending('ORDER-123');
+    clearPaymentPending();
+
+    expect(getPaymentPending()).toBeNull();
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('keeps a record that is still inside the ttl', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123', startedAt: Date.now() - TTL_MS + 60_000 })
+    );
+
+    expect(getPaymentPending()?.orderNo).toBe('ORDER-123');
+  });
+
+  it('expires and purges a record past the ttl so an abandoned tab recovers', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123', startedAt: Date.now() - TTL_MS - 1 })
+    );
+
+    expect(getPaymentPending()).toBeNull();
+    expect(window.sessionStorage.getItem(STORAGE_KEY)).toBeNull();
+  });
+
+  it('treats an unparseable record as not pending', () => {
+    window.sessionStorage.setItem(STORAGE_KEY, 'not-json');
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('treats a record without a timestamp as not pending', () => {
+    window.sessionStorage.setItem(
+      STORAGE_KEY,
+      JSON.stringify({ orderNo: 'ORDER-123' })
+    );
+
+    expect(getPaymentPending()).toBeNull();
+  });
+
+  it('degrades quietly when session storage is unavailable', () => {
+    const proto = Object.getPrototypeOf(window.sessionStorage);
+    const boom = () => {
+      throw new Error('storage disabled');
+    };
+    jest.spyOn(proto, 'setItem').mockImplementation(boom);
+    jest.spyOn(proto, 'getItem').mockImplementation(boom);
+    jest.spyOn(proto, 'removeItem').mockImplementation(boom);
+
+    expect(() => setPaymentPending('ORDER-123')).not.toThrow();
+    expect(getPaymentPending()).toBeNull();
+    expect(() => clearPaymentPending()).not.toThrow();
+
+    jest.restoreAllMocks();
+  });
+});

package/src/utils/payment-utils.ts

@@ -15,6 +15,53 @@ export const isTokenExpired = (
   return Date.now() >= tokenData.exp * 1000 - bufferMs;
 };
 
+const PAYMENT_PENDING_KEY = 'masterpass_rest_payment_pending';
+const PAYMENT_PENDING_TTL_MS = 30 * 60 * 1000;
+
+export interface PaymentPendingRecord {
+  orderNo: string | null;
+  startedAt: number;
+}
+
+export const setPaymentPending = (orderNo?: string | null): void => {
+  try {
+    window.sessionStorage.setItem(
+      PAYMENT_PENDING_KEY,
+      JSON.stringify({ orderNo: orderNo || null, startedAt: Date.now() })
+    );
+  } catch (error) {
+    // sessionStorage may be unavailable (private mode, blocked storage)
+  }
+};
+
+export const getPaymentPending = (): PaymentPendingRecord | null => {
+  try {
+    const raw = window.sessionStorage.getItem(PAYMENT_PENDING_KEY);
+    if (!raw) return null;
+
+    const parsed = JSON.parse(raw) as PaymentPendingRecord;
+    if (
+      !parsed?.startedAt ||
+      Date.now() - parsed.startedAt > PAYMENT_PENDING_TTL_MS
+    ) {
+      window.sessionStorage.removeItem(PAYMENT_PENDING_KEY);
+      return null;
+    }
+
+    return parsed;
+  } catch (error) {
+    return null;
+  }
+};
+
+export const clearPaymentPending = (): void => {
+  try {
+    window.sessionStorage.removeItem(PAYMENT_PENDING_KEY);
+  } catch (error) {
+    // sessionStorage may be unavailable (private mode, blocked storage)
+  }
+};
+
 export const enhance3DSecureUrl = (originalUrl: string): string => {
   try {
     const baseUrl = window.location.origin;

package/src/views/masterpass-rest-option.tsx

@@ -15,6 +15,10 @@ import {
   setLocale,
   setCurrency
 } from '../redux/reducer';
+import {
+  getPaymentPending,
+  clearPaymentPending
+} from '../utils/payment-utils';
 import type { CreditCardFormData } from '../utils/validation-schemas';
 import type {
   MasterpassRestOptionCustomRender,
@@ -223,6 +227,17 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   const [cvc, setCvc] = useState<string>('');
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
 
+  // Initialized during render (not in an effect) so consumers see the real
+  // value before their own mount effects run.
+  const [isPaymentPending, setIsPaymentPending] = useState<boolean>(() =>
+    typeof window === 'undefined' ? false : Boolean(getPaymentPending())
+  );
+
+  const dismissPaymentPending = useCallback(() => {
+    clearPaymentPending();
+    setIsPaymentPending(false);
+  }, []);
+
   const [setMasterpassRestBinNumber] = useSetMasterpassRestBinNumberMutation();
 
   const {
@@ -237,6 +252,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     handleInstallmentSelect,
     processPayment,
     processDirectPayment,
+    finalizePaymentAfterVerification,
     openRewardModal,
     closeRewardModal,
     confirmRewards,
@@ -334,15 +350,20 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
 
   useEffect(() => {
     const error = getPosError();
+
     if (error && Object.keys(error).length > 0) {
       dispatch(setError(error));
+
+      // The completion request already ran and failed, so the order number it
+      // was bound to is settled and the flow may restart from scratch.
+      dismissPaymentPending();
     }
 
     return () => {
       resetData();
       dispatch(clearAllErrors());
     };
-  }, [dispatch, resetData]);
+  }, [dispatch, resetData, dismissPaymentPending]);
 
   const getErrorInfo = (error: any) => {
     if (error && typeof error === 'object') {
@@ -427,7 +448,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       if (result.requiresOTP && result.otpType) {
         updateModalState({
           showOTPModal: true,
-          otpType: result.otpType
+          otpType: result.otpType,
+          otpContext: 'payment'
         });
         return;
       }
@@ -453,12 +475,34 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
 
     const result = await handleOTPSubmit(otp, mergedTexts);
 
+    // A payment-context OTP leaves the Masterpass transaction open; the backend
+    // only learns about it once the completion request is sent.
+    if (result?.success && result?.isPaymentContext) {
+      const finalizeResult = await finalizePaymentAfterVerification(
+        result.verificationData
+      );
+
+      if (!finalizeResult.success) {
+        dispatch(
+          setError(finalizeResult.message || mergedTexts.paymentFailedText)
+        );
+      }
+
+      return finalizeResult;
+    }
+
     return result;
-  }, [handleOTPSubmit, mergedTexts]);
+  }, [
+    handleOTPSubmit,
+    finalizePaymentAfterVerification,
+    dispatch,
+    mergedTexts
+  ]);
 
   const handleCardSelectWithErrorHandling = useCallback(async (card: any) => {
     try {
       dispatch(clearAllErrors());
+      dismissPaymentPending();
       await handleCardSelect(card);
     } catch (error) {
       const errorMessage =
@@ -467,11 +511,12 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           : mergedTexts.failedToSelectCardText;
       dispatch(setError(errorMessage));
     }
-  }, [dispatch, handleCardSelect, mergedTexts.failedToSelectCardText]);
+  }, [dispatch, dismissPaymentPending, handleCardSelect, mergedTexts.failedToSelectCardText]);
 
   const handleInstallmentSelectWithErrorHandling = useCallback(async (installment: any) => {
     try {
       dispatch(clearAllErrors());
+      dismissPaymentPending();
       await handleInstallmentSelect(installment);
     } catch (error) {
       const errorMessage =
@@ -480,7 +525,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           : mergedTexts.failedToSelectInstallmentText;
       dispatch(setError(errorMessage));
     }
-  }, [dispatch, handleInstallmentSelect, mergedTexts.failedToSelectInstallmentText]);
+  }, [dispatch, dismissPaymentPending, handleInstallmentSelect, mergedTexts.failedToSelectInstallmentText]);
 
   const handleConfirmRewards = useCallback(
     async (selected: RewardItem[]) => {
@@ -500,6 +545,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   }, [updatePaymentState]);
 
   const handlePaymentMethodChange = useCallback((method: 'stored_card' | 'new_card') => {
+    dismissPaymentPending();
     setPaymentMethod(method);
     updatePaymentState({
       selectedCard: null,
@@ -511,7 +557,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     setCvc('');
     dispatch(setLastCheckedBin(''));
     dispatch(clearNewCardFormData());
-  }, [dispatch, updatePaymentState]);
+  }, [dispatch, dismissPaymentPending, updatePaymentState]);
 
   const customRenderRef = useRef(customRender);
   customRenderRef.current = customRender;
@@ -564,6 +610,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     shouldShowDirectForm,
     cvc,
     error,
+    isPaymentPending,
+    dismissPaymentPending,
 
     accountData,
     accountStatus,
@@ -606,6 +654,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     shouldShowDirectForm,
     cvc,
     error,
+    isPaymentPending,
+    dismissPaymentPending,
     accountData,
     accountStatus,
     modalState,