@evervault/react-native 2.0.0

package/src/ThreeDSecure/session.test.ts

@@ -0,0 +1,329 @@
+import { EV_API_DOMAIN } from "./config";
+import {
+  pollSession,
+  startSession,
+  stopPolling,
+  threeDSecureSession,
+} from "./session";
+import { ThreeDSecureSession } from "./types";
+
+describe("stopPolling", () => {
+  it("should stop polling", () => {
+    const spy = vi.spyOn(global, "clearInterval");
+
+    const interval = setTimeout(() => {}, 0);
+    const intervalRef = { current: interval };
+    const setIsVisible = vi.fn();
+
+    stopPolling(intervalRef, setIsVisible);
+
+    expect(setIsVisible).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(interval);
+    expect(intervalRef.current).toBeNull();
+  });
+});
+
+describe("startSession", () => {
+  const callbacks = {
+    onSuccess: vi.fn(),
+    onFailure: vi.fn(),
+    onError: vi.fn(),
+  };
+  const intervalRef = { current: null };
+  const setIsVisible = vi.fn();
+
+  it("should start a successful session", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "success" }) as any),
+      sessionId: "123",
+    };
+
+    await startSession(session, callbacks, intervalRef, setIsVisible);
+
+    expect(session.get).toHaveBeenCalled();
+    expect(callbacks.onSuccess).toHaveBeenCalled();
+  });
+
+  it("should start a failed session", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "failure" }) as any),
+      sessionId: "123",
+    };
+
+    await startSession(session, callbacks, intervalRef, setIsVisible);
+
+    expect(session.get).toHaveBeenCalled();
+    expect(callbacks.onFailure).toHaveBeenCalledWith(
+      new Error("3DS session failed")
+    );
+  });
+
+  it("should start a session that requires action", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "action-required" }) as any),
+      sessionId: "123",
+    };
+
+    await startSession(session, callbacks, intervalRef, setIsVisible);
+
+    expect(session.get).toHaveBeenCalled();
+    expect(setIsVisible).toHaveBeenCalledWith(true);
+  });
+
+  it("should call onError if the session fails to start", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.reject(new Error("Failed to start session"))),
+      sessionId: "123",
+    };
+
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    await startSession(session, callbacks, intervalRef, setIsVisible);
+
+    expect(session.get).toHaveBeenCalled();
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Error checking session state",
+      new Error("Failed to start session")
+    );
+    expect(callbacks.onError).toHaveBeenCalledWith(
+      new Error("Failed to check 3DS session state")
+    );
+  });
+});
+
+describe("pollSession", () => {
+  const callbacks = {
+    onSuccess: vi.fn(),
+    onFailure: vi.fn(),
+    onError: vi.fn(),
+  };
+  const intervalRef = { current: null };
+  const setIsVisible = vi.fn();
+
+  it("should start an interval", () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "success" }) as any),
+      sessionId: "123",
+    };
+
+    const intervalSpy = vi.spyOn(global, "setInterval");
+    pollSession(session, callbacks, intervalRef, setIsVisible);
+
+    expect(intervalSpy).toHaveBeenCalledWith(expect.any(Function), 3000);
+  });
+
+  it("should poll successful session", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "success" }) as any),
+      sessionId: "123",
+    };
+
+    const intervalSpy = vi.spyOn(global, "setInterval");
+    pollSession(session, callbacks, intervalRef, setIsVisible);
+    await intervalSpy.mock.calls[0][0]();
+
+    expect(session.get).toHaveBeenCalled();
+    expect(callbacks.onSuccess).toHaveBeenCalled();
+  });
+
+  it("should poll failed session", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "failure" }) as any),
+      sessionId: "123",
+    };
+
+    const intervalSpy = vi.spyOn(global, "setInterval");
+    pollSession(session, callbacks, intervalRef, setIsVisible);
+    await intervalSpy.mock.calls[0][0]();
+
+    expect(session.get).toHaveBeenCalled();
+    expect(callbacks.onFailure).toHaveBeenCalledWith(
+      new Error("3DS session failed")
+    );
+  });
+
+  it("should poll session that requires action", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.resolve({ status: "action-required" }) as any),
+      sessionId: "123",
+    };
+
+    const intervalSpy = vi.spyOn(global, "setInterval");
+    pollSession(session, callbacks, intervalRef, setIsVisible);
+    await intervalSpy.mock.calls[0][0]();
+
+    expect(session.get).toHaveBeenCalled();
+    expect(setIsVisible).toHaveBeenCalledWith(true);
+  });
+
+  it("should call onError if the session fails to poll", async () => {
+    const session: ThreeDSecureSession = {
+      cancel: vi.fn(),
+      get: vi.fn(() => Promise.reject(new Error("Failed to poll session"))),
+      sessionId: "123",
+    };
+
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    const intervalSpy = vi.spyOn(global, "setInterval");
+    pollSession(session, callbacks, intervalRef, setIsVisible);
+    await intervalSpy.mock.calls[0][0]();
+
+    expect(session.get).toHaveBeenCalled();
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Error polling session",
+      new Error("Failed to poll session")
+    );
+    expect(callbacks.onError).toHaveBeenCalledWith(
+      new Error("Error polling 3DS session")
+    );
+  });
+});
+
+describe("threeDSecureSession", () => {
+  const callbacks = {
+    onSuccess: vi.fn(),
+    onFailure: vi.fn(),
+    onError: vi.fn(),
+  };
+  const intervalRef = { current: null };
+  const setIsVisible = vi.fn();
+
+  it("should create a session", () => {
+    const session = threeDSecureSession({
+      sessionId: "123",
+      appId: "app_123",
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    expect(session).toBeDefined();
+    expect(session.sessionId).toBe("123");
+    expect(session.get).toBeInstanceOf(Function);
+    expect(session.cancel).toBeInstanceOf(Function);
+  });
+
+  it("creates a get function that fetches the session", async () => {
+    const session = threeDSecureSession({
+      sessionId: "123",
+      appId: "app_123",
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    const fetchSpy = vi.spyOn(global, "fetch");
+    fetchSpy.mockImplementation(
+      () =>
+        Promise.resolve({
+          json: () => Promise.resolve({ status: "success" }),
+        }) as any
+    );
+
+    const result = await session.get();
+    expect(fetchSpy).toHaveBeenCalledWith(
+      `https://${EV_API_DOMAIN}/frontend/3ds/browser-sessions/123`,
+      {
+        headers: {
+          "x-evervault-app-id": "app_123",
+        },
+      }
+    );
+
+    expect(result).toEqual({ status: "success" });
+  });
+
+  it("creates a get function that throws an error if the session fails to fetch", async () => {
+    const session = threeDSecureSession({
+      sessionId: "123",
+      appId: "app_123",
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    const fetchSpy = vi.spyOn(global, "fetch");
+    fetchSpy.mockImplementation(() =>
+      Promise.reject(new Error("Failed to fetch session"))
+    );
+
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    await expect(session.get()).rejects.toThrow("Failed to fetch session");
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Error fetching 3DS session status",
+      new Error("Failed to fetch session")
+    );
+  });
+
+  it("creates a cancel function that cancels the session", async () => {
+    const session = threeDSecureSession({
+      sessionId: "123",
+      appId: "app_123",
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    const fetchSpy = vi.spyOn(global, "fetch");
+    fetchSpy.mockImplementation(() => Promise.resolve({}) as any);
+
+    await session.cancel();
+
+    expect(fetchSpy).toHaveBeenCalledWith(
+      `https://${EV_API_DOMAIN}/frontend/3ds/browser-sessions/123`,
+      {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          "x-evervault-app-id": "app_123",
+        },
+        body: JSON.stringify({ outcome: "cancelled" }),
+      }
+    );
+
+    expect(callbacks.onFailure).toHaveBeenCalledWith(
+      new Error("3DS session cancelled by user")
+    );
+  });
+
+  it("creates a cancel function that throws an error if the session fails to cancel", async () => {
+    const session = threeDSecureSession({
+      sessionId: "123",
+      appId: "app_123",
+      callbacks,
+      intervalRef,
+      setIsVisible,
+    });
+
+    const fetchSpy = vi.spyOn(global, "fetch");
+    fetchSpy.mockImplementation(() =>
+      Promise.reject(new Error("Failed to cancel session"))
+    );
+
+    const consoleErrorSpy = vi
+      .spyOn(console, "error")
+      .mockImplementation(() => {});
+
+    await expect(session.cancel()).rejects.toThrow("Failed to cancel session");
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      "Error cancelling 3DS session",
+      new Error("Failed to cancel session")
+    );
+  });
+});

package/src/ThreeDSecure/session.ts

@@ -0,0 +1,132 @@
+import {
+  ThreeDSecureCallbacks,
+  ThreeDSecureSessionsParams,
+  ThreeDSecureSession,
+  ThreeDSecureSessionResponse,
+} from "./types";
+import { EV_API_DOMAIN } from "./config";
+
+export function stopPolling(
+  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
+  setIsVisible: (show: boolean) => void
+) {
+  setIsVisible(false);
+
+  if (intervalRef.current) {
+    clearInterval(intervalRef.current);
+    intervalRef.current = null;
+  }
+}
+
+export async function startSession(
+  session: ThreeDSecureSession,
+  callbacks: ThreeDSecureCallbacks | undefined,
+  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
+  setIsVisible: (show: boolean) => void
+) {
+  try {
+    const sessionState = await session.get();
+
+    switch (sessionState.status) {
+      case "success":
+        stopPolling(intervalRef, setIsVisible);
+        callbacks?.onSuccess?.();
+        break;
+      case "failure":
+        stopPolling(intervalRef, setIsVisible);
+        callbacks?.onFailure?.(new Error("3DS session failed"));
+        break;
+      case "action-required":
+        setIsVisible(true);
+        pollSession(session, callbacks, intervalRef, setIsVisible);
+        break;
+      default:
+        break;
+    }
+  } catch (error) {
+    console.error("Error checking session state", error);
+    callbacks?.onError?.(new Error("Failed to check 3DS session state"));
+  }
+}
+
+export function pollSession(
+  session: ThreeDSecureSession,
+  callbacks: ThreeDSecureCallbacks | undefined,
+  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>,
+  setIsVisible: (show: boolean) => void,
+  interval = 3000
+) {
+  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);
+      }
+    } catch (error) {
+      stopPolling(intervalRef, setIsVisible);
+      console.error("Error polling session", error);
+      callbacks?.onError?.(new Error("Error polling 3DS session"));
+    }
+  }, interval);
+}
+
+export function threeDSecureSession({
+  sessionId,
+  appId,
+  callbacks,
+  intervalRef,
+  setIsVisible,
+}: ThreeDSecureSessionsParams): ThreeDSecureSession {
+  async function get(): Promise<ThreeDSecureSessionResponse> {
+    try {
+      const response = await fetch(
+        `https://${EV_API_DOMAIN}/frontend/3ds/browser-sessions/${sessionId}`,
+        {
+          headers: {
+            "x-evervault-app-id": appId,
+          },
+        }
+      );
+
+      const result = (await response.json()) as ThreeDSecureSessionResponse;
+      return result;
+    } catch (error) {
+      console.error("Error fetching 3DS session status", error);
+      throw error;
+    }
+  }
+
+  async function cancel(): Promise<void> {
+    try {
+      await fetch(
+        `https://${EV_API_DOMAIN}/frontend/3ds/browser-sessions/${sessionId}`,
+        {
+          method: "PATCH",
+          headers: {
+            "Content-Type": "application/json",
+            "x-evervault-app-id": appId,
+          },
+          body: JSON.stringify({ outcome: "cancelled" }),
+        }
+      );
+
+      callbacks?.onFailure?.(new Error("3DS session cancelled by user"));
+      stopPolling(intervalRef, setIsVisible);
+    } catch (error) {
+      console.error("Error cancelling 3DS session", error);
+      throw error;
+    }
+  }
+
+  return {
+    sessionId,
+    get,
+    cancel,
+  };
+}

