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.

📘

NPM Package Versioning

For all Aeropay integrations, please use the latest 1.x Version of our web npm package. Any versions 2.0 and later are still in beta and may be unstable.

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

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]
deeplinkstringConditionalAerosync 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 = ""
For more guidance refer to our article here
targetDocumentShadowRootNoThe widget will be rendered inside the shadow dom instead of root document
consumerIdstringNoUnique ID assigned to you to apply widget customizations.
zIndexstringNoTo override the stacking order of the widget elements provide the appropriate value. The default value is 1.

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.