B BankcodeJP API
Bank Branch Selector Widget

銀行・支店選択ウィジェット

銀行・支店選択ウィジェットは、申込フォーム、振込先口座登録、返金先口座登録などに埋め込める銀行・支店選択Web Componentです。

銀行コード・支店コード・銀行名・支店名を hidden input と event で取得できます。 API Key をブラウザに埋め込まず、Public Key と短期 access token で利用します。

デモを見る 料金を見る Public Clientを作成する
Install
<script src="https://js.bankcode-jp.com/widgets/bank-branch-selector/v1/bank-branch-selector.js"></script>

<bankcodejp-bank-branch-selector
  public-key="YOUR_PUBLIC_KEY"
  name-prefix="bank_account"
  display-mode="dialog"
  search-mode-switch="fallback">
</bankcodejp-bank-branch-selector>

script tagで読み込めるIIFE形式です。React / Angular / Vue / 通常HTMLから利用できます。

Demo

フォームへの組み込みイメージ

Public Keyを設定すると、このデモで実際のWidgetを確認できます。未設定時はセットアップ案内を表示します。

  • Web Component として既存フォームに埋め込み
  • 銀行名・支店名・よみ・コード検索に対応
  • フォーム送信用の hidden input を自動生成
  • API Key をブラウザに埋め込まない Public Key 認証
  • React / Angular / Vue / 通常HTMLから利用可能
Widget demo
Pricing

銀行・支店選択ウィジェットの料金・提供条件

銀行・支店選択ウィジェットは、Search APIとは独立して単独で利用プランを有効化できるサービスです。 Public Client方式でブラウザから安全に利用できますが、Freeを含む利用プランの有効化が必要です。

追加サービス

最新の料金をご確認ください

最新の料金は、料金表をご確認ください。 未契約の場合、Public Clientを作成していてもWidget APIは利用できません。

認証
Public ClientのPublic Keyと短期access_tokenを利用します。
契約
Search APIとは独立して、銀行・支店選択ウィジェットの利用プランを有効化できます。
Quick Start

HTMLにscript tagとcustom elementを追加します。

Widget本体はCDNから読み込みます。public-key には、管理画面で発行したPublic ClientのPublic Keyを指定してください。

  • API Keyはブラウザに埋め込みません
  • Public Keyは公開前提の識別子です
  • APIアクセスには短期access_tokenを使います

最小コード

<script src="https://js.bankcode-jp.com/widgets/bank-branch-selector/v1/bank-branch-selector.js"></script>

<bankcodejp-bank-branch-selector
  public-key="YOUR_PUBLIC_KEY"
  name-prefix="bank_account"
  display-mode="dialog"
  search-mode-switch="fallback">
</bankcodejp-bank-branch-selector>
Use Cases

口座情報を扱うフォームに組み込めます。

振込先口座登録

報酬、返金、支払先口座などの登録フォームで、銀行・支店の選択ミスを減らします。

取引先マスタ

取引先の支払先口座登録で、金融機関コード・支店コードをフォーム値として取得できます。

SaaS / 管理画面

既存フォームにWeb Componentとして追加でき、フロントエンドフレームワークを選びません。

Form Integration

選択結果は hidden input に入ります。

name-prefix を指定すると、フォーム送信用のhidden inputをLight DOM直下に生成します。 既存フォームのsubmit処理と分離して利用できます。

hidden input例

<input type="hidden" name="bank_account[bank_code]" value="0001">
<input type="hidden" name="bank_account[bank_name]" value="みずほ銀行">
<input type="hidden" name="bank_account[branch_code]" value="001">
<input type="hidden" name="bank_account[branch_name]" value="本店">
Events

選択完了時にeventで受け取れます。

支店まで選択されると bcjp:select が発火します。 event detailには銀行コード、銀行名、支店コード、支店名、よみが含まれます。

event用途
bcjp:bank-select金融機関が選択されたとき
bcjp:select支店まで選択されたとき
bcjp:error認証・API取得・解析エラー発生時
bcjp:opendialogが開いたとき
bcjp:closedialogが閉じたとき

event購読例

document
  .querySelector("bankcodejp-bank-branch-selector")
  .addEventListener("bcjp:select", (event) => {
    console.log(event.detail);
  });
ダイアログ表示

フォームが長い画面ではdialog表示も使えます。

display-mode="dialog" を指定すると、親フォーム上にはsummaryとtriggerを表示し、銀行・支店選択UIをWidget内蔵dialogで開きます。

search-mode-switch="fallback" を指定すると、入力検索を主導線にし、頭文字検索は補助導線として表示できます。

ダイアログ表示

<bankcodejp-bank-branch-selector
  public-key="YOUR_PUBLIC_KEY"
  name-prefix="bank_account"
  display-mode="dialog"
  search-mode-switch="fallback"
  dialog-title="振込先口座を選択"
  dialog-description="振込先の金融機関と支店を選択してください">
</bankcodejp-bank-branch-selector>
Security

API Keyをブラウザに埋め込まない設計です。

WidgetはPublic Keyを使ってsession endpointから短期access_tokenを取得し、銀行・支店APIを呼び出します。 access_tokenはメモリ上にのみ保持し、localStorage / sessionStorageには保存しません。

  • Public Keyは公開前提の識別子
  • API Keyはブラウザに埋め込まない
  • Origin制限はPublic Client側で管理
  • access_tokenは短期・メモリ保持のみ

auth flow

public-key
  ↓
POST /public/v1/sessions
  ↓
short-lived access_token
  ↓
GET /public/v1/bank-branch-selector/*
Authorization: Bearer <access_token>
Reference

詳細仕様

属性、event、hidden input、ダイアログ表示、framework integrationは、Widgetリファレンスとして順次拡充します。 初期導入では、Quick Start、hidden input、event、securityを確認してください。

Public Clientを作成する リファレンスを見る
Start

銀行・支店情報を扱う業務を、検索・選択UI・確定判定まで。

無料で始める Widgetを見る APIドキュメントを見る