@akinon/pz-masterpass-rest 2.0.0-beta.12 → 2.0.0-beta.13

package/src/utils/payment-utils.ts

@@ -4,6 +4,16 @@ import type {
   TransactionType,
   DirectPaymentRequest
 } from '../types/payment.types';
+import type { MasterpassRestTokenData } from '../redux/reducer';
+
+export const isTokenExpired = (
+  tokenData: MasterpassRestTokenData | null,
+  bufferSeconds = 60
+): boolean => {
+  if (!tokenData?.exp) return true;
+  const bufferMs = bufferSeconds * 1000;
+  return Date.now() >= tokenData.exp * 1000 - bufferMs;
+};
 
 export const enhance3DSecureUrl = (originalUrl: string): string => {
   try {
@@ -38,6 +48,8 @@ export const createPaymentRequest = (params: {
   authenticationMethod: string;
   secure3DModel: string;
   terminalGroupId: string;
+  acquirerIcaNumber: string;
+  additionalFields?: any;
 }): PaymentProcessRequest => {
   return {
     requestReferenceNo: params.orderNo,
@@ -48,11 +60,12 @@ export const createPaymentRequest = (params: {
     orderNo: params.orderNo,
     currencyCode: params.currencyCode,
     paymentType: PAYMENT_CONSTANTS.PAYMENT_CONFIG.PAYMENT_TYPE,
-    acquirerIcaNumber: PAYMENT_CONSTANTS.PAYMENT_CONFIG.ACQUIRER_ICA_NUMBER,
+    acquirerIcaNumber: params.acquirerIcaNumber,
     installmentCount: params.installmentCount,
     authenticationMethod: params.authenticationMethod,
     secure3DModel: params.secure3DModel,
-    terminalGroupId: params.terminalGroupId
+    terminalGroupId: params.terminalGroupId,
+    additionalFields: params.additionalFields || {}
   };
 };
 
@@ -70,6 +83,8 @@ export const createDirectPaymentRequest = (params: {
   authenticationMethod: string;
   secure3DModel: string;
   terminalGroupId: string;
+  acquirerIcaNumber: string;
+  additionalFields?: any;
 }): DirectPaymentRequest => {
   const timestamp = Date.now().toString().slice(-10);
   const random = Math.floor(Math.random() * 1000)
@@ -91,10 +106,11 @@ export const createDirectPaymentRequest = (params: {
     orderNo: params.orderNo,
     currencyCode: params.currencyCode,
     paymentType: PAYMENT_CONSTANTS.PAYMENT_CONFIG.PAYMENT_TYPE,
-    acquirerIcaNumber: PAYMENT_CONSTANTS.PAYMENT_CONFIG.ACQUIRER_ICA_NUMBER,
+    acquirerIcaNumber: params.acquirerIcaNumber,
     installmentCount: params.installmentCount,
     authenticationMethod: params.authenticationMethod,
     secure3DModel: params.secure3DModel,
-    terminalGroupId: params.terminalGroupId
+    terminalGroupId: params.terminalGroupId,
+    additionalFields: params.additionalFields || {}
   };
 };

package/src/utils/response-handler.ts

@@ -1,6 +1,8 @@
 import { VerifyService } from '../services/verify';
 import { enhance3DSecureUrl } from './payment-utils';
 import { PAYMENT_CONSTANTS } from './payment-constants';
+import { store } from 'redux/store';
+import { updateModalState } from '../redux/reducer';
 
 export type ResponseHandlerResult = {
   success: boolean;
@@ -8,6 +10,7 @@ export type ResponseHandlerResult = {
   requires3D?: boolean;
   requiresCVV?: boolean;
   requiresRTA?: boolean;
+  sessionExpired?: boolean;
   otpType?: 'OTP' | 'RTA' | 'CVV';
   data?: any;
   message?: string;
@@ -83,16 +86,20 @@ export const handleMasterpassResponse = async (
         message:
           response.exception?.message ||
           response.error ||
+          response.description ||
+          response.result?.description ||
           'Unknown error occurred'
       };
   }
 };
 
 export const handleVerification = async (
-  otp: string
+  otp: string,
+  token?: string,
+  merchantId?: string
 ): Promise<ResponseHandlerResult> => {
   try {
-    const verifyService = new VerifyService();
+    const verifyService = new VerifyService(token, merchantId);
     const response = await verifyService.verifyOtp({ otpCode: otp });
 
     if (response.statusCode === 200) {
@@ -162,6 +169,15 @@ export const handleVerification = async (
       }
     }
 
+    const exceptionCode = response.exception?.code;
+    if (exceptionCode === PAYMENT_CONSTANTS.EXCEPTION_CODES.TOKEN_HAS_EXPIRED) {
+      return {
+        success: false,
+        sessionExpired: true,
+        message: response.exception?.message || 'Session has expired'
+      };
+    }
+
     return {
       success: false,
       message:
@@ -178,12 +194,25 @@ export const handleVerification = async (
   }
 };
 
-export const handleResendOtp = async (): Promise<ResponseHandlerResult> => {
+export const handleResendOtp = async (
+  token?: string,
+  merchantId?: string
+): Promise<ResponseHandlerResult> => {
   try {
-    const verifyService = new VerifyService();
-    const response = await verifyService.resendOtp();
+    const verifyService = new VerifyService(token, merchantId);
+    const state = store.getState();
+    const otpToken = state.masterpassRest.modalState.verificationData?.result?.token;
+
+    const response = await verifyService.resendOtp(otpToken);
+
+    if (response.statusCode === 200 || response.statusCode === 202) {
+      const newToken = response.result?.token;
+      if (newToken) {
+        store.dispatch(updateModalState({
+          verificationData: response
+        }));
+      }
 
-    if (response.statusCode === 200) {
       return {
         success: true,
         data: response,

package/src/utils/session-handler.ts

@@ -0,0 +1,60 @@
+export const createSessionExpiredResponse = <T>(additionalProps: Partial<T> = {}): T => ({
+  statusCode: 401,
+  version: '',
+  buildId: '',
+  message: 'Session has expired',
+  correlationId: '',
+  requestId: '',
+  result: null as any,
+  exception: {
+    code: 'TOKEN_HAS_EXPIRED',
+    message: 'Session has expired',
+    level: 'error',
+    validationErrors: [],
+    details: []
+  },
+  ...additionalProps
+} as T);
+
+export const withUnhandledRejectionHandler = <T>(
+  promiseFactory: () => Promise<T>,
+  fallbackValue: T
+): Promise<T> => {
+  return new Promise((resolve) => {
+    let resolved = false;
+
+    const handleRejection = (event: PromiseRejectionEvent) => {
+      if (!resolved && event.reason instanceof TypeError &&
+          event.reason.message === 'Failed to fetch') {
+        event.preventDefault();
+        resolved = true;
+        resolve(fallbackValue);
+      }
+    };
+
+    window.addEventListener('unhandledrejection', handleRejection);
+
+    promiseFactory()
+      .then((result) => {
+        if (!resolved) {
+          resolved = true;
+          resolve(result);
+        }
+      })
+      .catch((error) => {
+        if (!resolved) {
+          resolved = true;
+          if (error instanceof TypeError && error.message === 'Failed to fetch') {
+            resolve(fallbackValue);
+          } else {
+            resolve(fallbackValue);
+          }
+        }
+      })
+      .finally(() => {
+        setTimeout(() => {
+          window.removeEventListener('unhandledrejection', handleRejection);
+        }, 100);
+      });
+  });
+};

package/src/utils/validation-schemas.ts

@@ -63,7 +63,7 @@ export const createCreditCardFormSchema = (
     .required(texts.cardholderNameRequiredText)
     .min(2, texts.cardholderNameTooShortText)
     .max(50, texts.cardholderNameTooLongText)
-    .matches(/^[a-zA-Z\s]+$/, texts.cardholderNameInvalidText);
+    .matches(/^[a-zA-ZçÇğĞıİöÖşŞüÜ\s]+$/, texts.cardholderNameInvalidText);
 
   return yup.object({
     cardNumber: creditCardNumberSchema,

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

@@ -28,6 +28,7 @@ import ConfirmationModal from '../components/confirmation-modal';
 import InstallmentList from '../components/installment-list';
 import CreditCardForm from '../components/credit-card-form';
 import PaymentMethodSelector from '../components/payment-method-selector';
+import InformationModal from '../components/information-modal';
 import mpBlackLogo from '../assets/img/masterpass-black-logo.png';
 
 interface MasterpassRestOptionProps {
@@ -136,17 +137,28 @@ const defaultTexts: MasterpassRestOptionTexts = {
   linkAccountButton: 'Yes, I want it',
   linkModalCancelButton: 'No, I don\'t want it',
   whatIsMasterpassLink: 'What is Masterpass?',
-  rtaVerificationTitle: 'RTA Verification',
-  cvvVerificationTitle: 'CVV Verification',
-  rtaVerificationDescription:
-    'Please enter the 3-digit RTA verification code sent to your phone',
-  cvvVerificationDescription: 'Please enter your card CVV code',
-  otpVerificationDescription:
-    'Please enter the 6-digit verification code sent to your phone',
+  rtaVerificationTitle: 'Security Verification',
+  rtaVerificationDescription: 'To continue with your transaction, please enter the verification code sent to your phone.',
+  rtaVerificationPlaceholder: 'Verification Code',
+  bankOtpVerificationTitle: 'Bank Authorization Required',
+  bankOtpVerificationDescription: 'Please enter the one-time password sent by your bank to complete the verification.',
+  bankOtpVerificationPlaceholder: 'Bank OTP Code',
+  phoneVerificationTitle: 'Verify Your Phone Number',
+  phoneVerificationDescription: 'Enter the verification code sent to your phone to confirm your Masterpass account.',
+  phoneVerificationPlaceholder: 'SMS Verification Code',
+  cvvVerificationTitle: 'Card Security Code Required',
+  cvvVerificationDescription: 'Please enter the 3-digit security code (CVV) located on the back of your card to continue.',
+  cvvVerificationPlaceholder: 'CVV',
+  cvvVerificationHelperText: 'The CVV is the 3-digit number on the back of your card.',
+  otpVerificationDescription: 'Please enter the verification code sent to your phone.',
   verifyButton: 'Verify',
   otpModalCancelButton: 'Cancel',
   otpModalErrorText: 'An unexpected error occurred. Please try again.',
-  otpModalResendOtpButton: 'Resend OTP'
+  otpModalResendOtpButton: 'Resend OTP',
+  sessionExpiredTitle: 'Session Expired',
+  sessionExpiredMessage: 'Your session has expired due to inactivity. Please restart the process to continue.',
+  sessionExpiredSecondaryMessage: 'For security reasons, sessions are only valid for a limited time.',
+  sessionExpiredButton: 'Start Again'
 };
 
 const mergeTexts = (
@@ -205,7 +217,6 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   } = useMasterpassPayment();
 
   const {
-    tokenData,
     accountData,
     updateModalState,
     handleLinkConfirm,
@@ -250,6 +261,8 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
       setPaymentMethod('new_card');
     } else if (hasCards) {
       setPaymentMethod('stored_card');
+    } else {
+      setPaymentMethod('new_card');
     }
   }, [accountStatus?.isAccountNotLinked, accountStatus?.shouldShowDirectForm, accountData?.result?.cards]);
 
@@ -371,30 +384,32 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
   const handleProceedToPayment = useCallback(async () => {
     try {
       dispatch(clearAllErrors());
-      if (paymentMethod === 'new_card') {
-        const result = await processDirectPayment(tokenData);
-
-        if (result.success) {
-          dispatch(setError('Payment completed successfully!'));
-        } else if (result.requires3D && result.redirectUrl) {
-          window.location.assign(result.redirectUrl);
-        } else if (result.requiresOTP && result.otpType) {
-          updateModalState({
-            showOTPModal: true,
-            otpType: result.otpType
-          });
-        } else if (result.message) {
-          dispatch(setError(result.message));
-        }
-      } else {
-        await processPayment(tokenData);
+
+      const result = paymentMethod === 'new_card'
+        ? await processDirectPayment()
+        : await processPayment();
+
+      if (result.requiresRedirect) {
+        return;
+      }
+
+      if (result.requiresOTP && result.otpType) {
+        updateModalState({
+          showOTPModal: true,
+          otpType: result.otpType
+        });
+        return;
+      }
+
+      if (!result.success && result.message) {
+        dispatch(setError(result.message));
       }
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : mergedTexts.paymentFailedText;
       dispatch(setError(errorMessage));
     }
-  }, [dispatch, paymentMethod, processDirectPayment, processPayment, tokenData, updateModalState, mergedTexts.paymentFailedText]);
+  }, [dispatch, paymentMethod, processDirectPayment, processPayment, updateModalState, mergedTexts.paymentFailedText]);
 
   const handleOTPSubmitWithErrorHandling = useCallback(async (otp: string) => {
     if (!handleOTPSubmit)
@@ -403,10 +418,10 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
         message: mergedTexts.otpHandlerNotAvailableText
       };
 
-    const result = await handleOTPSubmit(otp);
+    const result = await handleOTPSubmit(otp, mergedTexts);
 
     return result;
-  }, [handleOTPSubmit, mergedTexts.otpHandlerNotAvailableText]);
+  }, [handleOTPSubmit, mergedTexts]);
 
   const handleCardSelectWithErrorHandling = useCallback(async (card: any) => {
     try {
@@ -501,6 +516,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     hasStoredCards,
     shouldShowDirectForm,
     cvc,
+    error,
 
     accountData,
     accountStatus,
@@ -518,7 +534,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     handleInstallmentSelect: handleInstallmentSelectWithErrorHandling,
     handleProceedToPayment,
     handleLinkConfirm,
-    handleOTPSubmit: handleOTPSubmit || fallbackOTPSubmit,
+    handleOTPSubmit: handleOTPSubmitWithErrorHandling || handleOTPSubmit || fallbackOTPSubmit,
     onCloseError,
 
     isCheckoutLoading,
@@ -534,6 +550,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
     hasStoredCards,
     shouldShowDirectForm,
     cvc,
+    error,
     accountData,
     accountStatus,
     modalState,
@@ -822,6 +839,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           onClose: () => updateModalState({ showOTPModal: false }),
           onSubmit: handleOTPSubmitWithErrorHandling,
           type: modalState?.otpType ?? 'OTP',
+          responseCode: modalState?.verificationData?.result?.responseCode,
           description: modalState?.verificationData?.result?.description,
           texts: mergedTexts
         })
@@ -831,6 +849,7 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           onClose={() => updateModalState({ showOTPModal: false })}
           onSubmit={handleOTPSubmitWithErrorHandling}
           type={modalState?.otpType ?? 'OTP'}
+          responseCode={modalState?.verificationData?.result?.responseCode}
           description={modalState?.verificationData?.result?.description}
           texts={mergedTexts}
         />
@@ -869,6 +888,12 @@ const MasterpassRestOption: React.FC<MasterpassRestOptionProps> = ({
           texts={mergedTexts}
         />
       )}
+
+      <InformationModal
+        open={modalState?.showInformationModal ?? false}
+        onClose={() => updateModalState({ showInformationModal: false, informationModalData: null })}
+        data={modalState?.informationModalData}
+      />
     </div>
   );
 };