react-native-unit-components 1.13.0 → 1.15.0

package/src/components/UNACHCreditComponent/UNACHCreditComponent.tsx

@@ -3,7 +3,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNACHOnLoadData, UNError, UNOnLoadResponseData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { Platform, View } from 'react-native';
+import { Platform } from 'react-native';
 import { getACHCreditParams, getACHCreditScript, injectUnitPlaidResponse } from './UNACHCreditComponent.utils';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { ACHEvent } from '../../messages/webMessages/achCreditMessage';
@@ -21,6 +21,8 @@ import { PresentationMode, WebComponentType } from '../../types/internal/webComp
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHCreditComponentProps {
   accountId?: string;
@@ -69,10 +71,11 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
       const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
         },
       };
@@ -138,8 +141,10 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
     }
   };
 
-  const renderACHCreditWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achCreditPayment}
@@ -147,21 +152,11 @@ const UNACHCreditComponent = (props: UNACHCreditComponentProps) => {
         params={getACHCreditParams(props)}
         script={getACHCreditScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderACHCreditWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderACHCreditWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNACHDebitComponent/UNACHDebitComponent.tsx

@@ -3,7 +3,7 @@ import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import type { UNOnLoadResponse, UNACHData, UNError, UNOnLoadResponseData, UNACHOnLoadData } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { Platform, View } from 'react-native';
+import { Platform } from 'react-native';
 import {
   PlaidLinkTokenData,
   PlaidTokenCreatedEvent,
@@ -22,6 +22,8 @@ import { PresentationMode, WebComponentType } from '../../types/internal/webComp
 import { withReduxStore } from '../../helpers/store/helpers';
 import { UNPlaidAccountFilter } from '../../types/shared';
 import { PlaidMessage } from '../../messages/webMessages/plaidMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNACHDebitComponentProps {
   accountId?: string;
@@ -69,10 +71,11 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response && RESPONSE_KEYS.counterpartyAccount in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // ACHOnLoadResponse;
       const achOnload: UNOnLoadResponseData<UNACHOnLoadData> = {
         data: {
-          [RESPONSE_KEYS.account]: response[RESPONSE_KEYS.account].data,
+          [RESPONSE_KEYS.account]: ensureArray(account),
           [RESPONSE_KEYS.counterpartyAccount]: response[RESPONSE_KEYS.counterpartyAccount].data,
         },
       };
@@ -138,8 +141,10 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
     }
   };
 
-  const renderACHDebitWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.achDebitPayment}
@@ -147,22 +152,11 @@ const UNACHDebitComponent = (props: UNACHDebitComponentProps) => {
         params={getACHDebitParams(props)}
         script={getACHDebitScript(appPackageName)}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderACHDebitWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderACHDebitWebView()}
-    </View>
-
+    </UNBaseView>
   );
 };
 

package/src/components/UNAccountComponent/UNAccountComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../..//messages/webMessages/pageMessage';
 import {
@@ -34,6 +33,7 @@ import { useDispatch } from 'react-redux';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { UNAccountMenuItem, UNCreditAccount } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNAccountComponentProps {
   // inputs
@@ -165,7 +165,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
   };
 
   return (
-    <View style={{ height, width: '100%' }}>
+    <UNBaseView style={{ height, width: '100%' }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.account}
@@ -177,7 +177,7 @@ const UNAccountComponent = React.forwardRef<UNAccountRef, UNAccountComponentProp
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 });
 

package/src/components/UNActivityComponent/UNActivityComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
-import { Dimensions, View } from 'react-native';
+import { Dimensions } from 'react-native';
 import {
   RequestRefreshEvent,
   RequestRenderingEvent,
@@ -31,6 +31,7 @@ import { setEvent } from '../../slices/SharedEventsSlice';
 import { useDispatch } from 'react-redux';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import type { UNActivityComponentPaginationType } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
 
@@ -140,8 +141,10 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
     }
   };
 
-  const renderActivityWebView = () => {
-    return (
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.activity}
@@ -153,17 +156,7 @@ const UNActivityComponent = React.forwardRef<UNActivityRef, UNActivityComponentP
         language={props.language}
         script={getActivityScript()}
       />
-    );
-  };
-
-  if (!defaultHeight) {
-    return renderActivityWebView();
-  }
-
-  return (
-    <View style={{ height: defaultHeight }}>
-      {renderActivityWebView()}
-    </View>
+    </UNBaseView>
   );
 });
 

package/src/components/UNBookPaymentComponent/UNBookPaymentComponent.tsx

@@ -10,13 +10,14 @@ import type {
   UNOnLoadResponseData,
 } from '../../types/shared';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
