【Python】クレジットカード決済の実装方法（決済登録API+決済実行JS編）
fincodeマーケティング担当です。 クレジットカード決済を実装したい開発者向けに、「決済登録（サーバー側 / API）+決済実行（フロント側 / fincodeJS）」を組み合わせて最小構成で動作する決済実装方法をまとめました。 サーバー側はPython(Flask)で構築しています。 ※本記事の実装例は、非エンジニアが記述しているので、決済導入が初めてのエンジニアの方や、ビジネスサイドの方でも概要をイメージできる内容になっています。 本実装例で実現できること 本記事で紹介する「決済登録API+決済実行JS」の実装を行うと、以下を実現できます。 APIでクレジットカード決済を実行 3Dセキュア2.0の認証 1. fincodeの決済フローを簡単に理解する fincodeのクレジットカード決済は、以下の「2段階」で構成されます。 ① 決済登録（サーバー側 / API） サーバー側で/v1/paymentsにリクエストし、決済オブジェクト（支払情報）を作成します。 ② 決済実行（フロント側 / fincodeJS） ブラウザ側のJavaScriptでカード番号などの情報を入力し、決済を実行（オーソリ・売上処理）します。 カード番号などの機密情報は、サーバー側は扱わずfincodeJSで完結できるため、セキュリティ面は安心です。 2. 必要なAPIキー（パブリックキー/シークレットキー） fincodeのテスト環境管理画面にログイン後、「API・Webhook」タブからAPIキーを確認できます。 テスト環境のアカウントを作成する ＞ テスト環境管理画面にログインする ＞ 種類 用途 例 パブリックキー ブラウザ（決済実行JS）で使用 p_test_********************** シークレットキー サーバー側からfincodeのAPIにアクセスする際に使用 m_test_********************** パブリックキーはフロント側に埋め込めますが、シークレットキーはセキュリティ上、コード内に直接書くことは推奨されません。 本記事の実装例では、シークレットキーは環境変数（※1）から読み込みます。 （※1）プログラムが動く環境（パソコンやサーバー）にあらかじめ登録しておく設定情報のことです。APIキーなどの秘密情報をコードに書かず、安全に管理するために使われます。 3. プロジェクト構成（最小構成） v1payments/Card/ ├─ app.py ← 決済登録API（Flask） └─ static/ └─ index.html ← 決済実行画面（フロント） 4. サーバー側（Python / Flask）の実装 以下のコードを app.py に保存します。 python import os import requests from flask import Flask, jsonify, request, send_from_directory app = Flask(__name__, static_folder="static", static_url_path="/static") API_KEY = os.getenv("FINCODE_TEST_SECRET_KEY") # m_test_********************** BASE_URL = "https://api.test.fincode.jp" headers = { "Authorization": f"Bearer {API_KEY}", "Content-Type": "application/json", } @app.route("/api/payment", methods=["POST"]) def create_payment(): data = { "pay_type": "Card", "amount": "1000", "job_code": "CAPTURE", "tds_type": "2" } response = requests.post( f"{BASE_URL}/v1/payments", headers=headers, json=data, timeout=20, ) response.raise_for_status() return jsonify(response.json()) @app.route("/") def root(): return send_from_directory("static", "index.html") if __name__ == "__main__": app.run(host="0.0.0.0", port=3000, debug=True) 5. フロント（決済実行JS＋入力画面）の実装 以下を static/index.html に保存します。 html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>fincode 決済テスト</title> <script src="https://js.test.fincode.jp/v1/fincode.js"></script> <style> body { font-family: sans-serif; max-width: 480px; margin: 40px auto; } input { width: 100%; padding: 8px; margin: 4px 0; } button { width: 100%; padding: 10px; margin-top: 12px; } pre { background: #f5f5f5; padding: 10px; } </style> </head> <body> <h2>fincode 決済テスト</h2> <label>カード番号</label> <input id="card_no" type="text" placeholder="4100000000000100"> <label>有効期限（YYMM）</label> <input id="expire" type="text" placeholder="2711"> <label>セキュリティコード</label> <input id="security_code" type="text" placeholder="123"> <button id="pay">決済する</button> <h3>レスポンスログ</h3> <pre id="log">{}</pre> <script> const FINCODE_PUBLIC_KEY = "p_test_**********************"; // ← パブリックキーを入力 const fincode = Fincode(FINCODE_PUBLIC_KEY); const el = id => document.getElementById(id); const log = data => el("log").textContent = JSON.stringify(data, null, 2); document.getElementById("pay").addEventListener("click", async () => { // ① 決済登録（サーバー → fincode） const regRes = await fetch("/api/payment", { method: "POST", headers: {"Content-Type": "application/json"}, body: JSON.stringify({}) }); const reg = await regRes.json(); log({ register: reg }); // ② 決済実行（ブラウザ → fincodeJS） const tx = { id: reg.id, pay_type: "Card", access_id: reg.access_id, card_no: el("card_no").value, expire: el("expire").value, security_code: el("security_code").value, method: "1" }; fincode.payments( tx, (status, response) => log({ execute_status: status, response }), () => log({ error: "network_error" }) ); }); </script> </body> </html> これで以下が実現します： カード番号などの入力 /api/payment で決済登録 fincode.payments() で決済実行 完了後のレスポンスを画面表示 6. 実行方法（最短4ステップ） ① Flask を起動 bash python app.py ②ブラウザからアクセス http://localhost:3000/ ③カード情報等を入力し、決済実行 テスト用のカード番号はdocsからご確認いただけます。 今回は、3Dセキュア2.0がすぐに認証成功するテストカード番号「4100000000000100」を利用しました。 ④レスポンスログ内の redirect_url にアクセス → 即時3Dセキュア認証成功 7. まとめ 本記事では、fincodeの「決済実行JS」を使って、最小構成でクレジットカード決済を実装する方法を紹介しました。 非エンジニアであるマーケティング担当者でも数十行の簡単なコードで実装ができたので、fincodeが開発しやすいことを実感しました。 運営会社 会社名 GMOイプシロン株式会社（英文表記：GMO Epsilon, Inc.） 設立年月日 2002年9月26日 所在地 〒150-0043 東京都渋谷区道玄坂1丁目14番6号 ヒューマックス渋谷ビル7F 資本金 1億5百万円 事業内容 オンライン販売の決済代行、代金回収代行及びそれらに付帯する業務 主要株主 GMOペイメントゲートウェイ株式会社 (東証プライム上場:3769) グループ会社 GMOインターネットグループ 東証プライム上場企業のGMOペイメントゲートウェイの連結会社として、プライバシーマーク認証やPCI DSS、ISMS準拠のセキュリティ基準で安心してご利用いただける環境を提供しています。 事業規模によって決済手数料のご提案が可能です。 見積依頼 ＞ fincodeサービス概要の資料ダウンロードはこちらから 資料請求 ＞ あわせて読みたいおすすめの記事 【初心者向け】Pythonでfincodeの決済APIを実行する実装例（決済URL作成編）
