enable-banking-ui-widgets

Original：🇺🇸 English

Translated

Embed and troubleshoot Enable Banking UI Widgets for terms consent, ASPSP selection, and auth flow in web applications. Use when Codex needs to load the Enable Banking widgets library, render `enablebanking-consent`, `enablebanking-aspsp-list`, or `enablebanking-auth-flow`, wire widget events into React/TanStack/Hono flows, handle sandbox/custom origins, whitelist widget origins, or choose between redirect and no-redirect authorization UX.

2installs

Sourceberget1411/enable-banking-skills

Added on2026-04-25

NPX Install

npx skill4agent add berget1411/enable-banking-skills enable-banking-ui-widgets

SKILL.md Content

View Translation Comparison →

Enable Banking UI Widgets

Overview

Use this skill to integrate Enable Banking browser widgets into web application flows. For API endpoints and JWT signing, use

enable-banking-api

; for sandbox bank behavior and credentials, use

enable-banking-sandbox

.

Workflow

Identify the widget:
- Terms consent: show Enable Banking terms before redirecting to authorization.
- ASPSP selection: list banks and emit selected bank metadata.
- Auth flow: run AIS/PIS authorization interactions from the application page.
Confirm the widget origin is whitelisted for the Enable Banking application in the control panel.
Load the widgets UMD script from
```
https://tilisy.enablebanking.com/lib/widgets.umd.min.js
```
; load
```
widgets.css
```
only for ASPSP selection unless local styling replaces it.
Render the custom element with the right attributes for production, sandbox, or dedicated/single-tenant origin.
Attach event listeners after the element exists and clean them up in React effects.
Read references/widgets-reference.md for attributes, events, and implementation examples.

Core Rules

Keep authorization IDs and payment IDs server-issued. Do not create Enable Banking API JWTs in browser code.
Use
```
sandbox
```
on widgets only when the authorization/payment was created by a sandbox application.
Use
```
origin
```
when a custom/dedicated environment is used; otherwise omit it and use the default
```
https://tilisy.enablebanking.com
```
.
Verify state and complete callback handling server-side for redirect-based flows.
Do not use the terms consent widget when the company is a licensed TPP and Enable Banking is acting only as a technical service provider; that terms step is skipped.
Use
```
no-redirect
```
on the consent widget only when the app intentionally redirects after receiving the
```
confirmed
```
event.
Account for widgets being custom elements in React/TypeScript: use refs and
```
addEventListener
```
, or add JSX intrinsic element typings if TypeScript complains.

Project Placement

When implementing in an application:

Put widget UI in frontend code, using existing authenticated app patterns.
Keep API calls that create authorizations or payments in backend services and expose them through server routes or RPC procedures.
Keep routes thin; they should invoke API services and return IDs/URLs needed by widgets.
Store allowed widget origins and redirect URLs in Enable Banking control panel configuration, not in frontend code comments.
Avoid exposing private keys, bearer JWTs, application registration credentials, or sandbox-only secrets to the web app.