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

Web Javascript SDK (No longer supported)

🚧
This SDK is longer supported as of June 31, 2024

Introduction

1. Import Aerosync Web SDK

2. Create HTML element reference

3. Create Aerosync widget object

4. Widget configuration

5. Define postMessage events

6. Initialize Aerosync widget

7. Store connected account

8. Close Aerosync widget

🚧This SDK is longer supported as of June 31, 2024

Introduction

1. Import Aerosync Web SDK

2. Create HTML element reference

3. Create Aerosync widget object

4. Widget configuration

5. Define postMessage events

6. Initialize Aerosync widget

7. Store connected account

8. Close Aerosync widget

🚧
This SDK is longer supported as of June 31, 2024