Web NPM SDK

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

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

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