Introduction
This Flutter SDK provides an interface to load Aerosync-UI in Flutter apps through flutter_inappwebview. 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. Installation
- First add
aerosync_flutter_sdk
as a dependency to thepubspec.yaml
file. We are currently on constant development for fine-tuning and improvement currently using the^1.1.0
as our release with the most up to date features and fixes.
dependencies:
aerosync_flutter_sdk: ^1.1.0
- Import the library
import 'package:aerosync_flutter_sdk/aerosync_flutter_sdk.dart';
2. Usage/Examples
The Aerosync plugin is brought in as a separate window that launches the Flutter InAppWebView Plugin with the Aerosync starting url.
In this example the widget is navigated to when ElevatedButton
is pressed.
...
import 'package:flutter/material.dart';
import 'package:aerosync_flutter_sdk/aerosync_flutter_sdk.dart';
void main() => runApp(UrlLauncherPage());
class UrlLauncherPage extends StatefulWidget {
UrlLauncherPage({Key? key}) : super(key: key);
@override
UrlLauncherExample createState() => UrlLauncherExample();
}
class UrlLauncherExample extends State<UrlLauncherPage> {
static const String _title = 'URL Launcher Example';
late String _token = "";
late String _env = "sandbox";
late String _deeplink = "";
late String _consumerId = "";
late bool _handleMFA = false;
late String _jobId = "";
late String _userId = "";
Map _style = {};
late bool isLoading;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: isLoading
? LaunchButton(
env: _env,
token: _token,
style: _style,
deeplink: _deeplink,
consumeerId: _consumerId,
handleMFA: _handleMFA,
jobId: _jobId,
userId: _userId,
)
: SizedBox(), // this includes all the button and functionality
),
);
}
@override
void initState() {
super.initState();
isLoading = false;
}
}
class LaunchButton extends StatelessWidget {
var env;
var token;
var style;
var deeplink;
var consumerId;
var handleMFA;
var jobId;
var userId;
LaunchButton(
{Key? key,
required this.env,
required this.token,
required this.style,
required this.deeplink,
this.consumerId,
this.handleMFA,
this.jobId,
this.userId})
: super(key: key);
// handle the OnEvent callback from aerosync
handleOnEventAerosync(eventType, data) {
}
// handle the OnSuccess callback from aerosync
handleOnSuccessAerosync(eventType, data) {
Map<String, dynamic> successData = jsonDecode(data);
}
// handle the OnClose callback from aerosync
handleOnCloseAerosync(eventType, data) {
}
// handle the OnLoad callback from aerosync
handleOnLoadAerosync(eventType, data) {
}
// handle the OnError callback from aerosync
handleOnErrorAerosync(eventType, data) {
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () => {
Navigator.of(context).push(MaterialPageRoute(
builder: (context) => AerosyncSDKPage(
env: env,
token: token,
style: style,
onEvent: handleOnEventAerosync,
onSuccess: handleOnSuccessAerosync,
onClose: handleOnCloseAerosync,
onLoad: handleOnLoadAerosync,
onError: handleOnErrorAerosync,
deeplink: deeplink,
consumerId: consumerId,
handleMFA: handleMFA,
jobId: jobId,
userId: userId,
)))
},
child: Text(
'Connect',
style: TextStyle(fontSize: 20),
),
),
],
));
}
}
The AerosyncSDKPage
widget takes in a env
parameter, a token
parameter a style
parameter deeplink
, and callback event notifications needed for your implementation. To generate a token, check out our integration guide here.
Each callback returns an eventType
value and data that is returned from aerosync-ui.
Parameter | Type | Description |
---|---|---|
env |
string |
Required. Available values: staging, production. |
token |
string |
Required. The token generated from the integration guide. |
style * |
Map |
Required. {"width": "<double>", "height": "<double>", "bgColor": "<Hex color value in format "ARGB">" } |
onEvent |
function(response) |
Required. This method will be triggered as the user completes the bank link workflow. |
onLoad |
function(response) |
Required. Call function after the contents of webpage have been loaded as the user completes the bank link workflow. |
onSuccess |
function(response) |
Required. This method will be triggered when a bank is added successfully and the user clicks on "continue" button in the final AeroSync-UI page. |
onClose |
function(response) |
Required. This method will be triggered when the Aerosync widget is closed. |
onError |
function(response) |
Required. The method is called if AeroSync-UI dispatches any error events. |
deeplink |
string |
Required Deeplink from your app. |
consumerId |
string |
Unique ID that represents the client to apply the customization. Contact the team for more information." |
handleMFA |
bool |
Boolean value that determines MFA widget invocation. Contact the team for more information." |
jobId |
string |
Unique ID that represents the current MFA jobId. Contact the team for more information." |
userId |
string |
Unique ID that represents the current MFA userId. Contact the team for more information." |
- The Style parameter takes in a Map<String, String> object with
width
,height
, andbgColor
parameters that will customize the Aerosync widget to your liking. the Map is Required to be sent even if you dont want to change one of the values leave thekey
out of the map or just all together send an empty map.
📘 The deeplink parameter is a required field that links back to your Flutter application for the best oAuth authentication experience.
The largest FIs in the US use oAuth experiences to authenticate their end user's banks for the optimal user experience in a secure manner.
To implement deeplinking using Flutter please refer to the official Flutter Deeplink guide here.
Store connected account
Store onSuccess()
data attributes to authenticate with the Aerosync API to retrieve account information. The data value returned on the success call is a JSON encoded value so you can decode it as jsonDecode(data)
to use it as a Map. Check the given example.
{
"payload": {
"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"},
"type": "pageSuccess"
}