npm i [email protected]

<!-- Button to launch the AeroSync widget -->
<!-- 'id' is optional but useful for CSS/JS targeting -->
<!-- Vue syntax, replace with onclick="openAerosyncWidget()" if using plain JS -->
<button
  id="openBank"
  class="button"
  role="button"
  @click="openAerosyncWidget()"
>
  Connect Bank
</button>

<!-- This div is where the AeroSync widget iframe will be embedded -->
<!-- Make sure the 'id' here matches the 'elementId' passed during initialization -->
<div id="widget"></div>

/**
 * Step-by-step integration of AeroSync AddBank widget
 */
import type {
  AerosyncWidget,
  WidgetEventSuccessType,
  WidgetEventType,
} from "aerosync-web-sdk";
import { initAeroSyncWidget } from "aerosync-web-sdk";

function openAerosyncWidget() {
  // Initialize the widget with configuration options
  let widgetControls = initAeroSyncWidget({
    elementId: "widget", // 👈 ID of the target div in your HTML
    iframeTitle: "Connect", // 🔒 Used for accessibility
    environment: "production", // 🌍 Set to 'sandbox' for testing, 'production' for live
    token: "xxxx", // 🔑 Your secure AeroSync token
    theme: "light", // 🎨 Choose between 'light' or 'dark' theme

    // 📦 Event listener for all widget events
    onEvent(event: WidgetEventType) {
      console.log("event", event);
    },

    // 🚀 Fires when the widget is fully loaded
    onLoad() {
      console.log("onload");
    },

    // ✅ Called after the user successfully connects a bank and closes the widget
    onSuccess(event: WidgetEventSuccessType) {
      console.log("onSuccess", event);
      // ...
      // Handle success (e.g., update UI, send data to backend, etc.)
    },

    // ❌ Fires when the widget is closed manually by the user
    onClose() {
      console.log("widget closed");
    },

    // ⚠️ Catch and handle widget errors
    onError(event: string) {
      console.log("onError", event);
    },
  });

  // 🧭 Launch the widget
  widgetControls.launch();
}