Introduction

This NPM package provides an interface to load Aerosync-UI in Javascript/typescript application. 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. Install Aerosync Web NPM SDK

npm i [email protected]

2. Create HTML element reference

Add HTML id attribute in the page where the Aerosync widget will be launched.

<!--button to lauch Aerosync widget-->
  <button id="openBank" class="button" role="button" @click="openAerosyncWidget()">
    Connect Bank
  </button>
  <!--The id 'widget' allows Aerosync to access the element where the widget will be launched -->
  <div id="widget"></div>

3. Import Aerosync Web SDK

To initialize Aerosync in your app, create a widgetRef object as show below :

/**
 * Integrate AeroSync UI AddBank
 */
import { openWidget } from 'aerosync-web-sdk';

    openAerosyncWidget() {

      let token = ""; // Signature to instigate Aerosync services

      let deeplink = ""; // Unique URL that points to the specific page within the mobile app

      let consumerId = ""; // Unique ID that represents the merchant for customization

      let handleMFA = false; // if true then handle the additional MFA workflow for balance refresh

      let jobId = ""; // Unique ID for current job

      let userId = ""; // Unique ID for user

      let widgetRef = openWidget({
        id: "widget",
        iframeTitle: 'Connect',
        environment: 'staging', // staging, sandbox, production
        token: token,
        style: {
          width: '375px',
          height: '688px',
          bgColor: '#000000',
          opacity: 0.7
        },
        deeplink: deeplink,
        handleMFA: handleMFA,
        jobId: jobId,
        userId: userId,
        consumerId: consumerId,
        onEvent: function (event, type) {
          console.log("onEvent", event, type);
        },
        onLoad: function () {
          console.log("onLoad");
        },
        onSuccess: function (event) {
          console.log("onSuccess", event);
        },
        onClose: function () {
          console.log("onClose");
        },
        onError: function (event) {
          console.log("onError", event);
        }
      });

      // launch Aerosync widget with the configuration
      widgetRef.launch();
    }

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 POST /token_widget endpoint. Reference: https://api-aerosync.readme.io/reference/post_token-widget
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, sandbox, production]
deeplink	string	Conditional	Aerosync will redirect to this link on mobile app after authentication to resume the workflow for OAuth bank experiences Required for mobile applications. Not required for web applications. You can send the deeplink as empty string. Eg: `let deeplink:string = ""`
consumerId	string	No	Unique ID assigned to you to apply widget customizations.
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
targetDocument	ShadowRoot	No	The widget will be rendered inside the shadow dom instead of root document
zIndex	string	No	To override the stacking order of the widget elements provide the appropriate value. The default value is 1.
manualLinkOnly	boolean	No	User will only be able to link their bank manually.

5. Define postMessage events

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