React Native WebView Javascript SDK (No longer supported)
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}
/>
Parameter | Type | Required | Description |
---|---|---|---|
loading | boolean | Yes | React native state object which will load the WebView component if loading is false. Otherwise it will display a circular loading indicator. |
token | string | Yes | Request AeroSync Token using GET /aggregatorCredentials endpoint. Reference: https://api-aeropay.readme.io/reference/aggregatorcredentials https://developer.aeropay.com/api/aeropay/doc/ |
environment | string | Yes | Permitted values are [dev, staging, prod] |
deeplink | string | Yes | Aerosync will redirect to this link on mobile app after authentication to resume the workflow. |
consumerId | string | No | Unique ID that represents the client to apply the customization. |
onSuccess | function(response) | No | This event will be triggered when bank is added successfully in the final page of AeroSync-UI. See section 5 for more information. |
onClose | function() | Yes | This event will be triggered if the user closes the AeroSync-UI window. See section 5 for more information. |
onEvent | function(response) | No | AeroSync-UI will trigger event on each page load. See section 5 for more information. |
onError | function(error) | No | The 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