fincodeマーケティング担当です。
クレジットカード決済を実装したい開発者向けに、「決済登録（サーバー側 / API）+決済実行（フロント側 / fincodeJS）」を組み合わせて最小構成で動作する決済実装方法をまとめました。
サーバー側はPython(Flask)で構築しています。
※本記事の実装例は、非エンジニアが記述しているので、決済導入が初めてのエンジニアの方や、ビジネスサイドの方でも概要をイメージできる内容になっています。
本実装例で実現できること
本記事で紹介する「決済登録API+決済実行JS」の実装を行うと、以下を実現できます。
- APIでクレジットカード決済を実行
- 3Dセキュア2.0の認証
fincodeの決済フローを簡単に理解する
fincodeのクレジットカード決済は、以下の「2段階」で構成されます。
① 決済登録（サーバー側 / API）
サーバー側で/v1/paymentsにリクエストし、決済オブジェクト（支払情報）を作成します。
② 決済実行（フロント側 / fincodeJS）
ブラウザ側のJavaScriptでカード番号などの情報を入力し、決済を実行（オーソリ・売上処理）します。
カード番号などの機密情報は、サーバー側は扱わずfincodeJSで完結できるため、セキュリティ面は安心です。
必要なAPIキー（パブリックキー/シークレットキー）
fincodeのテスト環境管理画面にログイン後、「API・Webhook」タブからAPIキーを確認できます。
テスト環境のアカウントを作成する ＞
テスト環境管理画面にログインする ＞
| 種類 | 用途 | 例 |
| パブリックキー | ブラウザ（決済実行JS）で使用 | p_test_********************** |
| シークレットキー | サーバー側からfincodeのAPIにアクセスする際に使用 | m_test_********************** |
パブリックキーはフロント側に埋め込めますが、シークレットキーはセキュリティ上、コード内に直接書くことは推奨されません。
本記事の実装例では、シークレットキーは環境変数（※1）から読み込みます。
（※1）プログラムが動く環境（パソコンやサーバー）にあらかじめ登録しておく設定情報のことです。APIキーなどの秘密情報をコードに書かず、安全に管理するために使われます。
プロジェクト構成（最小構成）
v1payments/Card/
├─ app.py ← 決済登録API（Flask）
└─ static/
└─ index.html ← 決済実行画面（フロント）サーバー側（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)フロント（決済実行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()で決済実行- 完了後のレスポンスを画面表示
実行方法（最短4ステップ）
① Flask を起動
bash
python app.py②ブラウザからアクセス
http://localhost:3000/
③カード情報等を入力し、決済実行
テスト用のカード番号はdocsからご確認いただけます。
今回は、3Dセキュア2.0がすぐに認証成功するテストカード番号「4100000000000100」を利用しました。
④レスポンスログ内の redirect_url にアクセス → 即時3Dセキュア認証成功
まとめ
本記事では、fincodeの「決済実行JS」を使って、最小構成でクレジットカード決済を実装する方法を紹介しました。
非エンジニアであるマーケティング担当者でも数十行の簡単なコードで実装ができたので、fincodeが開発しやすいことを実感しました。
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サービス概要の資料ダウンロードはこちらから
資料請求 ＞
あわせて読みたいおすすめの記事
【初心者向け】Pythonでfincodeの決済APIを実行する実装例（決済URL作成編）
Python(Flask)でPayPay決済APIを実装する方法（決済登録API+決済実行API）
