React Native SDK
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
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
App.tsx
/**
* Sample demo app to launch Aerosync widget
*/
import React, {useState} from 'react';
import BankLink, {
SuccessEventType,
WidgetEventType,
} from 'aerosync-react-native-sdk';
import DropDownPicker from 'react-native-dropdown-picker';
import {
StyleSheet,
SafeAreaView,
Text,
View,
TextInput,
TouchableOpacity,
} from 'react-native';
function App(): React.JSX.Element {
const [token, settoken] = useState('');
const [isSubmitted, setIsSubmitted] = useState(false);
const [consumerId, setconsumerId] = useState('');
const [open, setOpen] = useState(false);
const [value, setValue] = useState('staging');
const [items, setItems] = useState([
{label: 'STAGING', value: 'staging'},
{label: 'PRODUCTION', value: 'production'},
]);
const onLoad = () => {
console.log('onLoad');
};
const onClose = () => {
console.log('onClose');
setIsSubmitted(false);
// navigate to the desired screen when user closes the widget
// navigation.replace('HomePage');
};
const onSuccess = (event: SuccessEventType) => {
console.log('onSuccess', event);
setIsSubmitted(false);
// navigate to the desired screen when the bank
// is linked successfully
// navigation.replace('NextPage');
};
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://"
consumerId={consumerId}
style={{
width: '100%',
height: '100%',
opacity: 1,
bgColor: '#FFFFFF',
}}></BankLink>
</SafeAreaView>
);
} else {
return (
<SafeAreaView>
<View style={styles.container}>
<TouchableOpacity>
<Text style={styles.HomeTitle}>AeroSync UI Mock App</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 consumerId (optional)"
onChangeText={consumerId => setconsumerId(consumerId)}
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%',
},
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,
},
HomeTitle: {
height: 30,
marginTop: 60,
fontSize: 20,
fontWeight: 'bold',
},
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;
Note: The onClose and onSuccess event in the example above should be updated with respect to the navigation. For onClose event, navigate back to the same screen where the AeroSync widget can be launched again. Since the user closed the widget manually they can retry if needed. For onSuccess event, navigate to the next screen where the user will continue after the bank is linked successfully.
3. Aerosync Sdk configuration
Parameter | Type | Required | Description |
---|---|---|---|
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 [staging, prod] |
deeplink | string | Yes | Aerosync will redirect to this link on mobile app after authentication to resume the workflow. For more guidance refer to our article here |
consumerId | string | No | Unique ID that represents the client to apply the customization. |
style | JSON | No | Customize the properties of widget by providing values { width: pixel, [default: '100%'] height: pixel, [default: '100%']] bgColor: hex code, [default: '#FFFFFF'] opacity: 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:
{
"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"
}
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
Updated 25 days ago