Introduction

This React Native SDK provides an interface to load Aerosync-UI in React Native application. 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 Aerosync React Native SDK (v3.0+)

Add latest verion of aerosync-react-native-sdk library to your project dependencies.

npm install aerosync-react-native-sdk

2. Minimal example to implement Aerosync React Native Sdk

AddBank.js

/**
 * Integrate AeroSync UI AddBank
 */
/**
 * Sample App
 * https://github.com/Aeropay-inc/aerosync-react-native-sdk/blob/main/sample/App.tsx
 *
 * @format
 */

import React, {useState} from 'react';
import BankLink, {
  SuccessEventType,
  WidgetEventType,
  Environment,
} from 'aerosync-react-native-sdk';
import DropDownPicker from 'react-native-dropdown-picker';
import {
  StyleSheet,
  SafeAreaView,
  Text,
  View,
  Alert,
  TextInput,
  TouchableOpacity,
} from 'react-native';

function App(): React.JSX.Element {
  const [token, settoken] = useState('');
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [configurationId, setConfigurationId] = useState('');
  const [aeroPassUserUuid, setAeroPassUserUuid] = useState('');
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState('staging' as Environment);
  const [output, setoutput] = useState('');
  const [items, setItems] = useState([
    {label: 'DEV', value: 'dev'},
    {label: 'STAGING', value: 'staging'},
    {label: 'SANDBOX', value: 'sandbox'},
    {label: 'PRODUCTION', value: 'production'},
  ]);

  const onLoad = () => {
    console.log('onLoad');
  };

  const onClose = () => {
    console.log('onClose');
    setIsSubmitted(false);
  };

  const onSuccess = (event: SuccessEventType) => {
    setoutput(JSON.stringify(event));
    console.log('onSuccess', event);
    setIsSubmitted(false);
  };

  const onEvent = (event: WidgetEventType) => {
    console.log('onEvent', event);
  };

  const onError = (event: string) => {
    console.log('onError', event);
  };

  if (isSubmitted) {
    return (
      <SafeAreaView>
        <BankLink
          token={token}
          environment={value}
          onError={onError}
          onClose={onClose}
          onEvent={onEvent}
          onSuccess={onSuccess}
          onLoad={onLoad}
          deeplink="testaerosyncsample://"
          configurationId={configurationId}
          aeroPassUserUuid={aeroPassUserUuid}
          style={{
            width: '100%',
            height: '100%',
            opacity: 1,
            bgColor: '#FFFFFF',
          }}></BankLink>
      </SafeAreaView>
    );
  } else {
    return (
      <SafeAreaView>
        <View style={styles.container}>
          <TouchableOpacity>
            <Text style={styles.OutputTitle}>{output}</Text>
          </TouchableOpacity>
          <View style={styles.dropdownView}>
            <DropDownPicker
              open={open}
              value={value}
              items={items}
              setOpen={setOpen}
              setValue={setValue}
              setItems={setItems}
              placeholder="select environment*"
            />
          </View>
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Enter Aerosync token*"
              onChangeText={token => settoken(token)}
              placeholderTextColor="#003f5c"
            />
          </View>
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Enter  configurationId (optional)"
              onChangeText={configurationId =>
                setConfigurationId(configurationId)
              }
              placeholderTextColor="#003f5c"
            />
          </View>
          <View style={styles.inputView}>
            <TextInput
              style={styles.TextInput}
              placeholder="Enter aeroPassUserUuid (optional)"
              onChangeText={aeroPassUserUuid =>
                setAeroPassUserUuid(aeroPassUserUuid)
              }
              placeholderTextColor="#003f5c"
            />
          </View>
          <TouchableOpacity
            style={styles.loginBtn}
            onPress={() => setIsSubmitted(true)}>
            <Text style={styles.loginText}>Launch Aerosync widget</Text>
          </TouchableOpacity>
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'white',
    height: '100%',
  },
  image: {
    marginBottom: 40,
    width: '25%',
    height: '15%',
  },
  inputView: {
    borderWidth: 1,
    borderRadius: 5,
    width: '70%',
    height: 45,
    marginBottom: 20,
  },
  dropdownView: {
    width: '70%',
    height: 45,
    marginBottom: 20,
    zIndex: 100,
  },
  TextInput: {
    color: 'black',
    height: 50,
    flex: 1,
    marginLeft: 20,
  },
  forgot_button: {
    height: 30,
    marginBottom: 30,
  },
  OutputTitle: {
    color: 'black',
    height: 100,
  },
  loginBtn: {
    width: '80%',
    borderRadius: 25,
    height: 50,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 40,
    backgroundColor: '#24c3d2',
  },
  loginText: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 20,
  },
});
export default App;

3. Aerosync Sdk configuration

Parameter	Type	Required	Description
token	string	Yes	Request AeroSync Token using POST /token_widget endpoint. Reference: https://api-aerosync.readme.io/reference/post_token-widget
environment	string	Yes	Permitted values are [staging, prod]
deeplink	string	Yes	Aerosync will redirect to this link on mobile app after authentication to resume the workflow.
configurationId	string	No	Unique ID that represents the client to apply the customization.
aeropassUserUuid	string	Yes	Aeronetwork user id
handleMFA	boolean	No	handle the additional MFA for balance refresh workflow
jobId	string	No	unique identifier for current job
userId	string	No	unique identifier for current user
manualLinkOnly	boolean	No	User will only be able to link their bank manually.
style	JSON	No	Customize the properties of widget by providing values { width: `<string>`pixel, [default: '100%'] height: `<string>`pixel, [default: '100%']] bgColor: `<string>`hex code, [default: '#FFFFFF'] opacity: `<number>` strictly between 0 and 1 [default: 1] }
onSuccess	function(response)	Yes	This event will be triggered when bank is added successfully in the final page of AeroSync-UI. See section 5 for more information.
onClose	onLoad	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.
onLoad	function(response)	No	AeroSync-UI will trigger this event when the widget is loaded.

4. Aerosync-UI Response:

aerosync-react-native-sdk will send response for below events:

4.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:

{
  "aeropassUserUuid": "xxx"
  "clientName": "xxx"
  "connectionId": "xxx"
  "userId": "xxx"
}

4.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.

4.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",
 }

4.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.

4.5 onLoad event

This event will be triggered when the Aerosync widget is loaded for the first time.

5. Common Issues:

5.1 If you're getting Invariant Violation: Native component for "RNCWebView does not exist", it means react native autolinking did not work. Try linking it manually using below resources:

Android (link edits 3 files):
Resource: https://engineering.brigad.co/demystifying-react-native-modules-linking-964399ec731b

IOS (link manually)
Explicitly install in the Root project: npm i react-native-webview cd ios; pod install