Embedded Widgets

Embedded Widgets

IOF Widgets are drop-in UI components that let you launch customer-facing Islamic finance journeys without building the front-end from scratch. Every widget is white-label, ABAC-policy-bound, and emits structured audit events. Maker-checker is preserved on every sensitive action — no widget moves money on its own.

Live catalog: widgets.islamicopenfinance.com · Live gallery: widgets.islamicopenfinance.com/gallery

Catalog

ID	Name	Category	Tier
murabaha-calculator	Murabaha Repayment Calculator	Lead generation	Starter
ijarah-calculator	Ijarah Rental Schedule Calculator	Lead generation	Starter
sukuk-distribution-calculator	Sukuk Distribution Calculator	Lead generation	Starter
takaful-contribution-calculator	Takaful Contribution Calculator	Lead generation	Starter
roi-calculator	Islamic Finance ROI Calculator	Lead generation	Starter
murabaha-application	Murabaha Finance Application	Embedded finance	Professional
qr-payment	QR Payment / Request-to-Pay	Embedded finance	Starter
evidence-pack-viewer	Evidence Pack Viewer	Compliance	Starter
consent-capture	Consent / Delegation Widget	Compliance	Professional
compliance-badge	Powered-by-IOF Evidence Badge	Lead generation	Starter
trade-doc-checker	Trade Finance Document Checker	Operations	Professional
reconciliation-viewer	Reconciliation Exception Viewer	Operations	Professional
sandbox-launcher	Sandbox Tenant Launcher	Developer	Starter

Source of truth: packages/widgets-core/src/registry.ts.

Embed methods

iframe

<iframe
  src="https://widgets.islamicopenfinance.com/widgets/murabaha-calculator?tenant=tnt_xyz"
  width="100%"
  height="520"
  frameborder="0"
></iframe>

Auto-mount (vanilla JS)

<script src="https://widgets.islamicopenfinance.com/embed.js"></script>
<div data-iof-widget="murabaha-calculator" data-iof-tenant="tnt_xyz"></div>

The loader scans the DOM on DOMContentLoaded and injects an iframe for every [data-iof-widget] element. Multiple widgets per page are supported.

React

import { MurabahaCalculator } from "@iof/embedded-ux-kit/widgets";

export function Page() {
  return <MurabahaCalculator />;
}

See the @iof/embedded-ux-kit SDK reference for the full component list and props.

Audit events

Every widget emits structured WidgetEvent messages to your configured callback URL. The event family is:

• widget.session.started — user initiated the embedded session
• widget.session.terminated — session ended (timeout, explicit close, navigation)
• widget.submission.received — user submitted a form; payload includes submissionId and sanitised summary
• widget.error.thrown — widget-side error (validation, network, policy denial)

Full schemas live in packages/event-schema-registry/src/schemas/widget-events.ts and are re-exported from @iof/contracts-core.

ABAC policy binding

Every widget is bound to one or more policy-engine resources. Authorisation is evaluated by the embedded PDP (EPDP) at the edge before any API call leaves the browser, and again by the service PDP (SPDP) inside rail-api. The canonical policy for widget sessions is config/cerbos/policies/widget_session.yaml.

End-users can only read their own sessions. terminate and impersonate actions are explicitly denied for end_user roles. Tenant owners and admins retain full control.

Maker-checker

No widget moves money unilaterally. Sensitive actions (contract creation, payment execution, consent grant) are marked approvalGated in the widget definition and routed through the maker-checker flow in rail-api. The widget surface shows the approval status in real time but never short-circuits it.

See also

• Agents — governed AI copilots that work alongside widgets
• Trust Center — attestations and compliance framework alignment
• @iof/embedded-ux-kit SDK reference — full component reference