@mayurkhatri-dev/finance-widget

Embeddable white-label financial widget for Revenued embed flows. Partners integrate via npm or CDN; all secret API credentials stay on your proxy server.

Host App → <finance-widget token="..."> → https://api-sandbox.yourdomain.com/api/proxy/... → Revenued APIs

For partner onboarding (tokens, sandbox URLs, checklist), see PARTNER_ONBOARDING.md.

Install

Public npm (recommended for partners — free, no auth)

npm install @mayur-brahmkhatri/finance-widget

Published on every release tag to npmjs.com.

GitHub Packages (internal / CI only)

Requires GitHub token + .npmrc:

@mayurkhatri-dev:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN

npm install @mayurkhatri-dev/finance-widget

CDN script tag (vanilla HTML)

jsDelivr (from public npm):

<script
  src="https://cdn.jsdelivr.net/npm/@mayur-brahmkhatri/finance-widget/dist/finance-widget.umd.cjs"
  crossorigin="anonymous"
></script>

GitHub Pages:

<script
  src="https://mayurkhatri-dev.github.io/finance-widget-sdk/finance-widget.umd.cjs"
  crossorigin="anonymous"
></script>

Run npm run generate:sri after build and add the integrity attribute for production CSP.

Quick usage

Use @mayur-brahmkhatri/finance-widget in imports (public npm). Examples below use the partner package name.

Web component

import '@mayur-brahmkhatri/finance-widget';

<finance-widget
  token="demo-token-abc123"
  api-base="https://your-proxy.example.com"
  theme='{"primaryColor":"#0040BA","borderRadius":"16px"}'
></finance-widget>

React (17+)

import { FinanceWidgetReact, useFinanceWidget } from '@mayur-brahmkhatri/finance-widget/react';

export function Dashboard() {
  return (
    <FinanceWidgetReact
      token={import.meta.env.VITE_FINANCE_TOKEN}
      apiBase={import.meta.env.VITE_FINANCE_API_BASE}
      theme={{ primaryColor: '#0040BA' }}
    />
  );
}

Angular (14+)

import { FinanceWidgetModule } from '@mayur-brahmkhatri/finance-widget/angular';

@NgModule({ imports: [FinanceWidgetModule] })
export class AppModule {}

<app-finance-widget
  [token]="clientToken"
  apiBase="https://your-proxy.example.com"
  [theme]="theme"
></app-finance-widget>

API reference

| Property | Attribute | Description | |----------|-----------|-------------| | token | token | Client embed token from your provider (required) | | apiBase | api-base | Proxy base URL (no trailing slash) | | theme | theme | JSON theme object |

Theme keys

Maps to CSS custom properties in Shadow DOM:

• --fin-primary-color
• --fin-bg-color
• --fin-text-color
• --fin-font-family
• --fin-border-radius
• --fin-padding

Package exports

| Import | Entry | |--------|-------| | @mayur-brahmkhatri/finance-widget | Web component + types | | @mayur-brahmkhatri/finance-widget/react | FinanceWidgetReact, useFinanceWidget | | @mayur-brahmkhatri/finance-widget/angular | FinanceWidgetModule |

Features

• Dashboard summary, KPIs, recent transactions
• Cash Draw flow (create-case → estimation → request-draw)
• Pay Now flow (create-case → request-prepay)
• Loading, error, empty, and success states
• Accessible (ARIA labels, keyboard support)

Local development (SDK maintainers)

cd finance-widget
npm install
npm run dev          # http://localhost:5173/examples/vanilla.html
npm run build
npm run generate:sri

Publishing (maintainers)

See PUBLISHING.md.

Security

• Never embed Revenued API keys in the widget — use the proxy only
• Client tokens are validated server-side on every request
• Use SRI hashes when loading from CDN

License

UNLICENSED — partner use under agreement.