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.

ParameterTypeRequiredDescription
tokenstringYesRequest AeroSync Token using GET /aggregatorCredentials endpoint.
Reference:
https://api-aeropay.readme.io/reference/aggregatorcredentials
https://developer.aeropay.com/api/aeropay/doc/
idstringYesSpecifies a unique id for an HTML element. The default value is "widget".
iframeTitlestringYesAdds title text to the iframe.
widthstringYesSpecifies the width of the iframe in pixels.
heightstringYesSpecifies the height of the iframe in pixels.
environmentstringYesPermitted values are [staging, production]
deeplinkstringYesAerosync will redirect to this link on mobile app after authentication to resume the workflow.
consumerIdstringNoUnique 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);
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.