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 aerosync-web-sdk

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 widgetRef = openWidget({
        id: "widget",
        iframeTitle: 'Connect',
        environment: 'staging', // staging, production
        token: token,
        style: {
          width: '375px',
          height: '688px',
          bgColor: '#000000',
          opacity: 0.7
        },
        deeplink: deeplink,
        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.

5. Define postMessage events