react-native-unit-components 1.5.0 → 1.7.0

package/lib/typescript/components/UNBookPaymentComponent/UNBookPaymentComponent.d.ts

@@ -1,4 +1,4 @@
-import type { UNOnLoadResponse, UNBookPaymentData, UNAccountData } from '../../sharedTypes';
+import type { UNOnLoadResponse, UNBookPaymentData, UNAccountData } from '../../types/shared';
 export interface UNBookPaymentComponentProps {
     accountId: string;
     customerToken: string;
@@ -7,6 +7,7 @@ export interface UNBookPaymentComponentProps {
     counterPartyName: string;
     theme?: string;
     language?: string;
+    isAutoFocus?: boolean;
     onPaymentCreated?: (data: UNBookPaymentData) => void;
     onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
 }

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.d.ts

@@ -1,14 +1,7 @@
-import { WebComponentType } from '../../webComponent/WebComponent';
-import { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
 export declare enum ScrollState {
     onTop = "onTop",
     unScrollable = "unScrollable",
     onlyWebView = "webViewScroll",
     onlyBottomSheet = "onlyBottomSheet"
 }
-export type BottomSheetSlotData = {
-    componentName?: WebComponentType;
-    componentResourceId?: string;
-    requestRenderingEvent: RequestRenderingEvent;
-};
 export declare const UNBottomSheetComponent: () => JSX.Element;

package/lib/typescript/components/UNBottomSheetComponent/UNBottomSheetComponent.utils.d.ts

@@ -1,6 +1,10 @@
 import type WebView from 'react-native-webview';
 import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { BottomSheetSlotData, WebComponentData } from '../../types/internal/bottomSheet.types';
 export declare const getBottomSheetScript: () => string;
 export declare const renderingBottomSheetRequest: (currentWebView: WebView, renderingRequest: RequestRenderingEvent) => void;
 export declare const resetHtml: (currentWebView: WebView) => void;
-export declare const handleHtmlFullHeight: (currentWebView: WebView | null, windowHeight: number) => number;
+export declare const injectHtmlFullScreenHeight: (currentWebView: WebView | null, bottomSheetHeight: number) => void;
+export declare const isAddToWalletFromRequestRendering: (data: BottomSheetSlotData) => boolean;
+export declare const isAddToWalletByComponentParams: (data: WebComponentData) => boolean;
+export declare const extractCardIdFromComponentParams: (data: WebComponentData) => string | null;

package/lib/typescript/components/UNBottomSheetComponent/components/UNAddToWalletBottomSheetItem.d.ts

@@ -1,6 +1,10 @@
-import type { RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
+import { type RequestRenderingEvent } from '../../../messages/webMessages/unitMessages';
+import { BottomSheetRenderingType, WebComponentData } from '../../../types/internal/bottomSheet.types';
 export interface UNAddToWalletBottomSheetItemProps {
+    renderingType: BottomSheetRenderingType;
     renderingRequest?: RequestRenderingEvent;
-    cardId?: string;
+    webComponentData?: WebComponentData;
+    cardId: string;
+    fullScreenHeight: number;
 }
 export declare const UNAddToWalletBottomSheetItem: (props: UNAddToWalletBottomSheetItemProps) => JSX.Element;

package/lib/typescript/components/UNCardComponent/UNCardComponent.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { UNOnLoadResponse, UNCardData, UNCardMenuAction } from '../../sharedTypes';
+import type { UNOnLoadResponse, UNCardData, UNCardMenuAction } from '../../types/shared';
 import type { NativeModules } from 'react-native';
 export interface UNCardComponentProps {
     cardId: string;
     customerToken: string;
+    learnMoreUrl?: string;
     theme?: string;
     language?: string;
     hideActionsMenuButton?: boolean;

package/lib/typescript/components/UNCardComponent/UNCardComponent.utils.d.ts

@@ -1,17 +1,9 @@
 import type WebView from 'react-native-webview';
 import type { UNCardComponentProps } from './UNCardComponent';
-import type { NativeModules } from 'react-native';
-import { UNWallet, UNWalletCode, UNWalletName } from '../../../src/sharedTypes/wallet.types';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
-import type { UNCardMenuAction } from '../../sharedTypes';
+import type { UNCardMenuAction } from '../../types/shared';
 export declare const getCardParams: (props: UNCardComponentProps) => string;
 export declare const getCardScript: () => string;
 export declare const injectOpenActionsMenuScript: (currentWeb: WebView | null) => void;
 export declare const injectRequestCardActionScript: (currentWeb: WebView | null, action: UNCardMenuAction) => void;
 export declare const injectRefreshEventIfNeeded: (currentWeb: WebView | null, requestRefreshEvent: RequestRefreshEvent | null, cardId: string) => void;
-export declare const launchGetWallets: (customerToken: string, cardId: string, pushProvisioningModule: typeof NativeModules) => Promise<{
-    name: UNWalletName;
-    code: UNWalletCode;
-    status: any;
-} | null | undefined>;
-export declare const launchStartCardProvisioning: (pushProvisioningModule: typeof NativeModules, wallet: UNWallet | null) => Promise<any>;

package/lib/typescript/components/UNCheckDepositComponent/UNCheckDepositComponent.d.ts

@@ -1,5 +1,5 @@
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
-import type { UNAccountData, UNOnLoadResponse } from '../../sharedTypes';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
+import type { UNAccountData, UNOnLoadResponse } from '../../types/shared';
 export interface UNCheckDepositComponentProps {
     accountId: string;
     fee: number;

package/lib/typescript/components/utils/nativeModulesInfo.d.ts

@@ -0,0 +1 @@
+export declare const getAndroidPackageName: () => Promise<any>;

package/lib/typescript/flows/UNFlows.d.ts

@@ -0,0 +1,4 @@
+export declare class UNFlows {
+    constructor();
+    startPushProvisioning(cardId: string, customerToken: string): Promise<void>;
+}

package/lib/typescript/flows/card/UNCardFlows.d.ts

@@ -0,0 +1,3 @@
+export declare class UNCardFlows {
+    static startPushProvisioning: (cardId: string, customerToken: string) => Promise<void>;
+}

package/lib/typescript/helpers/pushProvisioningService/hooks/useCardWallet.d.ts

@@ -0,0 +1,7 @@
+import { type UNWallet } from '../../../types/shared/wallet.types';
+export type CardToEncryptedPayload = {
+    [cardId: string]: string;
+};
+export declare const useCardWallet: (cardId: string) => {
+    currentUNWallet: UNWallet | undefined;
+};

package/lib/typescript/helpers/pushProvisioningService/startProvisioning.d.ts

@@ -0,0 +1,2 @@
+import type { UNWallet } from '../../types/shared/wallet.types';
+export declare const launchStartCardProvisioning: (wallet: UNWallet | null) => Promise<any>;

package/lib/typescript/index.d.ts

@@ -1,3 +1,3 @@
 export * from './components';
-export * from './sharedTypes';
+export * from './types/shared';
 export { UnitSDK, UNEnvironment } from './unitSdkManager/UnitSdkManager';

package/lib/typescript/messages/nativeMessages/bottomSheetMessage.d.ts

@@ -0,0 +1,9 @@
+import type { NativeComponentRendering, WebComponentRendering, SlotRendering } from '../../types/internal/bottomSheet.types';
+export declare enum BottomSheetNativeMessage {
+    START_FLOW = "startBottomSheetFlow"
+}
+export declare enum CardAddToWalletErrors {
+    closedNativeWalletScreen = "VP_ERROR_302"
+}
+export type StartBottomSheetFlowMessage = SlotRendering | WebComponentRendering | NativeComponentRendering;
+export type BottomSheetNativeEvent = StartBottomSheetFlowMessage;

package/lib/typescript/messages/nativeMessages/cardMessage.d.ts

@@ -1,19 +1,3 @@
-import type { UNCardAddToWalletStatus } from '../../sharedTypes/wallet.types';
-export declare enum CardNativeMessage {
-    CARD_GET_ADD_TO_WALLET_STATUS = "cardGetAddToWalletStatus",
-    CARD_UPDATE_ADD_TO_WALLET_STATUS = "cardUpdateAddToWalletStatus",
-    CARD_START_PUSH_PROVISIONING = "cardStartPushProvisioning"
-}
 export declare enum CardAddToWalletErrors {
     closedNativeWalletScreen = "VP_ERROR_302"
 }
-export interface UNCardAddToWalletStatusEvent {
-    status: UNCardAddToWalletStatus;
-}
-export interface CardGetAddToWalletStatusEvent {
-    cardId: string;
-}
-export interface CardStartPushProvisioningEvent {
-    cardId: string;
-}
-export type CardNativeEvent = UNCardAddToWalletStatusEvent | CardGetAddToWalletStatusEvent | CardStartPushProvisioningEvent;

package/lib/typescript/messages/nativeMessages/index.d.ts

@@ -1,7 +1,7 @@
-import type { CardNativeEvent, CardNativeMessage } from './cardMessage';
+import type { BottomSheetNativeEvent, BottomSheetNativeMessage } from './bottomSheetMessage';
 import type { SDKEvent, SDKMessage } from './sdkMessage';
-export type NativeMessageType = SDKMessage | CardNativeMessage;
-export type NativeEvent = CardNativeEvent | SDKEvent;
+export type NativeMessageType = SDKMessage | BottomSheetNativeMessage;
+export type NativeEvent = SDKEvent | BottomSheetNativeEvent;
 export interface NativeMessage {
     type: NativeMessageType;
     details?: NativeEvent;

package/lib/typescript/messages/webMessages/accountMessage.d.ts

@@ -1,4 +1,4 @@
-import type { UNAccountData } from '../../sharedTypes';
+import type { UNAccountData } from '../../types/shared';
 export declare enum AccountMessage {
     UNIT_ACCOUNT_CHANGED = "unitAccountChanged"
 }

package/lib/typescript/messages/webMessages/achCreditMessage.d.ts

@@ -1,4 +1,4 @@
-import type { UNACHData } from '../../sharedTypes';
+import type { UNACHData } from '../../types/shared';
 export interface PaymentCreatedEvent {
     data: UNACHData;
 }

package/lib/typescript/messages/webMessages/bookPaymentMessage.d.ts

@@ -1,4 +1,4 @@
-import type { UNBookPaymentData } from '../../sharedTypes';
+import type { UNBookPaymentData } from '../../types/shared';
 export interface PaymentCreatedEvent {
     data: UNBookPaymentData;
 }

package/lib/typescript/messages/webMessages/cardMessage.d.ts

@@ -1,4 +1,4 @@
-import type { UNCardData } from '../../sharedTypes';
+import type { UNCardData } from '../../types/shared';
 export declare enum CardMessage {
     CARD_ACTIVATED = "unitCardActivated",
     CARD_STATUS_CHANGED = "unitCardStatusChanged"

package/lib/typescript/messages/webMessages/checkMessage.d.ts

@@ -1,4 +1,4 @@
-import type { UNCheckDepositData } from '../../sharedTypes/checkDeposit.types';
+import type { UNCheckDepositData } from '../../types/shared/checkDeposit.types';
 export declare enum CheckMessage {
     CHECK_DEPOSIT_CREATED = "unitCheckDepositCreated",
     CHECK_DEPOSIT_RESTART_REQUEST = "unitCheckDepositRestartRequest"

package/lib/typescript/messages/webMessages/onLoadMessage.d.ts

@@ -1,6 +1,6 @@
-import type { UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
-import type { UNAuthorizationData } from '../../sharedTypes/authorization.types';
-import type { UNTransactionData } from '../../sharedTypes/transactions.types';
+import type { UNAccountData, UNCounterpartyAccountData, UNCardData, UNError, UNOnLoadResponseData } from '../../types/shared';
+import type { UNAuthorizationData } from '../../types/shared/authorization.types';
+import type { UNTransactionData } from '../../types/shared/transactions.types';
 export declare enum RESPONSE_KEYS {
     errors = "errors",
     card = "cardResult",

package/lib/typescript/messages/webMessages/unitMessages.d.ts

@@ -8,7 +8,8 @@ export declare enum UnitMessage {
     UNIT_REQUEST_DOWNLOAD = "unitRequestDownload",
     UNIT_PLAID_TOKEN_CREATED = "unitPlaidLinkTokenCreated",
     UNIT_REQUEST_EXTERNAL_SDK = "unitRequestExternalSdk",
-    UNIT_PLAID_RESPONSE = "unitPlaidResponse"
+    UNIT_PLAID_RESPONSE = "unitPlaidResponse",
+    PAGE_HEIGHT = "PAGE_HEIGHT"
 }
 export interface RequestRenderingEvent {
     data: RequestRenderingEventData;

package/lib/typescript/{components/UNCardComponent/networking → networking}/requests/UNWalletPayloadRequest.d.ts

@@ -1,2 +1,2 @@
-import { UNEnvironment } from '../../../../unitSdkManager/UnitSdkManager';
+import { UNEnvironment } from '../../unitSdkManager/UnitSdkManager';
 export declare const getMobileWalletPayload: (customerToken: string, cardId: string, env: UNEnvironment) => Promise<any>;

package/lib/typescript/scripts/html/bodyHtml.d.ts

@@ -1,7 +1,3 @@
+import { PresentationMode } from '../../types/internal/webComponent.types';
 export declare const webViewId = "webViewContainer";
-export declare enum PresentationMode {
-    CoverInjectedHeight = "coverInjectedHeight",
-    Inherit = "inherit",
-    Default = "deafult"
-}
 export declare const getHtmlBody: (unitComponent: string, unitComponentProps?: string, presentationMode?: PresentationMode) => string;

package/lib/typescript/scripts/html/bodyScript.d.ts

@@ -12,6 +12,7 @@ export declare const LISTENERS: {
     cardStatusChange: string;
     unitRequestExternalSdk: string;
     unitPaymentCreated: string;
+    unitPlaidTokenCreated: string;
     unitAccountChanged: string;
     unitActivityFiltersChanged: string;
 };

package/lib/typescript/types/internal/bottomSheet.types.d.ts

@@ -0,0 +1,35 @@
+import type { RequestRenderingEvent } from '../../messages/webMessages/unitMessages';
+import type { PresentationMode, WebComponentType } from './webComponent.types';
+export declare enum BottomSheetRenderingType {
+    Slot = 0,
+    WebComponent = 1,
+    NativeComponent = 2
+}
+export type BottomSheetSlotData = {
+    componentName?: WebComponentType;
+    componentResourceId?: string;
+    requestRenderingEvent: RequestRenderingEvent;
+};
+export type WebComponentData = {
+    type: WebComponentType;
+    presentationMode?: PresentationMode;
+    params?: string;
+    theme?: string;
+    language?: string;
+    windowParams?: string;
+};
+export type NativeComponentData = {
+    component: React.ReactNode;
+};
+export interface SlotRendering {
+    type: BottomSheetRenderingType.Slot;
+    data: BottomSheetSlotData;
+}
+export interface WebComponentRendering {
+    type: BottomSheetRenderingType.WebComponent;
+    data: WebComponentData;
+}
+export interface NativeComponentRendering {
+    type: BottomSheetRenderingType.NativeComponent;
+    data: NativeComponentData;
+}

package/lib/typescript/types/internal/webComponent.types.d.ts

@@ -0,0 +1,16 @@
+export declare enum WebComponentType {
+    card = "unit-elements-card",
+    bookPayment = "unit-elements-book-payment",
+    activity = "unit-elements-activity",
+    slot = "unit-elements-sdk-slot",
+    account = "unit-elements-account",
+    checkDeposit = "unit-elements-check-deposit",
+    achDebitPayment = "unit-elements-ach-debit-payment",
+    achCreditPayment = "unit-elements-ach-credit-payment",
+    cardAction = "unit-elements-card-action"
+}
+export declare enum PresentationMode {
+    CoverInjectedHeight = "coverInjectedHeight",
+    Inherit = "inherit",
+    Default = "deafult"
+}

package/lib/typescript/{sharedTypes → types/shared}/achCredit.types.d.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAccountData, UNCounterpartyAccountData } from './account.types';
 import type { UNAchCounterparty, UNCounterpartyVerificationMethod, UNPaymentStatus } from './payments.types';
 import type { UNTags, UNRelationship } from './types';

package/lib/typescript/{sharedTypes → types/shared}/activity.types.d.ts

@@ -1,4 +1,4 @@
-import type { RESPONSE_KEYS } from '../messages/webMessages/onLoadMessage';
+import type { RESPONSE_KEYS } from '../../messages/webMessages/onLoadMessage';
 import type { UNAuthorizationData } from './authorization.types';
 import type { UNTransactionData } from './transactions.types';
 export type UNActivityOnLoadData = {

package/lib/typescript/unitSdkManager/UnitSdkManager.d.ts

@@ -1,3 +1,5 @@
+import type { NativeModules } from 'react-native';
+import { UnitUiManager } from './unitUiManager/unitUiManager';
 export declare enum UNEnvironment {
     sandbox = "sandbox",
     production = "production"
@@ -8,13 +10,20 @@ export declare const UNIT_SCRIPT_URL: {
 };
 export declare class UnitSDK {
     protected static env?: UNEnvironment;
+    protected static customerToken?: string;
     protected static theme?: string;
     protected static language?: string;
     protected static signedNonce?: string;
+    protected static pushProvisionModule?: typeof NativeModules;
+    static ui: UnitUiManager;
     static init: (env: UNEnvironment, theme?: string, language?: string) => Promise<void>;
+    static setPushProvisioningModule: (pushProvisionModule: typeof NativeModules) => void;
+    static getPushProvisionModule: () => import("react-native").NativeModulesStatic | undefined;
     static setSignedNonce: (signedNonce: string) => void;
     static getEnv: () => UNEnvironment | undefined;
     static getTheme: () => string | undefined;
     static getLanguage: () => string | undefined;
     static getSignedNonce: () => string | undefined;
+    static setCustomerToken: (customerToken: string) => void;
+    static getCustomerToken: () => string | undefined;
 }

package/lib/typescript/unitSdkManager/unitUiManager/unitUiManager.d.ts

@@ -0,0 +1,6 @@
+import { UNFlows } from '../../flows/UNFlows';
+export declare class UnitUiManager {
+    flows: UNFlows;
+    constructor();
+    private init;
+}

package/lib/typescript/webComponent/WebComponent.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { WebView } from 'react-native-webview';
-import { PresentationMode } from '../scripts/html/bodyHtml';
 import type { WebViewMessage } from '../messages/webMessages';
+import type { PresentationMode, WebComponentType } from '../types/internal/webComponent.types';
 export interface WebComponentProps {
     type: WebComponentType;
     presentationMode?: PresentationMode;
@@ -14,15 +14,6 @@ export interface WebComponentProps {
     nestedScrollEnabled?: boolean;
     handleScroll?: (event: any) => void;
     width?: number;
-}
-export declare enum WebComponentType {
-    card = "unit-elements-card",
-    bookPayment = "unit-elements-book-payment",
-    activity = "unit-elements-activity",
-    slot = "unit-elements-sdk-slot",
-    account = "unit-elements-account",
-    checkDeposit = "unit-elements-check-deposit",
-    achDebitPayment = "unit-elements-ach-debit-payment",
-    achCreditPayment = "unit-elements-ach-credit-payment"
+    windowParams?: string;
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;

package/lib/typescript/webComponent/html.d.ts

@@ -2,6 +2,7 @@ export declare const HTML_PLACEHOLDER: {
     SCRIPT_UNIT: string;
     BODY: string;
     SCRIPT_FROM_NATIVE: string;
+    WINDOW_PARAMS: string;
 };
 declare const htmlText: string;
 export default htmlText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -1,15 +1,18 @@
-import React, { useState } from 'react';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
+import React, { useState, useEffect, useRef } from 'react';
+import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../sharedTypes';
+import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { View } from 'react-native';
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHCreditParams, getACHCreditScript } from './UNACHCreditComponent.utils';
+import { Platform, View } from 'react-native';
+import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
+import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
+import type WebView from 'react-native-webview';
+import { getAndroidPackageName } from '../utils/nativeModulesInfo';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 
 export interface UNACHCreditComponentProps {
   accountId: string;
@@ -18,6 +21,7 @@ export interface UNACHCreditComponentProps {
   language?: string;
   isAutoFocus?: boolean;
   fee?: number;
+  withPlaid?: boolean;
   onPaymentCreated?: (data: UNACHData) => void;
   onLoad?: (response: UNOnLoadResponse<UNACHOnLoadData>) => void;
 }
@@ -25,6 +29,19 @@ export interface UNACHCreditComponentProps {
 export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
   const [height, setHeight] = useState<number>(0);
   const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+  const [linkToken, setLinkToken] = useState<string>();
+  const [appPackageName, setAppPackageName] = useState<string>();
+  const webRef = useRef<WebView>(null);
+
+  useEffect(() => {
+    const setPackageNameForAndroid = async () => {
+      if (Platform.OS === 'android') {
+        const packageName = await getAndroidPackageName();
+        setAppPackageName(packageName);
+      }
+    };
+    setPackageNameForAndroid();
+  }, []);
 
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
@@ -72,16 +89,38 @@ export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         }
         break;
       }
+      case UnitMessage.UNIT_PLAID_TOKEN_CREATED: {
+        const linkTokenEvent = message.details as PlaidTokenCreatedEvent;
+        const linkTokenData = linkTokenEvent.linkToken as PlaidLinkTokenData;
+        setLinkToken(linkTokenData.attributes.linkToken);
+        break;
+      }
+
+      case UnitMessage.UNIT_REQUEST_EXTERNAL_SDK: {
+        const externalSdkType = (message.details as RequestExternalSdkEvent).type;
+        if (externalSdkType !== 'plaid') return;
+        linkToken && openLink({
+          tokenConfig: { noLoadingState: false, token: linkToken },
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
+          },
+          onExit: exit => { console.log(exit); }
+        }).catch(e => {
+          console.error(e);
+        });
+        break;
+      }
     }
   };
 
   const renderACHCreditWebView = () => {
     return (
       <WebComponent
+        ref={webRef}
         type={WebComponentType.achCreditPayment}
         presentationMode={presentationMode}
         params={getACHCreditParams(props)}
-        script={getACHCreditScript()}
+        script={getACHCreditScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
         isScrollable={false}
         theme={props.theme}

package/src/components/UNACHCreditComponent/UNACHCreditComponent.utils.ts

@@ -1,26 +1,29 @@
 import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
-
-import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type WebView from 'react-native-webview';
+import type { LinkSuccess } from 'react-native-plaid-link-sdk';
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from '../../scripts/html/bodyScript';
 
 export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
   return `
     account-id="${props.accountId}"
     customer-token="${props.customerToken}"
+    with-plaid="${props.withPlaid ?? false}"
     is-auto-focus="${props.isAutoFocus ?? false}"
     ${props.fee ? `fee="${props.fee}"` : ''}
     style="height: 100%"
   `;
 };
 
-export const getACHCreditScript = () => {
+export const getACHCreditScript = (appPackageName?: string) => {
   return `
-    window.addEventListener("${PaymentMessage.PAYMENT_CREATED}", (e) => {
-      const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${PaymentMessage.PAYMENT_CREATED}", details:  { data: JSON.stringify(data.data) }})
-        }).catch((e) => {
-          console.log(e)
-        })
-    });
+    ${LISTENERS.unitPlaidTokenCreated}
+    ${appPackageName && `window.UnitMobileSDKConfig.androidPackageName='${appPackageName}'`}
+    ${LISTENERS.unitPaymentCreated}
+    ${DISPATCH_PLAID_RESPONSE}
   `;
 };
+
+export const injectUnitPlaidResponse = (currentWeb: WebView | null, success: LinkSuccess) => {
+  const successObj = {data: { publicToken: success.publicToken, metadata: success.metadata}};
+  currentWeb?.injectJavaScript(`dispatchPlaidEvent(${JSON.stringify(successObj)})`);
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -1,19 +1,19 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
-import { PresentationMode } from '../../scripts/html/bodyHtml';
+import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
-import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../sharedTypes';
+import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { Platform, View } from 'react-native';
 import { PlaidLinkTokenData, PlaidTokenCreatedEvent, RequestExternalSdkEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
-import { getACHDebitParams, getACHDebitScript, getAndroidPackageName, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
-
+import { getACHDebitParams, getACHDebitScript, injectUnitPlaidResponse } from './UNACHDebitComponent.utils';
 import { LinkSuccess, openLink } from 'react-native-plaid-link-sdk';
 import type WebView from 'react-native-webview';
 
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { getAndroidPackageName } from '../utils/nativeModulesInfo';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 
 export interface UNACHDebitComponentProps {
   accountId: string;
@@ -43,10 +43,6 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     setPackageNameForAndroid();
   }, []);
 
-  const dispatchUnitPlaidResponse = (success: LinkSuccess) => {
-    injectUnitPlaidResponse(webRef.current, success);
-  };
-
   const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
     if (!props.onLoad) {
       return;
@@ -105,8 +101,8 @@ export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         if (externalSdkType !== 'plaid') return;
         linkToken && openLink({
           tokenConfig: { noLoadingState: false, token: linkToken },
-          onSuccess: (success) => {
-            dispatchUnitPlaidResponse(success);
+          onSuccess: (success: LinkSuccess) => {
+            injectUnitPlaidResponse(webRef.current, success);
           },
           onExit: exit => { console.log(exit); }
         }).catch(e => {

package/src/components/UNACHDebitComponent/UNACHDebitComponent.utils.ts

@@ -3,9 +3,6 @@ import type { UNACHDebitComponentProps } from './UNACHDebitComponent';
 
 import type WebView from 'react-native-webview';
 import type { LinkSuccess } from 'react-native-plaid-link-sdk';
-import { NativeModules } from 'react-native';
-const { RNAppInfoModule } = NativeModules;
-import { UnitMessage } from '../../messages/webMessages/unitMessages';
 
 export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   return `
@@ -17,25 +14,9 @@ export const getACHDebitParams = (props: UNACHDebitComponentProps) => {
   `;
 };
 
-export const getAndroidPackageName = async () => {
-  try {
-    const response = await RNAppInfoModule.getAppPackageName();
-    return response;
-  } catch (error) {
-    console.error(error);
-  }
-};
-
 export const getACHDebitScript = (androidPackageName?: string) => {
   return `
-      window.addEventListener("${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", (e) => {
-        const response = e.detail
-        response.then((data) => {
-          postMessageToSDK({ type: "${UnitMessage.UNIT_PLAID_TOKEN_CREATED}", details:  { linkToken: data.data }})
-        }).catch((e) => {
-          console.log(e)
-        })
-      });
+    ${LISTENERS.unitPlaidTokenCreated}
     ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
     ${LISTENERS.unitPaymentCreated}
     ${DISPATCH_PLAID_RESPONSE}