Guides

React Native WebView Javascript SDK (No longer supported)

Suggest Edits

🚧

This SDK is no longer supported

Please note, this SDK is no longer supported. Instead, please use the Aerosync React Native SDK

Introduction

This JavaScript SDK provides an interface to load Aerosync-UI in Android/iOS apps using React-Native. Securely link your bank account through your bank’s website. Log in with a fast, secure, and tokenized connection. Your information is never shared or sold.

1. Install React Native WebView

Add react-native-webview to your dependencies

$ yarn add react-native-webview

(or)
For npm use 

$ npm install --save react-native-webview

For more information: https://github.com/react-native-webview/react-native-webview

2. Import the WebView into your component

import { WebView } from 'react-native-webview';

3. Minimal example to use AeroSync-UI WebView:

Save below block as AerosyncWebView.js in your React Native project. You can replace the loading activity with another custom component if required. This file contains the functionality to launch the in-app WebView for Aerosync-UI portal.

import { ActivityIndicator, StyleSheet, View, Linking } from 'react-native';
import { WebView } from 'react-native-webview';
import { useState } from 'react';

/**
 * AeroSync UI loading component
 * Function LoadingActivity: display standard loading bar on center of the screen
 * @returns <view> - ActivityIndicator 
 */
function LoadingActivity() {
    return <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator size="large" color="#24c3d2" />
    </View>;
}

/**
 * AeroSync UI Web View
 * Function AerosyncWebView: Display AeroSync portal via React Webview component
 * @params {boolean} - loading: screen loading
 * @params {string} - token: AeroSync token
 * @params {string} - environment: env name
 * @params {string} - consumerId: unique client ID
 * @params {function} - onSuccess: callback function
 * @params {function} - onClose: callback function
 * @params {function} - onEvent: callback function
 * @params {function} - onError: callback function
 * @params {string} - deeplink: React Native deeplink
 * @params {json} - style: Webview css properties
 * @returns <view> - webview
 */
export default function AerosyncWebView({
    loading,
    token,
    environment,
    deeplink,
    consumerId,
    onSuccess,
    onClose,
    onEvent,
    onLoad,
    onError,
    style }) {

    const linkingEvent = Linking.addEventListener('url',  (event) => {
       if (event !== null) {
         const status = getSearchParamFromURL(event.url, 'status');
         this.webView.injectJavaScript(
            `window.postMessage("${status}")`
         );
       }
    });
 
    const [source, setSource] = useState(
        (deeplink && consumerId) ? `${env[environment]}/?token=${token}&deeplink=${deeplink}&consumerId=${consumerId}`:
        deeplink? `${env[environment]}/?token=${token}&deeplink=${deeplink}`:
        consumerId? `${env[environment]}/?token=${token}&consumerId=${consumerId}`:
        `${env[environment]}/?token=${token}`);
    
    handleNavigationStateChange = (NavState) => {
        const { url } = NavState;
        if (url.includes('aerosync.com/redirect') 
            && !url.includes('&token=')
            && !deeplink) {
            setSource(`${url}&token=${token}`);
        }
    };

    const getSearchParamFromURL = (url, param) => {
       const include = url.includes(param)
       if (!include) return null
       const params = url.split(/([&,?,=])/)
       const index = params.indexOf(param)
       const value = params[index + 2]
       return value
    }

    if (!loading && token && environment && onClose) {
      return (
       <View style={{
           height: style.height?style.height: "100%" , 
           width: style.width?style.width: "100%", 
           backgroundColor: style.bgColor?style.bgColor: "#FFFFFF", 
           opacity: style.opacity?style.opacity: 1
       }}>
         <WebView
            source={{
                uri: source
            }}
            onMessage={event => {
                const r = JSON.parse(event.nativeEvent.data)
                switch (r.type) {
                    case 'pageSuccess':
                        onSuccess ? onSuccess(r.payload) : false
                        break;
                    case 'widgetClose':
                        onClose()
                        break;
                    case 'widgetPageLoaded':
                        onEvent ? onEvent(r.payload) : false
                        break;
                    case 'widgetError':
                        onError ? onError(r.payload) : false
                        break;
                    default:
                        onEvent ? onEvent(r.payload) : false
                }
            }}
            ref={(webView) => this.webView = webView}
            onLoad={() => onLoad() }
            onError={(event) => { onError(event) }}
            onNavigationStateChange={this.handleNavigationStateChange}
            onOpenWindow={(syntheticEvent) => {
              const { nativeEvent } = syntheticEvent;
              const { targetUrl } = nativeEvent
              if(deeplink) {
                  Linking.openURL(targetUrl);
              } else {
                  setSource(targetUrl)
              }
            }}
        />
       </View>
       );
    }

    // react native activity loader
    return <LoadingActivity />;

}