-import { View } from 'react-native';
 import { UnitMessage } from '../../messages/webMessages/unitMessages';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import type { BookPaymentEvent } from '../../messages/webMessages/bookPaymentMessage';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { ensureArray } from '../../utils/onLoadMessages.utils';
 
 export interface UNBookPaymentComponentProps {
   //inputs
@@ -35,7 +36,7 @@ export interface UNBookPaymentComponentProps {
 
   // events
   onPaymentCreated?: (data: UNBookPaymentData) => void;
-  onLoad?: (response: UNOnLoadResponse<UNAccountData>) => void;
+  onLoad?: (response: UNOnLoadResponse<[UNAccountData]>) => void;
   onInitialStageBackButtonClicked?: () => void;
   onFinalStageDoneButtonClicked?: () => void;
 }
@@ -55,8 +56,12 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     }
 
     if (RESPONSE_KEYS.account in response) {
+      const account = response[RESPONSE_KEYS.account].data;
       // AccountOnLoadResponse;
-      props.onLoad(response[RESPONSE_KEYS.account] as UNOnLoadResponseData<UNAccountData>);
+      const paymentOnload: UNOnLoadResponseData<[UNAccountData]> = {
+        data: ensureArray(account),
+      };
+      props.onLoad(paymentOnload);
       return;
     }
 
@@ -93,29 +98,21 @@ const UNBookPaymentComponent = (props: UNBookPaymentComponentProps) => {
     }
   };
 
-  const renderBookPaymentWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.bookPayment}
         presentationMode={presentationMode}
         params={getBookPaymentParams(props)}
         script={getBookPaymentScript()}
         onMessage={(message: WebViewMessage) => handleWebViewMessage(message)}
-        isScrollable={false}
+        isScrollable={true}
         theme={props.theme}
         language={props.language}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderBookPaymentWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderBookPaymentWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNBottomSheetComponent/UNBottomSheetComponent.tsx

@@ -39,7 +39,6 @@ import { WebComponentType } from '../../types/internal/webComponent.types';
 import { getNativeComponentDataFromEvent } from './UNBottomSheetComponent.utils';
 
 const UNBottomSheetComponent = () => {
-
   const dispatch = useDispatch();
 
   const isBottomSheetActive = useSelector((state: RootState) => state.bottomSheet.isBottomSheetActive);

package/src/components/UNCardActionComponent/UNCardActionComponent.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import { UNCardMenuAction, UNError, UNOnLoadResponse } from '../../types/shared';
+import { withReduxStore } from '../../helpers/store/helpers';
+import type { WebViewMessage } from '../../messages/webMessages';
+import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
+import { UnitMessage } from '../../messages/webMessages/unitMessages';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
+import { WebComponent } from '../../webComponent/WebComponent';
+import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
+import { getCardActionParams, getCardActionScript } from './UNCardActionComponent.utils';
+import { Dimensions } from 'react-native';
+
+export interface UNCardActionComponentProps {
+  // inputs
+  cardId: string;
+  customerToken: string;
+  action: UNCardMenuAction;
+
+  // ui
+  theme?: string;
+  language?: string;
+
+  // callbacks
+  onLoad?: (response: UNOnLoadResponse<undefined>) => void
+  onCloseFlow?: () => void
+}
+
+const DEFAULT_HEIGHT = Dimensions.get('window').height * 0.5;
+const UNCardActionComponent = (props: UNCardActionComponentProps) => {
+  const [defaultHeight, setDefaultHeight] = useState<number>();
+
+  const handleUnitOnLoad = (response: UnitOnLoadResponseEvent) => {
+    if (!props.onLoad) {
+      return;
+    }
+
+    if (RESPONSE_KEYS.errors in response) {
+      props.onLoad(response as UNError);
+      return;
+    }
+
+    props.onLoad({ data: undefined });
+  };
+
+  const handleMessage = (message: WebViewMessage) => {
+    if (!message) return;
+
+    switch (message.type) {
+      case PageMessage.PAGE_HEIGHT: {
+        const currentHeight = (message.details as HeightEvent).height;
+        currentHeight === 0 && setDefaultHeight(DEFAULT_HEIGHT);
+        break;
+      }
+      case UnitMessage.UNIT_ON_LOAD:
+        handleUnitOnLoad(message.details as UnitOnLoadResponseEvent);
+        break;
+      case UnitMessage.UNIT_REQUEST_CLOSE_FLOW:
+        props.onCloseFlow && props.onCloseFlow();
+        break;
+    }
+  };
+
+  const style = defaultHeight ? { height: defaultHeight } : { flex: 1 };
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
+      <WebComponent
+        type={WebComponentType.cardAction}
+        presentationMode={PresentationMode.Inherit}
+        params={getCardActionParams(props)}
+        theme={props.theme}
+        language={props.language}
+        script={getCardActionScript()}
+        onMessage={message => handleMessage(message)}
+        isScrollable={true}
+      />
+    </UNBaseView>
+  );
+};
+
+export default withReduxStore<UNCardActionComponentProps>(UNCardActionComponent);

