@evervault/react-native 2.3.0 → 2.5.0

package/src/ThreeDSecure/session.ts

@@ -3,8 +3,10 @@ import {
   ThreeDSecureSessionsParams,
   ThreeDSecureSession,
   ThreeDSecureSessionResponse,
+  ThreeDSecureOptions,
 } from "./types";
 import { EV_API_DOMAIN } from "./config";
+import { ThreeDSecureEvent } from "./event";
 
 export function stopPolling(
   intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
@@ -20,58 +22,108 @@ export function stopPolling(
 
 export async function startSession(
   session: ThreeDSecureSession,
-  callbacks: ThreeDSecureCallbacks | undefined,
+  options: ThreeDSecureOptions | undefined,
   intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
   setIsVisible: (show: boolean) => void
 ) {
   try {
     const sessionState = await session.get();
 
+    function fail() {
+      stopPolling(intervalRef, setIsVisible);
+      options?.onFailure?.(new Error("3DS session failed"));
+    }
+
     switch (sessionState.status) {
-      case "success":
+      case "success": {
         stopPolling(intervalRef, setIsVisible);
-        callbacks?.onSuccess?.();
+        options?.onSuccess?.();
         break;
-      case "failure":
-        stopPolling(intervalRef, setIsVisible);
-        callbacks?.onFailure?.(new Error("3DS session failed"));
+      }
+
+      case "failure": {
+        fail();
         break;
-      case "action-required":
+      }
+
+      case "action-required": {
+        const failOnChallenge =
+          typeof options?.failOnChallenge === "function"
+            ? await options.failOnChallenge()
+            : options?.failOnChallenge ?? false;
+        if (failOnChallenge) {
+          fail();
+          break;
+        }
+
+        const event = new ThreeDSecureEvent("requestChallenge", session);
+        options?.onRequestChallenge?.(event);
+        if (event.defaultPrevented) {
+          fail();
+          break;
+        }
+
         setIsVisible(true);
-        pollSession(session, callbacks, intervalRef, setIsVisible);
-        break;
-      default:
-        break;
+        pollSession(session, options, intervalRef, setIsVisible);
+      }
     }
   } catch (error) {
     console.error("Error checking session state", error);
-    callbacks?.onError?.(new Error("Failed to check 3DS session state"));
+    options?.onError?.(new Error("Failed to check 3DS session state"));
   }
 }
 
 export function pollSession(
   session: ThreeDSecureSession,
-  callbacks: ThreeDSecureCallbacks | undefined,
+  options: ThreeDSecureOptions | undefined,
   intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
   setIsVisible: (show: boolean) => void,
   interval = 3000
 ) {
+  function fail() {
+    stopPolling(intervalRef, setIsVisible);
+    options?.onFailure?.(new Error("3DS session failed"));
+  }
+
   intervalRef.current = setInterval(async () => {
     try {
       const pollResponse: ThreeDSecureSessionResponse = await session.get();
-      if (pollResponse.status === "success") {
-        stopPolling(intervalRef, setIsVisible);
-        callbacks?.onSuccess?.();
-      } else if (pollResponse.status === "failure") {
-        stopPolling(intervalRef, setIsVisible);
-        callbacks?.onFailure?.(new Error("3DS session failed"));
-      } else {
-        setIsVisible(true);
+      switch (pollResponse.status) {
+        case "success": {
+          stopPolling(intervalRef, setIsVisible);
+          options?.onSuccess?.();
+          break;
+        }
+
+        case "failure": {
+          fail();
+          break;
+        }
+
+        case "action-required": {
+          const failOnChallenge =
+            typeof options?.failOnChallenge === "function"
+              ? await options.failOnChallenge()
+              : options?.failOnChallenge ?? false;
+          if (failOnChallenge) {
+            fail();
+            break;
+          }
+
+          const event = new ThreeDSecureEvent("requestChallenge", session);
+          options?.onRequestChallenge?.(event);
+          if (event.defaultPrevented) {
+            fail();
+            break;
+          }
+
+          setIsVisible(true);
+        }
       }
     } catch (error) {
       stopPolling(intervalRef, setIsVisible);
       console.error("Error polling session", error);
-      callbacks?.onError?.(new Error("Error polling 3DS session"));
+      options?.onError?.(new Error("Error polling 3DS session"));
     }
   }, interval);
 }
@@ -79,7 +131,7 @@ export function pollSession(
 export function threeDSecureSession({
   sessionId,
   appId,
-  callbacks,
+  options,
   intervalRef,
   setIsVisible,
 }: ThreeDSecureSessionsParams): ThreeDSecureSession {
@@ -116,7 +168,7 @@ export function threeDSecureSession({
         }
       );
 
-      callbacks?.onFailure?.(new Error("3DS session cancelled by user"));
+      options?.onFailure?.(new Error("3DS session cancelled by user"));
       stopPolling(intervalRef, setIsVisible);
     } catch (error) {
       console.error("Error cancelling 3DS session", error);

package/src/ThreeDSecure/types.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { ThreeDSecureEvent } from "./event";
 
 export interface ThreeDSecureCallbacks {
   /**
@@ -6,6 +6,12 @@ export interface ThreeDSecureCallbacks {
    */
   onError?(error: Error): void;
 
+  /**
+   * The 'requestChallenge' event will be fired if the 3DS authentication process requires a challenge.
+   * If you'd like to fail the authentication, you should call `preventDefault` on the passed event.
+   */
+  onRequestChallenge?(event: ThreeDSecureEvent): void;
+
   /**
    * The 'failure' event will be fired if the 3DS authentication process fails. You should use this event to handle the failure and inform the user and prompt them to try again.
    * If the user cancels the 3DS authentication process this event will be fired.
@@ -20,6 +26,13 @@ export interface ThreeDSecureCallbacks {
   onSuccess?(): void;
 }
 
+export interface ThreeDSecureOptions extends ThreeDSecureCallbacks {
+  /**
+   * If set to `true` (or a function that returns `true`), the authentication will fail if a challenge is required.
+   */
+  failOnChallenge?: boolean | (() => Promise<boolean>);
+}
+
 export interface ThreeDSecureInitialState {
   session: ThreeDSecureSession | null;
   isVisible: boolean;
@@ -44,7 +57,7 @@ export interface ThreeDSecureSessionResponse {
 
 export interface ThreeDSecureSessionsParams {
   appId: string;
-  callbacks?: ThreeDSecureCallbacks;
+  options?: ThreeDSecureOptions;
   intervalRef: React.MutableRefObject<NodeJS.Timeout | null>;
   sessionId: string;
   setIsVisible: (show: boolean) => void;
@@ -61,7 +74,7 @@ export interface ThreeDSecureState extends ThreeDSecureInitialState {
    * The `start()` function is used to kick off the 3DS authentication process.
    *
    * @param sessionId The 3DS session ID. A 3DS session can be created using the [Evervault API](https://docs.evervault.com/api-reference#createThreeDSSession).
-   * @param callbacks The callbacks to be called when the 3DS authentication process is finished.
+   * @param options The options to be used for the 3DS authentication process.
    */
-  start(sessionId: string, callbacks?: ThreeDSecureCallbacks): void;
+  start(sessionId: string, options?: ThreeDSecureOptions): void;
 }

package/src/ThreeDSecure/useThreeDSecure.test.tsx

@@ -2,6 +2,7 @@ import { PropsWithChildren } from "react";
 import { EvervaultProvider } from "../EvervaultProvider";
 import { act, renderHook } from "@testing-library/react-native";
 import { useThreeDSecure } from "./useThreeDSecure";
+import { ThreeDSecureEvent } from "./event";
 
 function wrapper({ children }: PropsWithChildren) {
   return (
@@ -17,6 +18,10 @@ const callbacks = {
   onFailure: vi.fn(),
 };
 
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
 it("returns the correct state", () => {
   const { result } = renderHook(() => useThreeDSecure(), {
     wrapper,
@@ -31,7 +36,7 @@ it("returns the correct state", () => {
 });
 
 it("starts a session when action is required", async () => {
-  const { result, rerender } = renderHook(() => useThreeDSecure(), {
+  const { result } = renderHook(() => useThreeDSecure(), {
     wrapper,
   });
 
@@ -49,6 +54,112 @@ it("starts a session when action is required", async () => {
   expect(result.current.isVisible).toBe(true);
 });
 
+it("fails the session when failOnChallenge is true and a challenge is required", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  const onRequestChallenge = vi.fn();
+
+  await act(() =>
+    result.current.start("session_123", {
+      ...callbacks,
+      onRequestChallenge,
+      failOnChallenge: true,
+    })
+  );
+
+  expect(callbacks.onFailure).toHaveBeenCalled();
+  expect(onRequestChallenge).not.toHaveBeenCalled();
+});
+
+it("fails the session when failOnChallenge is a function that returns true and a challenge is required", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  const onRequestChallenge = vi.fn();
+
+  await act(() =>
+    result.current.start("session_123", {
+      ...callbacks,
+      onRequestChallenge,
+      failOnChallenge: () => Promise.resolve(true),
+    })
+  );
+
+  expect(callbacks.onFailure).toHaveBeenCalled();
+  expect(onRequestChallenge).not.toHaveBeenCalled();
+});
+
+it("fails the session when failOnChallenge resolves true at hook level and a challenge is required", async () => {
+  const { result } = renderHook(
+    () =>
+      useThreeDSecure({
+        failOnChallenge: () => Promise.resolve(true),
+      }),
+    {
+      wrapper,
+    }
+  );
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  const onRequestChallenge = vi.fn();
+  await act(() =>
+    result.current.start("session_123", {
+      ...callbacks,
+      onRequestChallenge,
+    })
+  );
+
+  expect(onRequestChallenge).not.toHaveBeenCalled();
+  expect(callbacks.onFailure).toHaveBeenCalled();
+});
+
+it("fails the session when onRequestChallenge is called and defaultPrevented is true", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  let onRequestChallenge = vi.fn((event: ThreeDSecureEvent) =>
+    event.preventDefault()
+  );
+  await act(() =>
+    result.current.start("session_123", {
+      ...callbacks,
+      onRequestChallenge,
+    })
+  );
+  expect(onRequestChallenge).toHaveBeenCalled();
+  expect(callbacks.onFailure).toHaveBeenCalled();
+
+  let onFailure = vi.fn();
+  onRequestChallenge = vi.fn();
+  await act(() =>
+    result.current.start("session_123", {
+      onFailure,
+      onRequestChallenge,
+    })
+  );
+  expect(onRequestChallenge).toHaveBeenCalled();
+  expect(onFailure).not.toHaveBeenCalled();
+});
+
 it("calls the success callback when the session is successful", async () => {
   const { result } = renderHook(() => useThreeDSecure(), {
     wrapper,

package/src/ThreeDSecure/useThreeDSecure.ts

@@ -1,30 +1,47 @@
 import { useCallback, useMemo, useState } from "react";
 import { useRef } from "react";
 import { startSession, threeDSecureSession } from "./session";
-import { ThreeDSecureSession, ThreeDSecureState } from "./types";
+import {
+  ThreeDSecureOptions,
+  ThreeDSecureSession,
+  ThreeDSecureState,
+} from "./types";
 import { useEvervault } from "../useEvervault";
 
-export function useThreeDSecure(): ThreeDSecureState {
+export interface UseThreeDSecureOptions {
+  failOnChallenge?: boolean | (() => Promise<boolean>);
+}
+
+export function useThreeDSecure(
+  options?: UseThreeDSecureOptions
+): ThreeDSecureState {
   const { appId } = useEvervault();
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const [session, setSession] = useState<ThreeDSecureSession | null>(null);
   const [isVisible, setIsVisible] = useState(false);
 
+  const failOnChallenge = options?.failOnChallenge ?? false;
+
   const start = useCallback<ThreeDSecureState["start"]>(
-    (sessionId, callbacks) => {
+    (sessionId, options) => {
+      const startOptions: ThreeDSecureOptions = {
+        ...options,
+        failOnChallenge: options?.failOnChallenge ?? failOnChallenge,
+      };
+
       const session = threeDSecureSession({
         sessionId,
         appId,
-        callbacks,
+        options: startOptions,
         intervalRef,
         setIsVisible,
       });
 
       setSession(session);
 
-      startSession(session, callbacks, intervalRef, setIsVisible);
+      startSession(session, startOptions, intervalRef, setIsVisible);
     },
-    [appId]
+    [appId, failOnChallenge]
   );
 
   const cancel = useCallback<ThreeDSecureState["cancel"]>(async () => {