// environment constants
const env = {
    "dev": "https://dev.aerosync.com",
    "staging": "https://staging.aerosync.com",
    "production": "https://www.aerosync.com"
}

// stylesheet
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    horizontal: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        padding: 10,
    },
});

4. Embed AerosyncWebView.js:

<AerosyncWebView
            loading={loading}
            token={token}
            environment="prod"
						consumerId= {consumerId}
						deeplink="deeplink://"
            onSuccess={onSuccess}
            onClose={onClose}
            onEvent={onEvent}
            onError={onError}
        />
ParameterTypeRequiredDescription
loadingbooleanYesReact native state object which will load the WebView component if loading is false. Otherwise it will display a circular loading indicator.
tokenstringYesRequest AeroSync Token using GET /aggregatorCredentials endpoint.
Reference:
https://api-aeropay.readme.io/reference/aggregatorcredentials
https://developer.aeropay.com/api/aeropay/doc/
environmentstringYesPermitted values are [dev, staging, prod]
deeplinkstringYesAerosync will redirect to this link on mobile app after authentication to resume the workflow.
consumerIdstringNoUnique ID that represents the client to apply the customization.
onSuccessfunction(response)NoThis event will be triggered when bank is added successfully in the final page of AeroSync-UI. See section 5 for more information.
onClosefunction()YesThis event will be triggered if the user closes the AeroSync-UI window. See section 5 for more information.
onEventfunction(response)NoAeroSync-UI will trigger event on each page load. See section 5 for more information.
onErrorfunction(error)NoThe method is called if AeroSync-UI dispatches any error events. See section 5 for more information.

5. Aerosync-UI Response:

AeroSync-UI will send response back to the parent component for below scenarios:

5.1 onSuccess event

This event will be triggered when a bank is added successfully and the user clicks on "continue" button in the final AeroSync-UI page. Example of response is shown below:

 {  
    "ClientName": "client3",  
    "FILoginAcctId": "{\"u_guid\":\"USR-701a457e-5b93-4598-b7a1-b968c495ee3f\", \"m_guid\": \"MBR-d699c457-90f7-4b96-96c1-c50a445eabec\", \"a_guid\": \"ACT-9f5549d6-e402-43f4-8351-cd4018de7a80\"}",  
    "user_id": "a2c7f64f-3df9-4090-b3bd-ad6fc3003c90",  
    "user_password": "735e33b9-78ec-4887-99d7-a3056997ceb9"  
  }

5.2 onClose event

This event will be triggered when the user closes the AeroSync-UI window. If the user closes the AeroSync-UI window by tapping the 'X' button on any page, the callback function will be called which can be used to navigate the user to the previous page on parent component.

5.3 onEvent event

AeroSync-UI will trigger event on each page load. The response will contain the follow attributes:

{
  "pageTitle": "Verify Your Identity",
  "onLoadApi": "/token",
 }

5.4 onError event

This event will be triggered if the WebView or AeroSync-UI fails to load. The response will be string describing the error.

{
  "code": "AC-200",
  "message": "We had issues connecting to this banking institution.Please select a different bank or try again later."
}

Updated about 1 month ago