Iframe第 1 步（共 2 步）
配置 frontend
将 widget 嵌入您的页面，显示银行选择器，并监听 iframe 的消息。
widget 是通过 https://widget.wealthreader.com/js/load.js 加载的 iframe。本页仅涵盖前端。callback 和银行数据在 backend 中配置。
提供此页面的域名必须在打开 widget 之前于客户中心完成授权。否则 widget 会提示该域名未授权。
集成清单
0/3最小代码
每次操作都生成新的 operation_id。将 entities_to_display 留空即可显示该 api_key 下的全部金融机构。除非技术团队另有说明，请将 wait_full_response 保持为 true。
<script>
const wr_conf = {
operation_id: crypto.randomUUID(),
entities_to_display: [],
wait_full_response: true
};
window.addEventListener("message", (event) => {
if (event.origin !== "https://widget.wealthreader.com") {
return;
}
if (event.data === "flow completed") {
// The backend callback has already been sent successfully.
// Close the selector or redirect to the success screen.
return;
}
if (typeof event.data !== "string") {
return;
}
try {
const message = JSON.parse(event.data);
if (message.error) {
console.log(message.error.code, message.error.message);
// OTP, wrong login, callback down, etc.
}
} catch (err) {
// Ignore other iframe messages.
}
});
</script>
<iframe
id="wr-iframe"
title="Wealth Reader widget"
width="100%"
frameBorder="0"
referrerpolicy="origin"
></iframe>
<script src="https://widget.wealthreader.com/js/load.js"></script>load.js 会查找 id="wr-iframe" 的 iframe，并根据视口设置高度。请为其预留纵向空间；如果放在页面中部，可能会被裁切。
postMessage 消息
iframe 与您的页面按如下方式通信：
event.data |
时机 | 应做的事 |
|---|---|---|
"flow completed" |
读取成功完成，并且您的 callback 返回了 200 + {"status":"ok"} |
关闭 widget 或进入成功页面。银行数据不会出现在此消息中。 |
带 error 的 JSON |
流程仍在进行（2FA、合同等）或已失败 | 读取 error.code 和 error.message。尚未发送 callback。 |
始终检查 event.origin === "https://widget.wealthreader.com"。
wr_conf 参数
| 参数 | 必填 | 默认值 | 作用 |
|---|---|---|---|
operation_id |
是 | — | 由您生成的 ID。会在 callback 中返回，用于将前端与后端对应起来。 |
entities_to_display |
否 | 全部 | 金融机构代码数组。为空或省略 = 全部。列表：https://api.wealthreader.com/entities/ |
wait_full_response |
否 | true |
true：产品和交易明细。false：仅产品列表。 |
date_from |
否 | 昨天 | 交易起始日期，YYYY-MM-DD。仅当 wait_full_response 为 true 时生效。 |
product_types |
否 | 您的 api_key 上的类型 |
产品筛选。数组或逗号分隔列表。 |
default_login |
否 | — | 金融机构代码。直接打开该机构的表单。 |
default_login_entity_country |
否 | ES |
ISO 国家代码（ES、FR 等）。仅在设置了 default_login 时使用。 |
token |
否 | — | 重新认证：预选某个已失效 token 对应的银行。 |
psd2 |
否 | true |
显示 PSD2 金融机构。仅当未用 entities_to_display 筛选时。 |
nonpsd2 |
否 | true |
显示非 PSD2 通道的金融机构（数据更丰富）。注意事项与 psd2 相同。 |
language |
否 | 浏览器语言 | "es" 或 "en"。 |
tokenize |
否 | 客户中心中的设置 | 设为 true 可在 callback 中收到可复用的 token。 |
business_account |
否 | true |
包含对公金融机构。 |
personal_account |
否 | true |
包含个人金融机构。 |
wait_full_response
请保持为 true。关闭后等待时间会缩短（数秒），但不会收到交易明细。除非有明确的 UX 原因，否则不要关闭；若关闭，请稍后用 API 和 callback 中的 token 再获取交易。
date_from
如果省略，widget 会使用昨天的日期。这并不是“全部历史”。
在欧洲银行查询超过 89 天的区间时，机构可能要求额外的双因素步骤。用户在 widget 内完成；读取可能需要数分钟。
product_types
可选值：
accounts— 活期账户portfolios— 投资组合cards— 卡receipts— 直接借记loans— 贷款deposits— 存款leases— 租赁 / 租用insurances— 保险factoringconfirmingproperties— 不动产invoices— 发票files— 文件（Norma 43、19 等）
示例：["accounts", "cards", "loans"] 或 "accounts,cards,loans"。
下一步
选择器显示正常后，请继续阅读 iframe backend。
最后更新于