package/src/ThreeDSecure/types.ts

@@ -0,0 +1,67 @@
+import { PropsWithChildren } from "react";
+
+export interface ThreeDSecureCallbacks {
+  /**
+   * The error event will be fired if the component fails to load.
+   */
+  onError?(error: Error): 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.
+   */
+  onFailure?(error: Error): void;
+
+  /**
+   * The 'success' event will be fired once the 3DS authentication process has been completed successfully.
+   * You should use this event to trigger your backend to finalize the payment.
+   * Your backend can use the [Retrieve 3DS Session](https://docs.evervault.com/api-reference#retrieveThreeDSSession) endpoint to retrieve the cryptogram for the session and complete the payment.
+   */
+  onSuccess?(): void;
+}
+
+export interface ThreeDSecureInitialState {
+  session: ThreeDSecureSession | null;
+  isVisible: boolean;
+}
+
+export interface ThreeDSecureSession {
+  cancel(): Promise<void>;
+  get(): Promise<ThreeDSecureSessionResponse>;
+  sessionId: string;
+}
+
+export type SessionStatus = "action-required" | "failure" | "success";
+
+export interface ThreeDSecureSessionResponse {
+  nextAction: {
+    creq?: string;
+    type: string;
+    url?: string;
+  };
+  status: SessionStatus;
+}
+
+export interface ThreeDSecureSessionsParams {
+  appId: string;
+  callbacks?: ThreeDSecureCallbacks;
+  intervalRef: React.MutableRefObject<NodeJS.Timeout | null>;
+  sessionId: string;
+  setIsVisible: (show: boolean) => void;
+}
+
+export interface ThreeDSecureState extends ThreeDSecureInitialState {
+  /**
+   * The `cancel()` function is used to cancel the ongoing 3DS authentication process.
+   * This can be particularly useful for canceling a session when a custom cancel button is triggered.
+   */
+  cancel(): Promise<void>;
+
+  /**
+   * 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.
+   */
+  start(sessionId: string, callbacks?: ThreeDSecureCallbacks): void;
+}

