Web Javascript SDK (No longer supported)
This SDK is longer supported as of June 31, 2024
Please note, this SDK is no longer supported. Instead, please use the Aerosync Web NPM SDK
Introduction
This JavaScript SDK provides an interface to load Aerosync-UI in Web apps. 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. Import Aerosync Web SDK
To use the SDK in the browser, simply add the following script tag to your HTML page:
<script src="aerosync.js"></script>
Save below block in a JavaScript file and rename it to "aerosync.js".
(function () {
var t = function (t) {
(this.options = t || {}),
this.options.onLoad || (this.options.onLoad = function () {}),
this.options.onClose || (this.options.onClose = function () {}),
this.options.onSuccess || (this.options.onSuccess = function () {}),
this.options.onEvent || (this.options.onEvent = function () {}),
this.options.onError || (this.options.onError = function () { }),
(this.options.config = t.config || null),
(this.configInitialized = !1),
this.options.config
? window.addEventListener("message", this._handlePostMessage.bind(this))
: window.addEventListener("message", this._onPostMessage.bind(this));
};
(t.prototype.launch = function () {
var t;
var path = ("?token=" + this.options.token) +
(this.options.consumerId? "&consumerId=" + this.options.consumerId: "") +
(this.options.deeplink? "&deeplink="+this.options.deeplink: "");
var bg = (this.options.style && this.options.style.bgColor && this.options.style.opacity)?
(this.options.style.bgColor + ( Math.floor(this.options.style.opacity * 255).toString(16))) : "#000000b2";
(t = "local" == this.options.environment ? "http://localhost:8080/"+path
: "staging" === this.options.environment
? "https://staging.aerosync.com/"+path
: "production" === this.options.environment
? "https://www.aerosync.com/"+path
: ""),
(e = (this.options.style && this.options.style.width)?this.options.style.width: "375px"),
(n = (this.options.style && this.options.style.height)?this.options.style.height: "688px"),
(o = document.createElement("iframe")),
(d = document.createElement("div")),
(s = document.getElementById(this.options.id)),
o.setAttribute("width", e),
o.setAttribute("height", n),
o.setAttribute("border", "0"),
o.setAttribute("frame", "0"),
o.setAttribute("frameborder", "0"),
o.setAttribute("allowTransparency", "true"),
o.setAttribute("src", t),
o.setAttribute("marginheight", "0"),
o.setAttribute("marginwidth", "0"),
o.setAttribute("onload", this.options.onLoad()),
o.setAttribute("title", this.options.iframeTitle, "Connect"),
d.setAttribute("id", "widget-box"),
(s.innerHTML = ""),
s.appendChild(d);
var i = document.getElementById("widget-box");
(i.style.display = "flex"),
(i.style.position = "fixed"),
(i.style.width = "100%"),
(i.style.left = "0"),
(i.style.top = "0"),
(i.style.backgroundColor = bg),
(i.style.zIndex = "1"),
(i.style.height = "100%"),
(i.style.justifyContent = "center"),
(i.style.alignItems = "center"),
window.matchMedia("(max-height: 700px)").matches &&
o.setAttribute("height", "95%"),
(i.innerHTML = ""),
i.appendChild(o),
(this.iframeDetails = { iframe: o, targetElement: i }),
this.options.config &&
((this.configInterval = setInterval(
function () {
this.configInitialized
? clearInterval(this.configInterval)
: this._setClientConfig(this.options.config);
}.bind(this),
100
)),
setTimeout(
function () {
clearInterval(this.configInterval);
}.bind(this)
));
}),
(t.prototype._onPostMessage = function (t) {
var e = {};
if (
this.iframeDetails &&
this.iframeDetails.iframe &&
t.source === this.iframeDetails.iframe.contentWindow
) {
try {
e = JSON.parse(t.data);
} catch (t) {
console.warn("Error processing event", t);
}
e.type && this._handleEvent(e);
}
}),
(t.prototype._handleEvent = function (t) {
var e = {
pageSuccess: { callback: this.options.onSuccess },
widgetPageLoaded: { callback: this.options.onEvent },
widgetLoaded: { callback: this.options.onLoad },
widgetClose: { callback: this.options.onClose },
widgetError: { callback: this.options.onError },
initialized: {
callback: function () {
this.configInitialized = !0;
}.bind(this),
},
}[t.type];
("widgetClose" != t.type && "bankAdded" != t.type) ||
(document
.querySelector('iframe[title="' + this.options.iframeTitle + '"]')
.remove(),
document.getElementById("widget-box").remove()),
e.callback(t.payload);
}),
(t.prototype._setClientConfig = function (t) {
t.hasOwnProperty("ce_user_id") && (t.ce_user_id = t.ce_user_id),
t.hasOwnProperty("FILoginAcctId") &&
(t.FILoginAcctId = t.FILoginAcctId),
this._postMessageToAeroSync({
type: "clientConfig",
data: { connect: t },
});
}),
(t.prototype._postMessageToAeroSync = function (t) {
this.iframeDetails.iframe.contentWindow.postMessage(JSON.stringify(t));
}),
(window.AerosyncConnect = t);
}.call(this));
2. Create HTML element reference
Add HTML id attribute in the page where the Aerosync widget will be launched.
// example of launching the Aerosync widget using button element.
<button id="openBank" class="button" role="button">Connect Bank</button>
// add below references in the html page where you want to load the widget.
// Aerosync widget will locate below elements to launch and display messages.
<div id="widget"></div>
<p id="wrapData"></p>
3. Create Aerosync widget object
To initialize Aerosync in your app, create a widget object as show below. AerosyncConnect() will create an iFrame through the window object.
// launch the Aerosync widget on button click event.
var openButton = document.getElementById('openBank');
openButton.addEventListener('click', function () {
widgetRef.launch();
})
//Aerosync widget
var widgetRef = new window.AerosyncConnect({
token: <aerosync_token>
id: "widget",
iframeTitle: "Connect",
width: "375px",
height: "95%",
environment: "production",
deeplink: deeplink,
consumerId: consumerId,
onEvent: function (type, payload) {
console.log("onEvent", type, payload);
},
onLoad: function (event) {
console.log("onLoad", event);
},
onSuccess: function (event) {
var successData = document.getElementById("wrapData");
successData.innerHTML = "";
successData.innerText = "success : " + "\n" + JSON.stringify(event, null, 4);
},
onBankAdded: function (event) {
},
onError: function (event) {
console.log("onError", event);
var errorData = document.getElementById("wrapData");
errorData.innerHTML = "";
errorData.innerText = "Error : " + "\n" + JSON.stringify(event, null, 4);
}
});
4. Widget configuration
Configure your environment for staging (https://www.staging.aerosync.com) or production (https://www.aerosync.com). Additionally configure an id, iframeTitle, width, and height of the window.
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/ |
id | string | Yes | Specifies a unique id for an HTML element. The default value is "widget". |
iframeTitle | string | Yes | Adds title text to the iframe. |
width | string | Yes | Specifies the width of the iframe in pixels. |
height | string | Yes | Specifies the height of the iframe in pixels. |
environment | string | Yes | Permitted values are [staging, production] |
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. |
5. Define postMessage events
Define the postMessage callback event notifications needed for your implementation.
onEvent: function (type, payload) {
console.log("onEvent", type, payload);
},
onLoad: function (event) {
console.log("onLoad", event);
},
onSuccess: function (event) {
var successData = document.getElementById("wrapData");
successData.innerHTML = "";
successData.innerText = "success : " + "\n" + JSON.stringify(event, null, 4);
},
onBankAdded: function (event) {
},
onError: function (event) {
console.log("onError", event);
var errorData = document.getElementById("wrapData");
errorData.innerHTML = "";
errorData.innerText = "Error : " + "\n" + JSON.stringify(event, null, 4);
Parameter | Type | Required | Description |
---|---|---|---|
onLoad | function(response) | No | Call JavaScript function after the contents of a webpage have been loaded. |
onSuccess | function(response) | Yes | This method will be triggered when a bank is added successfully and the user clicks on "continue" button in the final AeroSync-UI page. |
onBankAdded | function(response) | No | This method will be triggered when bank is added successfully by the user. |
onError | function(response) | Yes | The method is called if AeroSync-UI dispatches any error events. |
onClose | function() | Yes | This event will be triggered if the user closes the AeroSync-UI window. |
onEvent | function(response) | No | AeroSync-UI will trigger event on each page load. |
6. Initialize Aerosync widget
Initialize the widget object you have created on section #3 as shown below.
// custom button to launch the Aerosync widget on click event
openButton.addEventListener('click', function () {
// launch Aerosync widget
widget.launch();
})
7. Store connected account
Store onSuccess() data attributes to authenticate with the Aerosync API to retrieve account information.
{
"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"
}
8. Close Aerosync widget
Close the widget object upon an account being connected successfully with the .close() method.
Updated 25 days ago