package/src/components/UNCardActionComponent/UNCardActionComponent.utils.ts

@@ -0,0 +1,16 @@
+import { LISTENERS } from '../../scripts/html/bodyScript';
+import { UNCardActionComponentProps } from './UNCardActionComponent';
+
+export const getCardActionParams = (props: UNCardActionComponentProps) => {
+  return `
+    card-id="${props.cardId}"
+    customer-token="${props.customerToken}"
+    action="${props.action}"
+  `;
+};
+
+export const getCardActionScript = () => {
+  return `
+    ${LISTENERS.requestRefresh}
+  `;
+};

package/src/components/UNCardActionComponent/index.ts

@@ -0,0 +1 @@
+export { default as UNCardActionComponent, UNCardActionComponentProps } from './UNCardActionComponent';

package/src/components/UNCardComponent/UNCardComponent.tsx

@@ -1,5 +1,4 @@
 import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
-import { View } from 'react-native';
 import type WebView from 'react-native-webview';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
 import { RequestRefreshEvent, RequestRenderingEvent, UnitMessage } from '../../messages/webMessages/unitMessages';
@@ -13,7 +12,7 @@ import {
   injectRequestCardActionScript,
   injectRequestShowSensitiveDataScript, injectRequestHideSensitiveDataScript,
 } from './UNCardComponent.utils';
-import type { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
+import { UNOnLoadResponse, UNCardData, UNError, UNCardMenuAction } from '../../types/shared';
 import { CardMessage } from '../../messages/webMessages/cardMessage';
 import { NativeModules } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
@@ -32,6 +31,7 @@ import { withReduxStoreAndRefForwarding } from '../../helpers/store/helpers';
 import { useListenerToEvent } from '../../hooks/useListenerToEvent';
 import { setEvent } from '../../slices/SharedEventsSlice';
 import { UNCardMenuItem } from '../../types/shared';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 export interface UNCardComponentProps {
   // inputs
@@ -51,6 +51,8 @@ export interface UNCardComponentProps {
   onLoad?: (response: UNOnLoadResponse<UNCardData>) => void;
   onStatusChanged?: (card: UNCardData) => void;
   onCardActivated?: (card: UNCardData) => void;
+  onAction?: (action: UNCardMenuAction) => void;
+  onActionsMenuClicked?: () => void;
   pushProvisioningModule?: typeof NativeModules;
 }
 
@@ -142,6 +144,8 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         } as SlotRendering;
 
         dispatch(setEvent({ key: BottomSheetNativeMessage.REQUEST_RENDERING, data }));
+
+        sendActionCallbackIfNeeded(slotData.requestRenderingEvent);
         break;
       }
       case PageMessage.PAGE_HEIGHT:
@@ -153,6 +157,26 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
     }
   };
 
+  const sendActionCallbackIfNeeded = (requestRenderingEvent: RequestRenderingEvent) => {
+    switch (requestRenderingEvent.data.nativeComponentName) {
+      case WebComponentType.cardMenu:
+        props.onActionsMenuClicked && props.onActionsMenuClicked();
+        break;
+      case WebComponentType.cardAction: {
+        // Find the relevant action from the native component
+        const actionMatch = requestRenderingEvent.data.nativeComponent.match(/action=([^\s]+)/);
+        if (actionMatch && props.onAction) {
+          const actionString = actionMatch[1] as string;
+
+          // Check if the actionString matches any value in the UNCardMenuAction enum
+          if (Object.values(UNCardMenuAction).includes(actionString as UNCardMenuAction)) {
+            props.onAction(actionString as UNCardMenuAction);
+          }
+        }
+      }
+    }
+  };
+
   useEffect(() => {
     UnitSDK.setCustomerToken(props.customerToken);
   }, [props.customerToken]);
@@ -169,7 +193,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
   }, []);
 
   return (
-    <View style={{ height, width: '100%', minWidth: 235 }}>
+    <UNBaseView style={{ height, width: '100%', minWidth: 235 }} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         ref={webRef}
         type={WebComponentType.card}
@@ -181,7 +205,7 @@ const UNCardComponent = React.forwardRef<CardRef, UNCardComponentProps>(function
         onMessage={message => handleMessage(message)}
         isScrollable={false}
       />
-    </View>
+    </UNBaseView>
   );
 
 });

