@akinon/pz-masterpass-rest 1.126.5 → 1.126.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/pz-masterpass-rest",
-  "version": "1.126.5",
+  "version": "1.126.6",
   "main": "src/index.ts",
   "types": "src/index.d.ts",
   "description": "Modern React-based Masterpass REST API integration package for ProjectZero e-commerce platform",

package/src/hooks/useMasterpassAccount.ts

@@ -24,6 +24,7 @@ import type {
   CardModel
 } from '../types/account.types';
 import { useMasterpassToken } from './useMasterpassToken';
+import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 
 export const useMasterpassAccount = () => {
   const dispatch = useDispatch();
@@ -132,7 +133,10 @@ export const useMasterpassAccount = () => {
     }
     const result = await refetch(options);
     if (result?.data?.token) {
-      const decodedToken = window.Utils.decodeJwt(result.data.token);
+      const decodedToken = decodeMasterpassToken(result.data.token);
+      if (!decodedToken) {
+        return null;
+      }
       return {
         tokenData: decodedToken,
         token: result.data.token,

package/src/hooks/useMasterpassPayment.ts

@@ -25,6 +25,7 @@ import {
 } from '../redux/reducer';
 import { useMasterpassToken } from './useMasterpassToken';
 import { PaymentService } from '../services/payment';
+import { decodeMasterpassToken } from '../utils/wait-for-utils-ready';
 import {
   createPaymentRequest,
   createDirectPaymentRequest,
@@ -93,7 +94,10 @@ export const useMasterpassPayment = (
   const refreshTokenForPayment = useCallback(async () => {
     const result = await refetchToken({ skipReset: true });
     if (result?.data?.token) {
-      const decodedToken = window.Utils.decodeJwt(result.data.token);
+      const decodedToken = decodeMasterpassToken(result.data.token);
+      if (!decodedToken) {
+        return null;
+      }
       return {
         tokenData: decodedToken,
         token: result.data.token,

package/src/hooks/useMasterpassToken.ts

@@ -14,6 +14,10 @@ import {
   updatePaymentState
 } from '../redux/reducer';
 import { isTokenExpired } from '../utils/payment-utils';
+import {
+  waitForUtilsReady,
+  decodeMasterpassToken
+} from '../utils/wait-for-utils-ready';
 
 interface UseMasterpassTokenProps {
   useThreeD: boolean;
@@ -65,12 +69,37 @@ export const useMasterpassToken = ({
       return;
     }
 
-    if (data?.token && data.token !== reduxToken) {
-      dispatch(setMasterpassRestToken(data.token));
-      dispatch(setMasterpassTerminalGroupId(data.extras.terminal_group_id));
-      dispatch(setMasterpassBankIca(data.extras.bank_ica));
+    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;
+      }
 
-      const decodedToken = window.Utils.decodeJwt(data.token);
       dispatch(setMasterpassRestTokenData(decodedToken));
 
       if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
@@ -78,7 +107,11 @@ export const useMasterpassToken = ({
       }
 
       stableOnTokenReady(decodedToken);
-    }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
   }, [data?.token, reduxToken, dispatch, stableOnTokenReady]);
 
   const refetchToken = useCallback(
@@ -94,15 +127,19 @@ export const useMasterpassToken = ({
         );
         dispatch(setMasterpassBankIca(result.data.extras.bank_ica));
 
-        const decodedToken = window.Utils.decodeJwt(result.data.token);
-        dispatch(setMasterpassRestTokenData(decodedToken));
+        await waitForUtilsReady();
+        const decodedToken = decodeMasterpassToken(result.data.token);
 
-        if (decodedToken?.AuthenticationMethod?.toLowerCase() === 'none') {
-          dispatch(updatePaymentState({ useThreeD: false }));
-        }
+        if (decodedToken) {
+          dispatch(setMasterpassRestTokenData(decodedToken));
+
+          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,6 +19,7 @@ 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';

package/src/utils/wait-for-utils-ready.ts

@@ -0,0 +1,64 @@
+const DEFAULT_TIMEOUT_MS = 10000;
+const POLL_INTERVAL_MS = 100;
+
+interface MasterpassUtils {
+  decodeJwt: (token: string) => any;
+  [key: string]: any;
+}
+
+// `window.Utils` is attached by the Masterpass REST SDK and is undefined until
+// that script finishes loading, so it is resolved through this guarded getter
+// rather than accessed directly.
+const getMasterpassUtils = (): MasterpassUtils | undefined =>
+  (window as unknown as { Utils?: MasterpassUtils }).Utils;
+
+// The Masterpass REST SDK (`/masterpass-javascript-sdk-web.min.js`) attaches
+// both `window.Masterpass` and `window.Utils` when it finishes loading. That
+// script is loaded asynchronously (see `useMasterpassScript`), so on slow
+// networks the `/orders/masterpass-token` response can arrive before the SDK
+// is ready. Calling `window.Utils.decodeJwt(...)` at that point crashes the
+// checkout with `TypeError: Cannot read properties of undefined (reading
+// 'decodeJwt')` (ZERO-4362 — same class of bug already fixed in the non-rest
+// `@akinon/pz-masterpass` package).
+//
+// This helper polls until the SDK has exposed `window.Utils.decodeJwt`, so
+// callers can await readiness before decoding instead of crashing.
+export const waitForUtilsReady = (
+  timeoutMs: number = DEFAULT_TIMEOUT_MS
+): Promise<boolean> =>
+  new Promise((resolve) => {
+    const start = Date.now();
+
+    const check = () => {
+      if (typeof getMasterpassUtils()?.decodeJwt === 'function') {
+        resolve(true);
+        return;
+      }
+
+      if (Date.now() - start >= timeoutMs) {
+        resolve(false);
+        return;
+      }
+
+      setTimeout(check, POLL_INTERVAL_MS);
+    };
+
+    check();
+  });
+
+// Guarded `decodeJwt` wrapper. Returns `undefined` (instead of throwing) when
+// the SDK is not yet available, so every callsite degrades gracefully.
+export const decodeMasterpassToken = <T = any>(
+  token: string
+): T | undefined => {
+  const utils = getMasterpassUtils();
+
+  if (typeof utils?.decodeJwt !== 'function') {
+    console.error(
+      '[pz-masterpass-rest] window.Utils.decodeJwt is not available'
+    );
+    return undefined;
+  }
+
+  return utils.decodeJwt(token);
+};