react-native-unit-components 3.1.2 → 3.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "3.1.2",
+  "version": "3.3.0-beta.1",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -29,11 +29,12 @@
     "prepare": "bob build",
     "example": "yarn --cwd example",
     "cleanNodeModules": "rm -rf node_modules",
-    "bootstrap": "yarn cleanNodeModules && yarn example cleanNodeModules && yarn example && yarn && yarn example pods",
+    "setup-veryfi": "node scripts/setup-veryfi.js",
+    "bootstrap": "node scripts/setup-veryfi.js && yarn cleanNodeModules && yarn example cleanNodeModules && yarn example && yarn && yarn example pods",
     "cleanAll": "rm -rf node_modules example/node_modules android/build example/android/build example/ios/pods",
     "installAll": "yarn installOldArch && yarn installNewArch",
-    "installOldArch": "yarn install && cd example && yarn install && cd ios && pod install",
-    "installNewArch": "yarn install && cd exampleNewArch && yarn install && cd ios && pod install"
+    "installOldArch": "node scripts/setup-veryfi.js && yarn install && cd example && yarn install && cd ios && pod install",
+    "installNewArch": "node scripts/setup-veryfi.js && yarn install && cd exampleNewArch && yarn install && cd ios && pod install"
   },
   "keywords": [
     "react-native",
@@ -77,12 +78,18 @@
     "@types/react": "^16.14.20"
   },
   "peerDependencies": {
+    "@veryfi/react-native-veryfi-lens": "*",
     "react": "*",
     "react-native": "*",
     "react-native-plaid-link-sdk": "*",
     "react-native-safe-area-context": ">=4.0.0",
     "react-native-webview": "*"
   },
+  "peerDependenciesMeta": {
+    "@veryfi/react-native-veryfi-lens": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.7.1",

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Platform } from 'react-native';
+import { useSelector } from 'react-redux';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
-import { getCheckDepositParams, getCheckDepositScript } from './UNCheckDepositComponent.utils';
+import { RequestExternalSdkEvent, UnitComponentsMessage } from '../../messages/webMessages/unitComponentsMessages';
+import { getCheckDepositParams, getCheckDepositScript, injectUnitVeryfiResponse } from './UNCheckDepositComponent.utils';
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
 import type { UNCheckDeposit, UNAccount, UNComponentsError, UNComponentsOnLoadResponse, UNComponentsOnLoadResponseData } from '../../types/shared';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -13,6 +14,9 @@ import { withReduxStore } from '../../helpers/store/helpers';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import { UNBaseView } from '../../nativeComponents/UNBaseView';
 import UNPermissionsModule from '../../nativeModulesHelpers/UNPermissionsHelper/UNPermissionsHelper';
+import { isVeryfiAvailable, configureAndShowVeryfiCamera } from '../../services/veryfiService';
+import type WebView from 'react-native-webview';
+import type { RootState } from '../../store';
 
 export interface UNCheckDepositComponentProps {
   accountId: string;
@@ -31,6 +35,8 @@ export interface UNCheckDepositComponentProps {
 const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+  const webRef = useRef<WebView>(null);
+  const veryfiCredentials = useSelector((state: RootState) => state.configuration.veryfiCredentials);
 
   useEffect(() => {
     const requestCameraAccess = async () => {
@@ -96,6 +102,28 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
         }
         break;
       }
+      case UnitComponentsMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+        const externalSdkEvent = message.details as RequestExternalSdkEvent;
+        if (externalSdkEvent.type !== 'veryfi') return;
+        if (!isVeryfiAvailable()) {
+          console.warn('Veryfi SDK is not installed — check deposit will use the default web scanner');
+          return;
+        }
+        if (!veryfiCredentials) {
+          console.error('Veryfi credentials not provided in UnitComponentsSdkManager.init()');
+          return;
+        }
+        configureAndShowVeryfiCamera(
+          veryfiCredentials,
+          (images) => {
+            injectUnitVeryfiResponse(webRef.current, images);
+          },
+          (error) => {
+            console.error('Veryfi error:', error);
+          }
+        );
+        break;
+      }
     }
   };
 
