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.

📘

Web NPM SDK Versioning

For all new Aeropay integrations, please use the latest version of our web npm SDK. Any versions 1.0 and earlier will no longer be supported.

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.

5. Define postMessage events