@finodigital/uba-widget

A standalone web component that embeds the fino Universal Bank Access (UBA) experience via a hardened iframe integration. It exposes a declarative HTML API, a small JavaScript controller, and utilities for lazy loading the bundle from a CDN.

Features

• Registers <fino-uba> custom element with shadow-dom encapsulated iframe
• Attribute / property sync for session, user, tenant, and visual toggles
• Hardened postMessage bridge with origin + source validation
• Promise-based readiness via element.ready
• Programmatic API through UbaWidgetController
• Optional loader helper for dynamic injection

Getting Started

npm install @finodigital/uba-widget

import { createUbaWidget } from "@finodigital/uba-widget";

const controller = createUbaWidget({
  sessionId: "<jwt>",
  userIdentifier: "<hash>",
  hideHeader: true
});

document.querySelector("#uba-container")?.append(controller.element);

controller.on("ready", ({ payload }) => {
  console.log("UBA ready", payload.version);
});

Declarative markup

<fino-uba
  session-id="<jwt>"
  user-identifier="<hash>"
  tenant="none"
  embedded="true"
  hide-header
></fino-uba>
<script type="module">
  import "@finodigital/uba-widget";

  const widget = document.querySelector("fino-uba");
  widget?.addEventListener("bank-connect", event => {
    console.log("Bank connected", event.detail.payload);
  });
</script>

Loader helper

import { loadUbaWidget } from "@finodigital/uba-widget/loader";

await loadUbaWidget({ version: "0.1.0" });

Scripts

• npm run build – generates ESM and CJS outputs plus type declarations in dist/
• npm run clean – removes build artifacts

Publishing

1. Bump the version in package.json
2. npm run build
3. Publish to your npm registry (public or private)