enable-banking-ui-widgets

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

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

使用此技能将Enable Banking浏览器组件集成到Web应用流程中。如需API端点和JWT签名功能，请使用

enable-banking-api

；如需沙箱银行行为与凭证，请使用

enable-banking-sandbox

。

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.

确定组件类型：
- 条款同意：在重定向至认证页面之前展示Enable Banking条款。
- ASPSP选择：列出银行并触发选中银行的元数据。
- 认证流程：从应用页面运行AIS/PIS认证交互。
确认组件源已在控制面板中被Enable Banking应用列入白名单。
从
```
https://tilisy.enablebanking.com/lib/widgets.umd.min.js
```
加载组件UMD脚本；仅在ASPSP选择场景下加载
```
widgets.css
```
，除非使用本地样式替代它。
渲染带有正确属性的自定义元素，以适配生产、沙箱或专属/单租户源环境。
在元素创建完成后附加事件监听器，并在React副作用中清理这些监听器。
阅读references/widgets-reference.md获取属性、事件及实现示例。

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.

授权ID和支付ID由服务器生成。请勿在浏览器代码中创建Enable Banking API JWT。
仅当授权/支付由沙箱应用创建时，才在组件上使用
```
sandbox
```
属性。
当使用自定义/专属环境时使用
```
origin
```
属性；否则省略该属性，使用默认的
```
https://tilisy.enablebanking.com
```
。
针对基于重定向的流程，在服务器端验证状态并完成回调处理。
若公司为持牌TPP且Enable Banking仅作为技术服务提供商，则无需使用条款同意组件；该条款步骤会被跳过。
仅当应用有意在收到
```
confirmed
```
事件后进行重定向时，才在同意组件上使用
```
no-redirect
```
属性。
在React/TypeScript中需注意组件是自定义元素：使用refs和
```
addEventListener
```
，若TypeScript报错则添加JSX固有元素类型定义。

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.

在应用中实现时：