package/src/ThreeDSecure/useThreeDSecure.test.tsx

@@ -0,0 +1,133 @@
+import { PropsWithChildren } from "react";
+import { EvervaultProvider } from "../EvervaultProvider";
+import { act, renderHook } from "@testing-library/react-native";
+import { useThreeDSecure } from "./useThreeDSecure";
+
+function wrapper({ children }: PropsWithChildren) {
+  return (
+    <EvervaultProvider teamId="team_123" appId="app_123">
+      {children}
+    </EvervaultProvider>
+  );
+}
+
+const callbacks = {
+  onSuccess: vi.fn(),
+  onError: vi.fn(),
+  onFailure: vi.fn(),
+};
+
+it("returns the correct state", () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  expect(result.current).toEqual({
+    start: expect.any(Function),
+    cancel: expect.any(Function),
+    session: null,
+    isVisible: false,
+  });
+});
+
+it("starts a session when action is required", async () => {
+  const { result, rerender } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  await act(() => result.current.start("session_123", callbacks));
+
+  expect(result.current.session).toEqual({
+    sessionId: "session_123",
+    cancel: expect.any(Function),
+    get: expect.any(Function),
+  });
+  expect(result.current.isVisible).toBe(true);
+});
+
+it("calls the success callback when the session is successful", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "success" }),
+  } as any);
+
+  await act(() => result.current.start("session_123", callbacks));
+
+  expect(callbacks.onSuccess).toHaveBeenCalled();
+});
+
+it("calls the failure callback when the session fails on start", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "failure" }),
+  } as any);
+
+  await act(() => result.current.start("session_123", callbacks));
+
+  expect(callbacks.onFailure).toHaveBeenCalled();
+});
+
+it("calls the error callback when the fetch fails on start", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockRejectedValue(new Error("Session failed"));
+
+  await act(() => result.current.start("session_123", callbacks));
+
+  expect(callbacks.onError).toHaveBeenCalled();
+});
+
+it("silently fails if the session is not found", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  const consoleWarnSpy = vi.spyOn(console, "warn");
+
+  await act(() => result.current.cancel());
+
+  expect(result.current.session).toBeNull();
+  expect(result.current.isVisible).toBe(false);
+  expect(consoleWarnSpy).toHaveBeenCalledWith("No 3DS session to cancel");
+});
+
+it("cancels the session when the user cancels", async () => {
+  const { result } = renderHook(() => useThreeDSecure(), {
+    wrapper,
+  });
+
+  vi.spyOn(global, "fetch").mockResolvedValue({
+    json: () => Promise.resolve({ status: "action-required" }),
+  } as any);
+
+  await act(() => result.current.start("session_123", callbacks));
+
+  expect(result.current.session).toEqual({
+    sessionId: "session_123",
+    cancel: expect.any(Function),
+    get: expect.any(Function),
+  });
+  expect(result.current.isVisible).toBe(true);
+
+  await act(() => result.current.session?.cancel());
+
+  expect(result.current.session).toEqual({
+    sessionId: "session_123",
+    cancel: expect.any(Function),
+    get: expect.any(Function),
+  });
+  expect(result.current.isVisible).toBe(false);
+  expect(callbacks.onFailure).toHaveBeenCalled();
+});

package/src/ThreeDSecure/useThreeDSecure.ts

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, useState } from "react";
+import { useRef } from "react";
+import { startSession, threeDSecureSession } from "./session";
+import { ThreeDSecureSession, ThreeDSecureState } from "./types";
+import { useEvervault } from "../useEvervault";
+
+export function useThreeDSecure(): ThreeDSecureState {
+  const { appId } = useEvervault();
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const [session, setSession] = useState<ThreeDSecureSession | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const start = useCallback<ThreeDSecureState["start"]>(
+    (sessionId, callbacks) => {
+      const session = threeDSecureSession({
+        sessionId,
+        appId,
+        callbacks,
+        intervalRef,
+        setIsVisible,
+      });
+
+      setSession(session);
+
+      startSession(session, callbacks, intervalRef, setIsVisible);
+    },
+    [appId]
+  );
+
+  const cancel = useCallback<ThreeDSecureState["cancel"]>(async () => {
+    if (session) {
+      await session.cancel();
+    } else {
+      console.warn("No 3DS session to cancel");
+    }
+  }, [session]);
+
+  return useMemo(
+    () => ({
+      start,
+      cancel,
+      session,
+      isVisible,
+    }),
+    [start, cancel, session, isVisible]
+  );
+}