Guides
Start typing to search…

Web Javascript SDK (No longer supported)

🚧

This SDK is no longer supported

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}`: "") +
               (this.options.handleMFA? `&handleMFA=${this.options.handleMFA}&jobId=${this.options.jobId}&userId=${this.options.userId}`: "");
    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,
  handleMFA: handleMFA,
  jobId: jobId,
  userId: userId,
  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.

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

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);
ParameterTypeRequiredDescription
onLoadfunction(response)NoCall JavaScript function after the contents of a webpage have been loaded.
onSuccessfunction(response)YesThis method will be triggered when a bank is added successfully and the user clicks on "continue" button in the final AeroSync-UI page.
onBankAddedfunction(response)NoThis method will be triggered when bank is added successfully by the user.
onErrorfunction(response)YesThe method is called if AeroSync-UI dispatches any error events.
onClosefunction()YesThis event will be triggered if the user closes the AeroSync-UI window.
onEventfunction(response)NoAeroSync-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 15 days ago