frontend を設定する

widget は https://widget.wealthreader.com/js/load.js で読み込む iframe です。このページはフロントエンドのみを扱います。callback と銀行データは backend で設定します。

最小コード

操作のたびに新しい operation_id を生成してください。api_key に紐づくすべての金融機関を表示するには、entities_to_display を空のままにします。テクニカルチームから指示がない限り、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.origin === "https://widget.wealthreader.com" を確認してください。

wr_conf パラメータ

wait_full_response

true のままにしてください。オフにすると待ち時間は短くなります（数秒）が、取引明細は届きません。明確な UX 上の理由がない限り無効化しないでください。無効化した場合は、あとから API と callback の token で取引明細を取得します。

date_from

省略すると、widget は昨日の日付を使います。「全履歴」ではありません。

欧州の銀行で 89 日を超える期間を指定すると、金融機関が追加の二要素認証を求めることがあります。ユーザーは widget 内で完了します。読み取りには数分かかることがあります。

product_types

指定できる値:

• accounts — 当座・普通預金口座
• portfolios — 投資ポートフォリオ
• cards — カード
• receipts — 口座振替
• loans — ローン
• deposits — 預金
• leases — リース / レンタル
• insurances — 保険
• factoring
• confirming
• properties — 不動産
• invoices — 請求書
• files — ファイル（Norma 43、19、…）

例: ["accounts", "cards", "loans"] または "accounts,cards,loans"。

次のステップ

セレクターの表示が正しければ、iframe backend に進んでください。