【Python】銀行振込の消込作業を自動化！fincodeのバーチャル口座API＆Webhook実装ガイド
fincodeマーケティング担当です。 BtoB取引や高額商品の販売において、依然として根強い人気を誇る「銀行振込」。 しかし、Webサービスの運営担当者や経理担当者にとって、銀行振込は「悩みの種」でもあります。 「毎日、銀行の入出金明細を目視で確認するのが大変…」 「『スズキ』様から入金があったけど、どの鈴木さんの注文かわからない…」 そんな「アナログな消込作業」を一瞬で解決する技術が、fincodeの「銀行振込（バーチャル口座）」です。 今回は、Python（Flask）を使った銀行振込ページの実装から、 入金をリアルタイムに検知する「Webhook」の実装・テスト方法までを一挙にご紹介します。 バックエンドの実装コード（Python） フロントエンドの実装コード（HTML） Webhookによる入金検知と自動化ロジック ローカル環境での疎通テスト方法 まで一通りおさえていきます。 そもそも「バーチャル口座」で何が解決するのか？ 技術的な実装に入る前に、銀行振込（バーチャル口座）の仕組みを簡単に解説します。 通常の銀行振込では、会社が持つ「1つの口座」に対して、複数顧客が振込を行います。 そのため、名前（振込依頼人名）だけで誰からの入金かを判断しなければならず、 同姓同名や会社名義での振込があるたびに確認作業が発生します。 対してfincodeの銀行振込（バーチャル口座）は、「注文ごとに専用の口座番号を発行」します。 Aさんの注文には「口座番号：1111111」を表示 Bさんの注文には「口座番号：2222222」を表示 これにより、システムは「1111111番に入金があった＝Aさんの支払いが完了した」と、自動消込ができるようになります。 これをAPI経由で、しかも初期費用や月額固定費無料で導入できるのがfincodeの強みです。 今回作成するアプリの完成イメージ 今回は、Pythonの軽量Webフレームワークである「Flask」を使って、以下の機能を持つサンプルアプリを作成します。 口座発行（API）：ユーザーが商品購入ボタンを押すと、画面遷移なしで即座に専用の「振込先口座情報」を発行・表示する。 入金検知（Webhook）：ユーザーの支払いが完了すると、fincodeからシステムへリアルタイムに入金通知（Webhook）が届く。 デザイン：ブルーを基調としたUI。 完成すると、以下のような画面ができあがります。 バックエンド実装編：Pythonで口座発行＆Webhook受信を実装する それでは、サーバーサイド（Python）のコードを見ていきましょう。 fincodeのAPIにおいて、バーチャル口座の決済フローは以下の3ステップで成り立ちます。 1.決済登録（POST）：「これから銀行振込の決済を作りますよ」という枠を作成する。 2.決済実行（PUT）：実際に固有の口座番号を発番させる。 3.Webhook受信（POST）：後日、ユーザーが入金した通知をリアルタイムに受け取る。 以下が完成した app.py です。コピペしてそのまま使えます。 python import os from flask import Flask, jsonify, render_template, request, Response import requests app = Flask(__name__) API_KEY = os.getenv("FINCODE_TEST_SECRET_KEY") BASE_URL = "https://api.test.fincode.jp" HEADERS = { "Authorization": f"Bearer {API_KEY}", "Content-Type": "application/json", } SERVER_AMOUNT = 10000 @app.route("/") def index(): return render_template("index.html", amount=SERVER_AMOUNT) @app.route("/api/virtual_account/start", methods=["POST"]) def start_virtual_account(): amount = SERVER_AMOUNT # ----------------------------------------------------- # 1. 決済登録（POST /v1/payments） # ----------------------------------------------------- register_payload = { "pay_type": "Virtualaccount", "billing_amount": str(amount), } print(f"Registering payment... Payload: {register_payload}") register_res = requests.post( f"{BASE_URL}/v1/payments", headers=HEADERS, json=register_payload, timeout=10, ) if not register_res.ok: print(f"Register Error: {register_res.text}") return jsonify({"error": "register_failed", "detail": register_res.json()}), 502 register_json = register_res.json() payment_id = register_json.get("id") access_id = register_json.get("access_id") if not payment_id or not access_id: return jsonify({"error": "missing_id_or_access_id"}), 502 # ----------------------------------------------------- # 2. 決済実行（PUT /v1/payments/{id}） # ----------------------------------------------------- execute_payload = { "pay_type": "Virtualaccount", "access_id": access_id, } print(f"Executing payment... ID: {payment_id}, Payload: {execute_payload}") execute_res = requests.put( f"{BASE_URL}/v1/payments/{payment_id}", headers=HEADERS, json=execute_payload, timeout=10, ) if not execute_res.ok: print(f"Execute Error: {execute_res.text}") return jsonify({"error": "execute_failed", "detail": execute_res.json()}), 502 execute_json = execute_res.json() # ----------------------------------------------------- # 3. 必要な情報を抽出して返却 # ----------------------------------------------------- response_data = { "status": "success", "payment_id": payment_id, "access_id": access_id, "bank_info": { "branch_name": execute_json.get("va_branch_name"), # 支店名 "account_number": execute_json.get("va_account_number"), # 口座番号 "account_name": execute_json.get("va_account_name"), # 口座名義 }, "amount": execute_json.get("billing_total_amount"), # 合計金額 "payment_term": execute_json.get("payment_term"), # 支払期限日時 } return jsonify(response_data) @app.route("/success") def success(): return "銀行振込（バーチャル口座）の発行が完了しました。" # ===================================================== # Webhook 受信用エンドポイント # ===================================================== @app.route("/webhook", methods=["POST"]) def fincode_webhook(): payload = request.get_json() if not payload: return Response("0", status=200, mimetype="text/plain") event_type = payload.get("event") order_id = payload.get("order_id") status = payload.get("status") print("\n========================================") print("★ fincode Webhookを受信しました ★") print(f"イベント : {event_type}") print(f"注文ID : {order_id}") print(f"ステータス: {status}") print("========================================\n") # バーチャル口座の「入金完了」を検知した場合の処理 if event_type in ["payments.virtualaccount.complete", "payments.virtualaccount.complete.stub"]: if status == "CAPTURED": print(f"【入金確認】注文番号: {order_id} の入金を確認しました。") # ------------------------------------------------- # [ここに実行したい処理を書く] # 例1: データベースの注文ステータスを「支払い済み」に更新する # 例2: ユーザーに「入金を確認しました」と自動メールを送る # ------------------------------------------------- return Response("0", status=200, mimetype="text/plain") if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True) バックエンドの解説ポイント pay_type："Virtualaccount" を指定しています。 billing_amount パラメータを使用しています。クレジットカード決済などでは amount ですが、バーチャル口座ではこちらを使います。 フロントエンド実装編 次に、ユーザーが触れる画面（HTML/CSS/JS）です。 以下のコードを templates/index.html として保存してください。 html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お支払い | fincode Bank Transfer</title> <style> /* -------------------------------------------------- Variables & Reset -------------------------------------------------- */ :root { --primary-color: #0068B7; --primary-gradient-start: #0055D0; --primary-gradient-end: #00A1E9; --primary-hover: #005096; --bg-color: #f0f4f8; --card-bg: #ffffff; --text-main: #333333; --text-sub: #767676; --accent-color: #0068B7; --error-color: #e74c3c; --border-radius: 16px; --shadow: 0 10px 30px -5px rgba(0, 85, 208, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; } body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--bg-color); color: var(--text-main); margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* -------------------------------------------------- Card Container -------------------------------------------------- */ .payment-card { background: var(--card-bg); width: 100%; max-width: 420px; border-radius: var(--border-radius); box-shadow: var(--shadow); overflow: hidden; animation: slideIn 0.5s ease-out; position: relative; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .card-header { background: linear-gradient(135deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%); padding: 35px 20px; text-align: center; color: white; position: relative; } .card-header::after { content: ''; position: absolute; bottom: -20px; left: 0; right: 0; height: 40px; background: #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleX(1.5); } .header-title { margin: 0; font-size: 0.85rem; opacity: 0.9; letter-spacing: 0.1em; text-transform: uppercase; font-weight: bold; } .header-price { margin: 10px 0 5px; font-size: 2.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .header-price span { font-size: 1rem; font-weight: normal; margin-left: 4px; } .card-body { padding: 20px 30px 40px; position: relative; z-index: 1; } .product-info { text-align: center; margin-bottom: 30px; color: var(--text-sub); font-size: 0.9rem; font-weight: 500; } /* -------------------------------------------------- Button -------------------------------------------------- */ .btn-pay { width: 100%; padding: 18px; background-color: var(--primary-color); color: white; border: none; border-radius: 50px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 15px rgba(0, 104, 183, 0.3); display: flex; justify-content: center; align-items: center; gap: 10px; } .btn-pay:hover { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 104, 183, 0.4); } .btn-pay:active { transform: translateY(0); } .btn-pay:disabled { background-color: #cbd5e1; cursor: not-allowed; box-shadow: none; transform: none; } /* -------------------------------------------------- Spinner -------------------------------------------------- */ .spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------- Result Area -------------------------------------------------- */ .result-area { display: none; margin-top: 35px; animation: fadeIn 0.6s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .success-message { text-align: center; color: var(--primary-color); margin-bottom: 25px; } .success-icon { width: 60px; height: 60px; background-color: #e6f2ff; color: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto 15px; } .success-text { font-weight: bold; font-size: 1.1rem; color: var(--text-main); } .info-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; } .info-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 0.95rem; padding-bottom: 12px; border-bottom: 1px dashed #e1e4e8; } .info-row:last-child { border-bottom: none; } .info-label { color: var(--text-sub); font-size: 0.9rem; } .info-value { font-weight: 600; color: var(--text-main); text-align: right; } .highlight { color: var(--primary-color); font-size: 1.2rem; letter-spacing: 1px; } .note { margin-top: 25px; padding: 15px; background-color: #f8fafc; border-radius: 12px; color: #64748b; font-size: 0.8rem; line-height: 1.6; text-align: left; } /* -------------------------------------------------- Error -------------------------------------------------- */ .error-message { display: none; margin-top: 20px; padding: 15px; background-color: #fef2f2; color: var(--error-color); border-radius: 12px; font-size: 0.9rem; text-align: center; border: 1px solid #fecaca; } </style> </head> <body> <div class="payment-card"> <div class="card-header"> <p class="header-title">TOTAL AMOUNT</p> <h1 class="header-price">{{ amount }}<span>円</span></h1> </div> <div class="card-body"> <p class="product-info">商品A</p> <button id="btn-pay-virtual" class="btn-pay"> <span id="spinner" class="spinner"></span> <span id="btn-text">銀行振込で支払う</span> </button> <div id="error-area" class="error-message"></div> <div id="result-area" class="result-area"> <div class="success-message"> <div class="success-icon">✓</div> <div class="success-text">ご購入ありがとうございます。</div> </div> <p style="text-align: center; font-size: 0.9rem; margin-bottom: 25px; color: var(--text-sub);"> 以下の口座へお振込みをお願いします。 </p> <div class="info-group"> <div class="info-row"> <span class="info-label">銀行名</span> <span class="info-value">GMOあおぞらネット銀行</span> </div> <div class="info-row"> <span class="info-label">支店名</span> <span class="info-value" id="res-branch-name">--</span> </div> <div class="info-row"> <span class="info-label">口座種別</span> <span class="info-value">普通</span> </div> <div class="info-row"> <span class="info-label">口座番号</span> <span class="info-value highlight" id="res-account-number">--</span> </div> <div class="info-row"> <span class="info-label">口座名義</span> <span class="info-value" id="res-account-name">--</span> </div> <div class="info-row" style="border-top: 2px solid #f1f5f9; padding-top: 15px; margin-top: 5px;"> <span class="info-label">お支払金額</span> <span class="info-value highlight" id="res-amount">--</span> </div> <div class="info-row" style="border-bottom: none;"> <span class="info-label">支払期限</span> <span class="info-value" id="res-payment-term" style="color: #e74c3c;">--</span> </div> </div> <div class="note"> <strong>ご注意</strong><br> ※お振込手数料はお客様負担となります。<br> ※期限を過ぎると口座は無効になります。 </div> </div> </div> </div> <script> document.getElementById('btn-pay-virtual').addEventListener('click', async function() { const button = this; const spinner = document.getElementById('spinner'); const btnText = document.getElementById('btn-text'); const resultArea = document.getElementById('result-area'); const errorArea = document.getElementById('error-area'); // UIリセット errorArea.style.display = 'none'; resultArea.style.display = 'none'; // ローディング開始 button.disabled = true; spinner.style.display = 'block'; btnText.textContent = '処理中...'; try { // サーバーサイド(app.py)のAPIを呼び出す const response = await fetch('/api/virtual_account/start', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); const data = await response.json(); if (!response.ok) { let errorMsg = '決済処理に失敗しました'; if(data.error) errorMsg += ` (${data.error})`; throw new Error(errorMsg); } // 成功時：取得した口座情報を画面にセット document.getElementById('res-branch-name').textContent = data.bank_info.branch_name; document.getElementById('res-account-number').textContent = data.bank_info.account_number; document.getElementById('res-account-name').textContent = data.bank_info.account_name; const formattedAmount = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(data.amount); document.getElementById('res-amount').textContent = formattedAmount; document.getElementById('res-payment-term').textContent = data.payment_term; // 結果エリアを表示 resultArea.style.display = 'block'; // ボタンを完了状態にする btnText.textContent = '発行完了'; // button.disabled = true; // スクロール resultArea.scrollIntoView({ behavior: 'smooth', block: 'start' }); } catch (error) { console.error('Error:', error); errorArea.textContent = 'エラー: ' + error.message; errorArea.style.display = 'block'; // ボタンを元に戻す button.disabled = false; btnText.textContent = '銀行振込で支払う'; } finally { if (btnText.textContent !== '発行完了') { spinner.style.display = 'none'; } else { spinner.style.display = 'none'; } } }); </script> </body> </html> フロントエンドの解説ポイント 非同期通信：ページ全体をリロードすることなく、ボタンを押した瞬間にバックエンドと通信を行います。 動的なDOM操作：APIから返ってきた「支店名」や「口座番号」を、JavaScriptでHTML内のプレースホルダー（--の部分）に埋め込みます。 UXへの配慮：処理中は「スピナー（くるくる）」を表示し、完了後は自動的に結果エリアまでスクロールするアニメーションを入れています。 Webhookをローカル環境でテストする3つのステップ プログラム内に /webhook を用意しましたが、開発中の自分のパソコン（localhost）はインターネット上に公開されていないため、fincodeから直接通知を受け取ることができません。 そこで今回は、「一度インターネット上のテスト用URLで本物のデータを受け取り、それをローカルに保存して手動でリクエストを実行する」というテスト手法を解説します。 ステップ1：Webhook.siteで生のデータをキャッチする まずは、fincodeから実際に送られてくるデータの構造を確認しましょう。 1.ブラウザで Webhook.site にアクセスします。 2.画面に表示される 「Your unique URL」（https://webhook.site/...）をコピーします。 3.fincodeテスト環境の管理画面にログインし、「API・Webhook」タブ を開きます。 「Webhookの追加」ボタンを押し、エンドポイントURLには先ほどコピーしたURLをペースト、 トリガーイベントは「銀行振込（バーチャル口座）支払通知（シミュレート）」を選択し、「追加」ボタンを押下。 4.ターミナルで python app.py を実行しhttp://localhost:5000 にアクセス。 「銀行振込で支払う」ボタンを押下し、管理画面から「銀行振込支払実行」を行うと、Webhook.siteにリアルタイムでデータ（JSON）が届きます。 「Raw Content」 に表示されているJSONデータを丸ごとコピーします。 ステップ2：データをローカル（data.json）に保存する 1.プロジェクトのフォルダ（app.py と同じ場所）に、data.json という名前のファイルを新規作成します。 2.先ほどWebhook.siteからコピーしたデータをそのまま貼り付けて保存します。 ステップ3：PowerShellからローカル環境へリクエストを送信する 1.エクスプローラーで data.json があるフォルダを開き、アドレスバーに powershell と入力してEnterキーを押します。 そのフォルダを基準としたPowerShell画面が立ち上がります。 2.起動したPowerShellに、以下のcurlコマンドを貼り付けてEnterを押します。 PowerShell curl.exe --noproxy localhost -X POST http://localhost:5000/webhook -H "Content-Type: application/json" -d "@data.json" コマンドのポイント --noproxy localhost：開発環境が社内ネットワーク等にある場合、プロキシサーバーがlocalhostへの通信を横取りしてアクセス拒否（Access Denied）を起こすのを防ぎます。 "@data.json"：PowerShellにおいて @ 記号は特殊な命令として誤認されエラーの原因になるため、全体をダブルクォーテーションで囲んでファイルを正常に読み込ませています。 実行結果の確認 コマンドを実行して、それぞれの画面に以下の反応があればテスト成功です。 ▼ PowerShell（送信側）の表示 Plaintext 0 ▼ Python（Flask実行側）のログ出力 Plaintext ======================================== ★ fincode Webhookを受信しました ★ イベント : payments.virtualaccount.complete.stub 注文ID : o_********************** ステータス: CAPTURED ======================================== 【入金確認】注文番号: o_********************** の入金が完了しました。 127.0.0.1 - - [26/Jun/2026 17:09:52] "POST /webhook HTTP/1.1" 200 - 導入ビフォーアフター 導入前（通常振込） fincodeバーチャル口座導入後 入金先口座 会社共通の1つの口座 注文ごとに異なる口座番号 特定方法 依頼人名（カタカナ）を目視確認 口座番号でシステムが自動特定 消込作業 手動で管理 全自動 誤入金 金額間違いの連絡が必要 金額完全一致のみ受け付け可能 このシステムを導入することで、経理担当者は「入金確認作業」から解放され、より生産的な業務に時間を使えるようになります。 まとめ：fincodeなら「銀行振込」もモダンに実装できる 今回は、Python（Flask）を使った銀行振込ページの実装から、 入金をリアルタイムに検知する「Webhook」の実装・テスト方法までを一挙にご紹介しました。 fincodeは初期費用・月額費用が無料で、アカウント作成後すぐにテスト環境のAPIキーが発行されます。 「まずは手元で動かしてみたい」というエンジニアの方は、ぜひ今回のコードをコピペして試してみてください。 ■ この記事の作成者 fincode マーケティング担当 非エンジニアのバックグラウンドを持ちながら、基本情報技術者試験に合格。 現在はデータ分析にPythonを活用し、プロダクトへの理解を深めるためGo言語の習得にも挑戦中。 読者に近い視点から、複雑な決済技術を噛み砕いてお伝えします。 ■ この記事の監修者 fincode プロダクトマネージャー オンライン決済インフラ『fincode byGMO』の新機能企画・製品ディレクション等を統括。 プロダクトマネジメントの傍ら、個人開発者として自らコードを書く時間も大切にしている。 現場のエンジニアが直面する課題に寄り添い、情報の正確性と実用性を徹底して監修。 fincodeとは fincodeとは、GMOイプシロン株式会社が提供する、スピーディに導入できるオンライン決済サービスです。 シンプルで統一性のあるAPIと充実の開発支援コンテンツを提供し、エンジニアファーストな設計を追求しています。 fincodeが提供する決済画面のUIコンポーネント（JavaScript）をそのまま利用することで開発工数を削減し、簡単に決済を実装できます。 決済を通じてEC/SaaS/プラットフォーム、スタートアップからエンタープライズまで様々なビジネスの成長を支えます。 +FinTechによる新たな収益モデルの構築 fincodeのプラットフォーム機能を実装することで、決済金額に対する利用料が得られる新たな収益モデルの構築が可能です。 貴社のお客様（＝テナント）へ提示する決済手数料に、「プラットフォーム利用料」を設定することで、差額が貴社の収益となります。 「貴社プロダクト + FinTech～新たな収益モデル構築のご提案～」資料ダウンロード ＞ fincodeが選ばれる理由 エンジニアファーストの設計/洗練されたUX オープンでアクセスしやすいWEBドキュメント、REST APIと複数開発言語に対応したAPIリファレンス。 決済画面のUIも、Android/iOS対応のモバイルSDKにより、少ない開発工数で柔軟にカスタマイズ可能です。 見えない手数料、ゼロへ 初期費用・月額費用0円。 さらに、義務化されたEMV 3-Dセキュア認証についても追加費用0円で導入できます。 料金表に書かれていない見えない手数料はゼロ。カード決済は決済手数料のみでご利用いただけます。 国際標準を日本品質で fincodeは日本国内で生まれ、日本のビジネス環境に合わせて設計された決済サービスです。 海外発サービスでは難しい、日本ならではの細かな商習慣や感性まで理解して、日本の企業と共に成長していきます。 運営会社 会社名 GMOイプシロン株式会社（英文表記：GMO Epsilon, Inc.） 設立年月日 2002年9月26日 所在地 〒150-0043 東京都渋谷区道玄坂1丁目14番6号 ヒューマックス渋谷ビル7F 資本金 1億5百万円 事業内容 オンライン販売の決済代行、代金回収代行及びそれらに付帯する業務 主要株主 GMOペイメントゲートウェイ株式会社 (東証プライム上場:3769) グループ会社 GMOインターネットグループ 東証プライム上場企業のGMOペイメントゲートウェイの連結会社として、プライバシーマーク認証やPCI DSS、ISMS準拠のセキュリティ基準で安心してご利用いただける環境を提供しています。 事業規模によって決済手数料のご提案が可能です。 見積依頼 ＞ fincodeサービス概要の資料ダウンロードはこちらから 資料請求 ＞ あわせて読みたいおすすめの記事 【初心者向け】fincodeで請求業務DX｜Pythonで”決済機能付き請求書”をAPI発行する方法（インボイス機能） 【初心者向け】Pythonでfincodeの決済APIを実行する実装例（決済URL作成編） 【Python】クレジットカード決済の実装方法（決済登録API+決済実行JS編） Python(Flask)でPayPay決済APIを実装する方法（決済登録API+決済実行API）
