react-native-unit-components 1.0.4 → 1.1.0

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

@@ -6,7 +6,7 @@ export declare enum ScrollState {
     onlyWebView = "webViewScroll",
     onlyBottomSheet = "onlyBottomSheet"
 }
-export declare type BottomSheetSlotData = {
+export type BottomSheetSlotData = {
     componentName?: WebComponentType;
     componentResourceId?: string;
     requestRenderingEvent: RequestRenderingEvent;

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

@@ -4,8 +4,11 @@ export interface UNCardComponentProps {
     cardId: string;
     customerToken: string;
     theme?: string;
+    hideActionsMenuButton?: boolean;
+    hideCardTitle?: boolean;
+    hideSensitiveDataButton?: boolean;
+    onLoad?: (response: ResponseUnitOnLoadEvent) => void;
     onStatusChanged?: (card: UNCardData) => void;
     pushProvisioningModule?: typeof NativeModules;
-    onLoad?: (response: ResponseUnitOnLoadEvent) => void;
 }
 export declare const UNCardComponent: (props: UNCardComponentProps) => JSX.Element;

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

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

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

@@ -3,3 +3,5 @@ export * from './UNBottomSheetComponent/UNBottomSheetComponent';
 export * from './UNBookPaymentComponent/UNBookPaymentComponent';
 export * from './UNActivityComponent/UNActivityComponent';
 export * from './UNAccountComponent/UNAccountComponent';
+export * from './UNACHDebitComponent/UNACHDebitComponent';
+export * from './UNACHCreditComponent/UNACHCreditComponent';

package/lib/typescript/helpers/EventBus.d.ts

@@ -1,6 +1,6 @@
 import type { NativeMessageType } from '../messages/nativeMessages';
 import type { WebViewMessageType } from '../messages/webMessages';
-export declare type BusEventKey = NativeMessageType | WebViewMessageType;
+export type BusEventKey = NativeMessageType | WebViewMessageType;
 export default class EventBus {
     private static _instance;
     private eventListeners;

package/lib/typescript/hooks/listenerToBus.d.ts

@@ -1,7 +1,7 @@
 import { BusEventKey } from '../helpers/EventBus';
-declare type Listener = {
+type Listener = {
     busEventKey: BusEventKey;
     action: (data: any) => void;
 };
-export declare const useListenerToBus: (listeners: Listener[]) => void;
+export declare const useListenerToBus: (listener: Listener) => void;
 export {};

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

@@ -25,4 +25,4 @@ export interface CardGetAddToWalletStatusEvent {
 export interface CardStartPushProvisioningEvent {
     cardId: string;
 }
-export declare type CardNativeEvent = CardAddToWalletStatusEvent | CardGetAddToWalletStatusEvent | CardStartPushProvisioningEvent;
+export type CardNativeEvent = CardAddToWalletStatusEvent | CardGetAddToWalletStatusEvent | CardStartPushProvisioningEvent;

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

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

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

@@ -5,4 +5,4 @@ export declare enum SDKMessage {
 export interface SdkScriptFetched {
     unitScript: string;
 }
-export declare type SDKEvent = SdkScriptFetched;
+export type SDKEvent = SdkScriptFetched;

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

@@ -0,0 +1,5 @@
+import type { UNACHData } from '../../sharedTypes';
+export interface PaymentCreatedEvent {
+    data: UNACHData;
+}
+export type ACHEvent = PaymentCreatedEvent;

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

@@ -1,8 +1,5 @@
 import type { UNBookPaymentData } from '../../sharedTypes';
-export declare enum BookPaymentMessage {
-    PAYMENT_CREATED = "unitPaymentCreated"
-}
 export interface PaymentCreatedEvent {
     data: UNBookPaymentData;
 }
-export declare type BookPaymentEvent = PaymentCreatedEvent;
+export type BookPaymentEvent = PaymentCreatedEvent;

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

@@ -5,4 +5,4 @@ export declare enum CardMessage {
 export interface CardStatusChangedEvent {
     card: UNCardData;
 }
-export declare type CardEvent = CardStatusChangedEvent;
+export type CardEvent = CardStatusChangedEvent;

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

@@ -1,9 +1,11 @@
-import type { BookPaymentEvent, BookPaymentMessage } from './bookPaymentMessage';
+import type { ACHEvent } from './achCreditMessage';
+import type { BookPaymentEvent } from './bookPaymentMessage';
 import type { CardEvent, CardMessage } from './cardMessage';
 import type { PageEvent, PageMessage } from './pageMessage';
+import type { PaymentMessage } from './paymentsMessage';
 import type { UnitEvent, UnitMessage } from './unitMessages';
-export declare type WebViewMessageType = PageMessage | CardMessage | UnitMessage | BookPaymentMessage;
-declare type WebViewEvent = PageEvent | UnitEvent | CardEvent | BookPaymentEvent;
+export type WebViewMessageType = PageMessage | CardMessage | UnitMessage | PaymentMessage;
+type WebViewEvent = PageEvent | UnitEvent | CardEvent | BookPaymentEvent | PaymentMessage | ACHEvent;
 export interface WebViewMessage {
     type: WebViewMessageType;
     details?: WebViewEvent;

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

@@ -5,4 +5,4 @@ export declare enum PageMessage {
 export interface HeightEvent {
     height: number;
 }
-export declare type PageEvent = HeightEvent;
+export type PageEvent = HeightEvent;

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

@@ -0,0 +1,3 @@
+export declare enum PaymentMessage {
+    PAYMENT_CREATED = "unitPaymentCreated"
+}

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

@@ -5,7 +5,10 @@ export declare enum UnitMessage {
     UNIT_REQUEST_CLOSE_FLOW = "unitRequestCloseFlow",
     UNIT_REQUEST_OPEN_LINK = "unitRequestOpenLink",
     UNIT_ON_LOAD = "unitOnLoad",
-    UNIT_REQUEST_DOWNLOAD = "unitRequestDownload"
+    UNIT_REQUEST_DOWNLOAD = "unitRequestDownload",
+    UNIT_PLAID_TOKEN_CREATED = "unitPlaidLinkTokenCreated",
+    UNIT_REQUEST_EXTERNAL_SDK = "unitRequestExternalSdk",
+    UNIT_PLAID_RESPONSE = "unitPlaidResponse"
 }
 export interface RequestRenderingEvent {
     data: RequestRenderingEventData;
@@ -31,4 +34,19 @@ export interface RequestDownloadEvent {
     responseType: string;
     fileName: string;
 }
-export declare type UnitEvent = RequestRenderingEvent | RequestRefreshEvent | RequestOpenLinkEvent | ResponseUnitOnLoadEvent | RequestDownloadEvent;
+export interface PlaidTokenCreatedEvent {
+    linkToken: PlaidLinkTokenData;
+}
+export interface PlaidLinkTokenData {
+    type: string;
+    attributes: PlaidLinkTokenAttributes;
+}
+interface PlaidLinkTokenAttributes {
+    linkToken: string;
+    expiration: string;
+}
+export interface RequestExternalSdkEvent {
+    type: string;
+}
+export type UnitEvent = RequestRenderingEvent | RequestRefreshEvent | RequestOpenLinkEvent | ResponseUnitOnLoadEvent | RequestDownloadEvent | PlaidTokenCreatedEvent | RequestExternalSdkEvent;
+export {};

package/lib/typescript/nativeComponent/UnitAddToWalletButton.d.ts

@@ -1,4 +1,4 @@
-declare type UnitAddToWalletButtonViewProps = {
+type UnitAddToWalletButtonViewProps = {
     style: object;
     onAddToWalletClicked: () => void;
 };

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

@@ -9,6 +9,9 @@ export declare const LISTENERS: {
     requestOpenLink: string;
     unitRequestDownload: string;
     cardStatusChange: string;
+    unitRequestExternalSdk: string;
+    unitPaymentCreated: string;
 };
 export declare const DISPATCH_RENDERING_EVENT: string;
 export declare const DISPATCH_REQUEST_REFRESH: string;
+export declare const DISPATCH_PLAID_RESPONSE: string;

package/lib/typescript/sharedTypes/achCredit.types.d.ts

@@ -0,0 +1,31 @@
+import type { AchCounterparty, CounterpartyVerificationMethod, PaymentStatus } from './payments.types';
+import type { Tags, Relationship } from './types';
+export type UNACHData = {
+    type: 'achPayment';
+    id: string;
+    attributes: {
+        createdAt: string | Date;
+        status: PaymentStatus;
+        settlementDate?: Date;
+        reason: string;
+        direction: 'Debit' | 'Credit';
+        description: string;
+        transactionSummaryOverride?: string;
+        amount: string;
+        tags: Tags;
+        addenda?: string;
+        counterparty: AchCounterparty;
+        expectedCompletionDate?: Date;
+        counterpartyVerificationMethod?: keyof typeof CounterpartyVerificationMethod;
+        sameDay?: boolean;
+    };
+    relationships: {
+        account: Relationship;
+        customer?: Relationship;
+        customers?: Relationship;
+        counterpartyAccount: Relationship;
+        counterpartyCustomer: Relationship;
+        transaction: Relationship;
+        recurringPayment: Relationship;
+    };
+};

package/lib/typescript/sharedTypes/bookPayment.types.d.ts

@@ -1,11 +1,11 @@
+import type { PaymentStatus } from './payments.types';
 import type { Tags, Relationship } from './types';
-declare type BookPaymentStatus = 'Sent' | 'Rejected';
-export declare type UNBookPaymentData = {
+export type UNBookPaymentData = {
     type: 'bookPayment';
     id: string;
     attributes: {
         createdAt: string | Date;
-        status: BookPaymentStatus;
+        status: PaymentStatus;
         reason: string;
         direction: 'Debit' | 'Credit';
         description: string;
@@ -23,4 +23,3 @@ export declare type UNBookPaymentData = {
         recurringPayment: Relationship;
     };
 };
-export {};

package/lib/typescript/sharedTypes/card.types.d.ts

@@ -1,7 +1,7 @@
 import type { Address, FullName, Limits, Relationship, Tags } from './types';
-export declare type UNCardData = IndividualDebitCard | BusinessDebitCard;
-declare type CardStatus = 'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud';
-export declare type IndividualDebitCard = {
+export type UNCardData = IndividualDebitCard | BusinessDebitCard;
+type CardStatus = 'Active' | 'Inactive' | 'Stolen' | 'Lost' | 'Frozen' | 'ClosedByCustomer' | 'SuspectedFraud';
+export type IndividualDebitCard = {
     id: string;
     type: 'individualDebitCard' | 'individualVirtualDebitCard';
     attributes: {
@@ -23,7 +23,7 @@ export declare type IndividualDebitCard = {
         customer: Relationship;
     };
 };
-export declare type BusinessDebitCard = {
+export type BusinessDebitCard = {
     id: string;
     type: 'businessDebitCard' | 'businessVirtualDebitCard';
     attributes: {

package/lib/typescript/sharedTypes/index.d.ts

@@ -1,3 +1,5 @@
 export * from './bookPayment.types';
 export * from './card.types';
 export * from './onLoadResponse.types';
+export * from './achCredit.types';
+export * from './payments.types';

package/lib/typescript/sharedTypes/onLoadResponse.types.d.ts

@@ -1,10 +1,10 @@
 import type { UNCardData } from '../sharedTypes';
-export declare type SuccessResponseUnitOnLoad = {
+export type SuccessResponseUnitOnLoad = {
     data: UNCardData | Object;
     included: [Object];
     errors: null;
 };
-export declare type ErrorResponseUnitOnLoad = {
+export type ErrorResponseUnitOnLoad = {
     errors: [
         {
             status: string;
@@ -15,4 +15,4 @@ export declare type ErrorResponseUnitOnLoad = {
         }
     ];
 };
-export declare type ResponseUnitOnLoadEvent = SuccessResponseUnitOnLoad | ErrorResponseUnitOnLoad;
+export type ResponseUnitOnLoadEvent = SuccessResponseUnitOnLoad | ErrorResponseUnitOnLoad;

package/lib/typescript/sharedTypes/payments.types.d.ts

@@ -0,0 +1,12 @@
+export type PaymentStatus = 'Sent' | 'Rejected';
+export type AchCounterparty = {
+    name: string;
+    accountNumber: string;
+    routingNumber: string;
+    accountType: AccountType;
+};
+type AccountType = 'Savings' | 'Checking';
+export declare enum CounterpartyVerificationMethod {
+    Plaid = "Plaid"
+}
+export {};

package/lib/typescript/sharedTypes/types.d.ts

@@ -1,4 +1,4 @@
-export declare type Address = {
+export type Address = {
     street: string;
     street2?: string;
     city: string;
@@ -6,22 +6,22 @@ export declare type Address = {
     postalCode: string;
     country: string;
 };
-export declare type Limits = {
+export type Limits = {
     dailyWithdrawal?: string | number;
     dailyPurchase?: string | number;
     monthlyWithdrawal?: string | number;
     monthlyPurchase?: string | number;
 };
-declare type Data = {
+type Data = {
     type: string;
     id: string;
 };
-export declare type Relationship = {
+export type Relationship = {
     data: null | [] | Data | Data[];
 };
-export declare type FullName = {
+export type FullName = {
     first: string;
     last: string;
 };
-export declare type Tags = Record<string, string>;
+export type Tags = Record<string, string>;
 export {};

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

@@ -19,6 +19,8 @@ export declare enum WebComponentType {
     bookPayment = "unit-elements-book-payment",
     activity = "unit-elements-activity",
     slot = "unit-elements-sdk-slot",
-    account = "unit-elements-account"
+    account = "unit-elements-account",
+    achDebitPayment = "unit-elements-ach-debit-payment",
+    achCreditPayment = "unit-elements-ach-credit-payment"
 }
 export declare const WebComponent: React.ForwardRefExoticComponent<WebComponentProps & React.RefAttributes<WebView<{}>>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unit-components",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Unit React Native components",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -74,10 +74,12 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "react-native-webview": "*"
+    "react-native-webview": "*",
+    "react-native-plaid-link-sdk": "*"
   },
   "dependencies": {
     "axios": "^1.3.3",
+    "react-native-plaid-link-sdk": "^9.0.1",
     "react-native-webview": "11.23.1"
   },
   "jest": {

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../../messages/webMessages';
+import type { ResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
+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 { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
+
+export interface UNACHCreditComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+  isAutoFocus?: boolean;
+  fee?: number;
+  onPaymentCreated?: (data: UNACHData) => void;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+}
+
+export const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case PaymentMessage.PAYMENT_CREATED: {
+        const achCreditEvent = message.details as ACHEvent;
+        props.onPaymentCreated && props.onPaymentCreated(achCreditEvent.data as UNACHData);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        break;
+      }
+    }
+  };
+
+  const renderACHCreditWebView = () => {
+    return (
+      <WebComponent
+        type={WebComponentType.achCreditPayment}
+        presentationMode={presentationMode}
+        params={getACHCreditParams(props)}
+        script={getACHCreditScript()}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={false}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderACHCreditWebView();
+  }
+
+  return (
+    <View style={{ height: height }}>
+      {renderACHCreditWebView()}
+    </View>
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { UNACHCreditComponentProps } from './UNACHCreditComponent';
+
+import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+
+export const getACHCreditParams = (props: UNACHCreditComponentProps) => {
+  return `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    ${props.fee ? `fee="${props.fee}"` : ''}
+    style="height: 100%"
+  `;
+};
+
+export const getACHCreditScript = () => {
+  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)
+        })
+    });
+  `;
+};

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { WebComponent, WebComponentType } from '../../webComponent/WebComponent';
+import { PresentationMode } from '../../scripts/html/bodyHtml';
+import type { WebViewMessage } from '../../messages/webMessages';
+import type { ResponseUnitOnLoadEvent, UNACHData } from '../../sharedTypes';
+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 { 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';
+
+export interface UNACHDebitComponentProps {
+  accountId: string;
+  customerToken: string;
+  theme?: string;
+  isAutoFocus?: boolean;
+  fee?: number;
+  onPaymentCreated?: (data: UNACHData) => void;
+  onLoad?: (response: ResponseUnitOnLoadEvent) => void;
+}
+
+export const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
+  const [height, setHeight] = useState<number>(0);
+  const [appPackageName, setAppPackageName] = useState<string>('');
+  const [linkToken, setLinkToken] = useState<string>('');
+  const webRef = useRef<WebView>(null);
+  const [presentationMode, setPresentationMode] = useState<PresentationMode>(PresentationMode.Inherit);
+
+  useEffect(() => {
+    const setPackageNameForAndroid = async () => {
+      if (Platform.OS === 'android') {
+        const packageName = await getAndroidPackageName();
+        setAppPackageName(packageName);
+      }
+    };
+    setPackageNameForAndroid();
+  }, []);
+
+  const dispatchUnitPlaidResponse = (success: LinkSuccess) => {
+    injectUnitPlaidResponse(webRef.current, success);
+  };
+
+  const handleWebViewMessage = (message: WebViewMessage) => {
+    if (!message || !message.details) return;
+
+    switch (message.type) {
+      case PaymentMessage.PAYMENT_CREATED: {
+        const achDebitEvent = message.details as ACHEvent;
+        props.onPaymentCreated && props.onPaymentCreated(achDebitEvent.data as UNACHData);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD:
+        props.onLoad && props.onLoad(message.details as ResponseUnitOnLoadEvent);
+        break;
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        setHeight(currentHeight);
+        if (presentationMode === PresentationMode.Inherit && currentHeight === 0) {
+          setPresentationMode(PresentationMode.Default);
+        }
+        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) => {
+            dispatchUnitPlaidResponse(success);
+          },
+          onExit: exit => { console.log(exit); }
+        }).catch(e => {
+          console.error(e);
+        });
+        break;
+      }
+    }
+  };
+
+  const renderACHDebitWebView = () => {
+    return (
+      <WebComponent
+        ref={webRef}
+        type={WebComponentType.achDebitPayment}
+        presentationMode={presentationMode}
+        params={getACHDebitParams(props)}
+        script={getACHDebitScript(appPackageName)}
+        onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
+        isScrollable={false}
+        theme={props.theme}
+      />
+    );
+  };
+
+  if (presentationMode === PresentationMode.Inherit) {
+    return renderACHDebitWebView();
+  }
+
+  return (
+    <View style={{ height: height }}>
+      {renderACHDebitWebView()}
+    </View>
+
+  );
+};

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

@@ -0,0 +1,48 @@
+import { DISPATCH_PLAID_RESPONSE, LISTENERS } from './../../scripts/html/bodyScript';
+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 `
+    account-id="${props.accountId}"
+    customer-token="${props.customerToken}"
+    is-auto-focus="${props.isAutoFocus ?? false}"
+    ${props.fee ? `fee="${props.fee}"` : ''}
+    style="height: 100%"
+  `;
+};
+
+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)
+        })
+      });
+    ${androidPackageName && `window.UnitMobileSDKConfig.androidPackageName='${androidPackageName}'`}
+    ${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)})`);
+};