package/src/components/UNCardComponent/UNCardComponent.utils.ts

@@ -4,13 +4,14 @@ import type { UNCardComponentProps } from './UNCardComponent';
 import type { RequestRefreshEvent } from '../../messages/webMessages/unitMessages';
 import type { UNCardMenuAction } from '../../types/shared';
 import { WebComponentType } from '../../types/internal/webComponent.types';
+import { UnitSDK } from '../../unitSdkManager/UnitSdkManager';
 
 export const getCardParams = (props: UNCardComponentProps) => {
   const menuItemsParam = props.menuItems ? `menu-items="${props.menuItems.join()}"` : '';
   return `
     card-id="${props.cardId}"
     customer-token="${props.customerToken}"
-    enable-mobile-wallet="${!!props.pushProvisioningModule}"
+    enable-mobile-wallet="${!!(props.pushProvisioningModule || UnitSDK.getPushProvisionModule())}"
     hide-actions-menu-button="${props.hideActionsMenuButton || false}"
     hide-card-title="${props.hideCardTitle || false}"
     hide-sensitive-data-button="${props.hideSensitiveDataButton || false}"

package/src/components/UNCheckDepositComponent/UNCheckDepositComponent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { View, NativeModules, Platform } from 'react-native';
+import { NativeModules, Platform } from 'react-native';
 import { WebComponent } from '../../webComponent/WebComponent';
 import type { WebViewMessage } from '../../messages/webMessages';
 import { HeightEvent, PageMessage } from '../../messages/webMessages/pageMessage';
@@ -12,6 +12,7 @@ import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessag
 import { PresentationMode, WebComponentType } from '../../types/internal/webComponent.types';
 import { withReduxStore } from '../../helpers/store/helpers';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
 
 const { Camera } = NativeModules;
 
@@ -101,8 +102,10 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
     }
   };
 
-  const renderBookPaymentWebView = () => {
-    return (
+  const style = presentationMode === PresentationMode.Inherit ? { flex: 1 } : { height: height };
+
+  return (
+    <UNBaseView style={style} onLoadError={ handleUnitOnLoad }>
       <WebComponent
         type={WebComponentType.checkDeposit}
         presentationMode={presentationMode}
@@ -113,17 +116,7 @@ const UNCheckDepositComponent = (props: UNCheckDepositComponentProps) => {
         language={props.language}
         isScrollable={true}
       />
-    );
-  };
-
-  if (presentationMode === PresentationMode.Inherit) {
-    return renderBookPaymentWebView();
-  }
-
-  return (
-    <View style={{ height: height }}>
-      {renderBookPaymentWebView()}
-    </View>
+    </UNBaseView>
   );
 };
 

package/src/components/UNFundAccountPaymentComponent/UNFundAccountPaymentComponent.tsx

@@ -17,6 +17,8 @@ import { SafeAreaView } from 'react-native';
 import { RESPONSE_KEYS, UnitOnLoadResponseEvent } from '../../messages/webMessages/onLoadMessage';
 import { PaymentMessage } from '../../messages/webMessages/paymentsMessage';
 import { FundAccountPaymentEvent } from '../../messages/webMessages/fundAccountPaymentMessage';
+import { UNBaseView } from '../../nativeComponents/UNBaseView';
+
 export interface UNFundAccountPaymentComponentProps {
   // inputs
   accountId?: string;
@@ -88,18 +90,20 @@ const UNFundAccountPaymentComponent = (props: UNFundAccountPaymentComponentProps
 
   return (
     <SafeAreaView style={{flex: 1, minHeight: 400}}>
-      <WebComponent
-        ref={webRef}
-        type={WebComponentType.fundAccountPayment}
-        presentationMode={PresentationMode.Inherit}
-        params={getFundAccountPaymentParams(props)}
-        script={getFundAccountPaymentScript()}
-        theme={props.theme}
-        language={props.language}
-        onMessage={message => handleMessage(message)}
-        isScrollable={true}
-        nestedScrollEnabled={true}
-      />
+      <UNBaseView style={{flex: 1}} onLoadError={ handleUnitOnLoad }>
+        <WebComponent
+          ref={webRef}
+          type={WebComponentType.fundAccountPayment}
+          presentationMode={PresentationMode.Inherit}
+          params={getFundAccountPaymentParams(props)}
+          script={getFundAccountPaymentScript()}
+          theme={props.theme}
+          language={props.language}
+          onMessage={message => handleMessage(message)}
+          isScrollable={true}
+          nestedScrollEnabled={true}
+        />
+      </UNBaseView>
     </SafeAreaView>
   );
 };