@@ -104,9 +132,10 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
   return (
     <UNBaseView style={style} onLoadError={ handleUnitOnLoad } fallback={<></>}>
       <WebComponent
+        ref={webRef}
         type={WebComponentType.checkDeposit}
         presentationMode={presentationMode}
-        params={getCheckDepositParams(props)}
+        params={getCheckDepositParams(props, veryfiCredentials)}
         script={getCheckDepositScript()}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         theme={props.theme}

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.utils.ts

@@ -1,12 +1,18 @@
 import { CheckMessage } from '../../messages/webMessages/checkMessage';
 import type { UNCheckDepositComponentProps } from './UNCheckDepositComponent';
-import { LISTENERS } from '../../scripts/html/bodyScript';
+import { DISPATCH_VERYFI_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
+import { isVeryfiAvailable, type UNVeryfiImage } from '../../services/veryfiService';
+import type WebView from 'react-native-webview';
+import type { UNVeryfiCredentials } from '../../types/shared/veryfi.types';
 
-export const getCheckDepositParams = (props: UNCheckDepositComponentProps) => {
+export const getCheckDepositParams = (props: UNCheckDepositComponentProps, veryfiCredentials?: UNVeryfiCredentials | null) => {
   const feeParam = props.fee ? `fee="${props.fee}"` : '';
+  const useVeryfi = veryfiCredentials && isVeryfiAvailable();
+  const versionParam = useVeryfi ? 'version="veryfi"' : '';
   return `
     account-id="${props.accountId}"
     ${feeParam}
+    ${versionParam}
     initial-stage-back-button="${props.initialStageBackButton ?? false}"
     final-stage-done-button="${props.finalStageDoneButton ?? false}"
   `;
@@ -41,5 +47,11 @@ export const getCheckDepositScript = () => {
     ${LISTENERS.unitPaymentInitialStageBackButtonClicked}
     ${LISTENERS.unitPaymentFinalStageDoneButtonClicked}
     ${CHECK_DEPOSIT_LISTENERS.restartRequest}
+    ${DISPATCH_VERYFI_RESPONSE}
   `;
 };
+
+export const injectUnitVeryfiResponse = (currentWeb: WebView | null, images: UNVeryfiImage[]) => {
+  const payload = { images };
+  currentWeb?.injectJavaScript(`dispatchVeryfiEvent(${JSON.stringify(payload)})`);
+};

package/src/messages/webMessages/veryfiMessages.ts

@@ -0,0 +1,3 @@
+export enum VeryfiMessage {
+  UNIT_VERYFI_RESPONSE = 'unitVeryfiResponse',
+}

package/src/scripts/html/bodyScript.ts

@@ -7,6 +7,7 @@ import { ActivityMessage } from '../../messages/webMessages/activityMessage';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
 import { PayeeManagementMessage } from '../../messages/webMessages/payeeManagementMessage';
 import { MultipleCardsMessage } from '../../messages/webMessages/multipleCardsMessage';
+import { VeryfiMessage } from '../../messages/webMessages/veryfiMessages';
 import { WebComponentType } from '../../types/internal/webComponent.types';
 import { UserDataKeys } from '../../types/internal/unitStore.types';
 
@@ -360,6 +361,15 @@ export const DISPATCH_PLAID_RESPONSE = `
     }
 `;
 
+export const DISPATCH_VERYFI_RESPONSE = `
+    const dispatchVeryfiEvent = (details) => {
+      const element = document.querySelector("${WebComponentType.checkDeposit}")
+      if (!element) return;
+      const event = new CustomEvent("${VeryfiMessage.UNIT_VERYFI_RESPONSE}",{ detail: details })
+      element.dispatchEvent(event)
+    }
+`;
+
 export const DISPATCH_PLAID_EXIT = `
     const dispatchPlaidExit = (details) => {
       const event = new CustomEvent("${PlaidMessage.UNIT_PLAID_EXIT}",{ detail: details })

package/src/services/veryfiService.ts

@@ -0,0 +1,123 @@
+import { NativeEventEmitter } from 'react-native';
+import type { UNVeryfiCredentials } from '../types/shared/veryfi.types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let VeryfiLens: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  VeryfiLens = require('@veryfi/react-native-veryfi-lens').default;
+} catch {
+  // Veryfi SDK not installed — will use web fallback
+}
+
+export const isVeryfiAvailable = (): boolean => {
+  return VeryfiLens != null;
+};
+
+export interface UNVeryfiImage {
+  base64Img: string;
+  isFront: boolean;
+}
+
+const CHECK_SETTINGS = {
+  documentTypes: ['check'],
+  checksBackIsOn: true,
+  blurDetectionIsOn: true,
+  autoDocDetectionAndCropIsOn: true,
+  dataExtractionEngine: true,
+  returnStitchedPDF: true,
+  originalImageMaxSizeInMB: 1.4,
+};
+
+export const configureAndShowVeryfiCamera = (
+  credentials: UNVeryfiCredentials,
+  onImages: (images: UNVeryfiImage[]) => void,
+  onError: (error: string) => void
+): void => {
+  if (!VeryfiLens) {
+    onError('Veryfi SDK is not available');
+    return;
+  }
+
+  const emitter = new NativeEventEmitter(VeryfiLens.NativeModule);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const subscriptions: any[] = [];
+  let delivered = false;
+
+  const cleanup = () => {
+    subscriptions.forEach((sub) => sub.remove());
+  };
+
+  const deliverImages = (imagePaths: string[]) => {
+    if (delivered) return;
+    delivered = true;
+
+    let converted = 0;
+    const images: UNVeryfiImage[] = [];
+
+    imagePaths.forEach((filePath, index) => {
+      VeryfiLens.getFileBase64(
+        filePath,
+        // errorCallback
+        () => {
+          converted++;
+          if (converted === imagePaths.length) {
+            cleanup();
+            if (images.length > 0) {
+              onImages(images);
+            } else {
+              onError('Failed to convert check images');
+            }
+          }
+        },
+        // successCallback
+        (base64Data: string) => {
+          images.push({
+            base64Img: base64Data,
+            isFront: index === 1,
+          });
+          converted++;
+          if (converted === imagePaths.length) {
+            cleanup();
+            onImages(images);
+          }
+        }
+      );
+    });
+  };
+
+  // Process images when stitched PDF is ready (matches Android pattern)
+  subscriptions.push(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    emitter.addListener(VeryfiLens.Events.onVeryfiLensUpdate, (event: any) => {
+      if (event.status === 'inprogress' && event.msg === 'img_stitched_pdf_path') {
+        const paths = event.img_original_paths || [];
+        if (paths.length > 0) {
+          deliverImages(paths);
+        }
+      }
+    })
+  );
+
+  // No onClose listener — if the user cancels, we simply don't dispatch
+  // unitVeryfiResponse, and the web SDK's polling handles the timeout.
+
+  subscriptions.push(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    emitter.addListener(VeryfiLens.Events.onVeryfiLensError, (event: any) => {
+      cleanup();
+      onError(event.msg || 'Veryfi error');
+    })
+  );
+
+  const veryfiCredentials = {
+    clientId: credentials.clientId,
+    userName: credentials.userName,
+    apiKey: credentials.apiKey,
+    url: credentials.url,
+  };
+
+  VeryfiLens.configureWithCredentials(veryfiCredentials, CHECK_SETTINGS, () => {
+    VeryfiLens.showCamera();
+  });
+};

package/src/slices/ConfigurationSlice.ts

@@ -1,11 +1,13 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../store';
+import type { UNVeryfiCredentials } from '../types/shared/veryfi.types';
 
 export interface ConfigurationState {
   unitScript?: string;
   theme?: string;
   language?: string;
   customerToken?: string;
+  veryfiCredentials?: UNVeryfiCredentials;
 }
 
 const initialState: ConfigurationState = {};
@@ -25,10 +27,13 @@ const ConfigurationSlice = createSlice({
     },
     setCustomerToken(state, action: PayloadAction<string | undefined>) {
       state.customerToken = action.payload;
-    }
+    },
+    setVeryfiCredentials(state, action: PayloadAction<UNVeryfiCredentials | undefined>) {
+      state.veryfiCredentials = action.payload;
+    },
   },
 });
 
-export const { setUnitScript, setLanguage, setTheme, setCustomerToken } = ConfigurationSlice.actions;
+export const { setUnitScript, setLanguage, setTheme, setCustomerToken, setVeryfiCredentials } = ConfigurationSlice.actions;
 export const selectConfiguration = (state: RootState) => state.configuration;
 export default ConfigurationSlice.reducer;

package/src/types/shared/index.ts

@@ -19,3 +19,4 @@ export * from './multiFactorAuthentication.types';
 export * from './env.types';
 export * from './securitySettings';
 export * from './createCard.types';
+export * from './veryfi.types';

package/src/types/shared/veryfi.types.ts

@@ -0,0 +1,6 @@
+export interface UNVeryfiCredentials {
+  clientId: string;
+  userName: string;
+  apiKey: string;
+  url: string;
+}

package/src/unitComponentsSdkManager/UnitComponentsSdkManager.ts

@@ -5,9 +5,10 @@ import type { UNFonts } from '../types/shared/fonts.types';
 import { warnClientIfNeeded } from '../utils/webVersioningStrategy.utils';
 import { UNComponentsSDKConstants } from './UnitComponentsSdk.constants';
 import type { UNComponentsWebVersioningStrategy } from '../types/shared';
-import { setTheme, setLanguage, setCustomerToken } from '../slices/ConfigurationSlice';
+import { setTheme, setLanguage, setCustomerToken, setVeryfiCredentials } from '../slices/ConfigurationSlice';
 import { store } from '../store/store';
 import { UNComponentsEnvironment } from '../types/shared/env.types';
+import type { UNVeryfiCredentials } from '../types/shared/veryfi.types';
 import { UserDataKeys } from '../types/internal/unitStore.types';
 import UNStoreManagerHelper from '../nativeModulesHelpers/UNStoreModuleHelper/UNStoreModuleHelper';
 import { UnitComponentsHelpersManager } from './unitComponentsHelpersManager/UnitComponentsHelpersManager';
@@ -26,7 +27,7 @@ export class UnitComponentsSDK {
   protected static fonts?: UNFonts;
   protected static signedNonce?: string;
   protected static pushProvisionModule?: typeof NativeModules;
-  protected static sdkVersion = '3.1.2';
+  protected static sdkVersion = '3.3.0-beta.1';
   static iosFontBase64Map: Record<string, string> = {};
 
   public static init = async (
@@ -115,6 +116,10 @@ export class UnitComponentsSDK {
     return this.sdkVersion;
   };
 
+  public static setVeryfiCredentials = (credentials: UNVeryfiCredentials) => {
+    store.dispatch(setVeryfiCredentials(credentials));
+  };
+
   public static cleanUserData = () => {
     UNStoreManagerHelper.cleanValue(UserDataKeys.unitCustomerToken);
     UNStoreManagerHelper.cleanValue(UserDataKeys.unitVerifiedCustomerToken);