fincode

Product Blog

Python(Flask)でPayPay決済APIを実装する方法(決済登録API+決済実行API)

fincodeマーケティング担当です。 本記事では、Python(Flask)からfincodeのPayPay決済APIを実行する方法を、コピペで動くサンプルコード付きで解説します。 Python初心者〜バックエンドエンジニアまで、誰でも迷わず実装できるように、 事前準備(APIキー・Python環境) サーバーサイドの実装コード(Python/Flask) フロントエンドの実装コード(HTML) 成功レスポンスの読み解き方 エラーレスポンスの読み解き方 まで一通りおさえていきます。 PayPayとは PayPayは、日本国内で広く普及しているスマホ決済のひとつです。 実店舗での利用イメージが強いですが、オンライン決済でも利用が拡大しています。 fincodeでは、Webページ(本記事のサンプルでは index.html) → PayPayの支払い画面 → 自社サービスの完了画面というオンライン決済フローを、API経由で簡単に実装できます。 PythonでのPayPay決済処理の全体フロー PayPay決済の流れは、シンプルにまとめると次の3ステップです。 1. サーバー(Python/Flask)で決済登録API を呼ぶ 2. 決済実行API を呼び、PayPayの支払い画面に遷移するURL(code_url)を取得 3.フロントエンドから code_url にリダイレクト → 購入者がPayPayの支払い画面で支払う サーバー側(Python/Flask)がやること 今回のシンプルな実装例では、サーバー側の役割は次の通りです。 1.POST /v1/payments で PayPayの決済登録API を呼ぶ 2.レスポンスで返ってきた id / access_id を使って PUT /v1/payments/{id} で 決済実行API を呼ぶ 3.返却された code_url をフロントへ返す この時点ではステータスは AWAITING_CUSTOMER_PAYMENT(お客様の支払い待ち)で、実際の引き落としはまだ行われていません。 購入者の支払いフロー 購入者側の流れは以下の通りです。 1. Webページで「PayPayで支払う」を押す 2. PayPayの支払い画面に自動遷移 3. 決済内容を確認 4. 支払い確定 5. 成功画面(本記事の例では http://localhost:5000/success)へリダイレクト 以上が全体の大まかな流れです。 次からは、実際の実装について解説していきます。 事前準備(APIキー・Python環境) fincodeのAPIキーの取得方法 1. fincodeテスト環境の管理画面にログイン テスト環境のアカウントを作成する > テスト環境管理画面にログインする > 2. 「API・Webhook」タブから シークレットキー をコピー fincodeのテスト用シークレットキーは「m_test_**********************」という形式です。 3. 環境変数に設定する シークレットキーは、セキュリティの観点からコードに直書きせず、環境変数から読み込むことを推奨します。 本記事の実装例では、シークレットキーは環境変数(※1)から読み込みます。 (※1)プログラムが動く環境(パソコンやサーバー)にあらかじめ登録しておく設定情報のことです。APIキーなどの秘密情報をコードに書かず、安全に管理するために使われます。 Python環境のセットアップ 今回のサンプルで使用するライブラリは次の2つです。 Flask:簡易サーバー&HTMLテンプレート用 requests:fincode API を叩くためのHTTPクライアント bash pip install flask requests サーバーサイド実装(Python / Flask) まずは、fincodeのPayPay決済APIを実行するサーバー側のコードです。 app.py として保存します。 Python import os from flask import Flask, jsonify, render_template 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", } # PayPay決済後のリダイレクト先 REDIRECT_URL = "http://localhost:5000/success" SERVER_AMOUNT = 1500 @app.route("/") def index(): return render_template("index.html", amount=SERVER_AMOUNT) @app.route("/api/paypay/start", methods=["POST"]) def start_paypay(): amount = SERVER_AMOUNT # 1. 決済登録(POST /v1/payments) register_res = requests.post( f"{BASE_URL}/v1/payments", headers=HEADERS, json={ "pay_type": "Paypay", "job_code": "CAPTURE", "amount": str(amount), }, timeout=10, ) if not register_res.ok: return jsonify({"error": "register_failed"}), 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_res = requests.put( f"{BASE_URL}/v1/payments/{payment_id}", headers=HEADERS, json={ "pay_type": "Paypay", "access_id": access_id, "redirect_url": REDIRECT_URL, }, timeout=10, ) if not execute_res.ok: return jsonify({"error": "execute_failed"}), 502 execute_json = execute_res.json() code_url = execute_json.get("code_url") if not code_url: return jsonify({"error": "missing_code_url"}), 502 # フロント側では code_url にリダイレクト return jsonify( { "payment_id": payment_id, "access_id": access_id, "code_url": code_url, } ) @app.route("/success") def success(): return "PayPay決済が完了しました。" if __name__ == "__main__": app.run(host="0.0.0.0", port=5000, debug=True) ポイントは POST /v1/payments で決済登録 → レスポンスから id と access_id を取得 PUT /v1/payments/{id} で決済実行 → code_url を取得 です。 フロントエンド実装(HTML) 次に、「PayPayで支払う」ボタンだけを持ったシンプルなフロントエンドです。 templates/index.html として保存します(Flaskのテンプレートディレクトリ)。 html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>PayPay決済テスト</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 640px; margin: 40px auto; padding: 0 16px; line-height: 1.6; } h1 { font-size: 1.4rem; margin-bottom: 1rem; } p { margin-top: 0.5rem; } button { margin-top: 1.5rem; padding: 10px 16px; font-size: 1rem; cursor: pointer; } </style> </head> <body> <h1>PayPay決済テスト</h1> <p style="font-size: 1.2rem; font-weight: 700; margin-top: 0.5rem;"> お支払い金額: <span style="font-size: 1.4rem;"> {{ "{:,}".format(amount) }} </span> 円 </p> <button id="paypay-button">PayPayで支払う</button> <script> document.getElementById("paypay-button").addEventListener("click", async () => { try { const res = await fetch("/api/paypay/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({}), }); const data = await res.json(); if (!res.ok) { alert("エラーが発生しました。コンソールを確認してください。"); console.error("Error response:", data); return; } if (data.code_url) { window.location.href = data.code_url; } else { alert("code_url が取得できませんでした。コンソールを確認してください。"); console.error("No code_url:", data); } } catch (err) { alert("通信エラーが発生しました"); console.error(err); } }); </script> </body> </html> ここでは 金額は サーバー側から渡された amount を表示 ボタンを押すと /api/paypay/start に POST 返ってきた code_url に window.location.href で遷移 という、シンプルな構成にしています。 成功レスポンスの読み解き方 PUT /v1/payments/{id} の成功時レスポンス(抜粋)は、次のようなイメージです。 json { "id": "o_**********************", "access_id": "a_**********************", "code_url": "https://**********************" } 項目 意味 id オーダーID。決済情報ID(今回はこれを {id} に使う) access_id 取引ID code_url PayPayの支払い画面へ遷移するためのURL エラーレスポンスの読み解き方 本記事のサンプルコードでは、最低限のエラーハンドリングとして、 決済登録APIが 200 以外 → {"error": "register_failed"} 決済実行APIが 200 以外 → {"error": "execute_failed"} id / access_id / code_url が欠けている → missing_... エラー を返すようにしています。 FAQ Q1. Python初心者でも実装できますか? →はい。この記事のコードをそのまま実行するだけで動作します。 Q2. どんなフォルダ構成にすればいいですか? →今回のサンプルでは、次のようなシンプルな構成にしています。 プロジェクトフォルダ/ ├─ app.py └─ templates/    └─ index.html app.py … Python(Flask)の本体 templates/index.html … 画面(HTML)のファイル この形にしておけば、python app.py を実行して ブラウザで http://localhost:5000/ を開くだけで動きます。 Q3. サンプルコードはどうやって起動すればいいですか? →以下4ステップを実行すると起動します。 1.ターミナル(またはPowerShell、コマンドプロンプト)を開く 2. app.py があるフォルダに移動 bash cd プロジェクトフォルダ 3.Flaskアプリを起動 bash python app.py 4.ブラウザで http://localhost:5000/ を開く 「PayPayで支払う」ボタンが表示されていれば成功です。 まとめ 本記事では、fincodeを使ってPayPay決済をPython(Flask)から実行する方法を紹介しました。 非エンジニアであるマーケティング担当者でも数十行の簡単なコードで実装ができたので、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】クレジットカード決済の実装方法(決済登録API+決済実行JS編)

マーケティングチーム

【Python】クレジットカード決済の実装方法(決済登録API+決済実行JS編)

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)

マーケティングチーム

【初心者向け】Pythonでfincodeの決済APIを実行する実装例(決済URL作成編)

fincodeマーケティング担当です。 この記事では、fincodeのテスト環境を使って、たった数十行のPythonコードでカード決済を開始できる「決済URL作成API」の実装について説明します。 ※本記事の実装例は、非エンジニアが記述しているので、決済導入が初めてのエンジニアの方や、ビジネスサイドの方でも概要をイメージできる内容になっています。 本実装例で実現できること 本記事で紹介する「決済URL作成API」の実装を行うと、以下を実現できます。 fincodeが提供するリダイレクト型決済ページを発行し、その決済ページへのURLを出力 リダイレクト型決済ページから決済のテストを実行 リダイレクト型決済とは リダイレクト型決済は、fincodeが提供する決済画面を使用して購入者が決済を行う方法です。 ショップ自身で決済画面を構築することなく、fincodeの決済URLに購入者を誘導するだけで決済を行うことができます。 「オンライン決済接続方式比較ガイド」資料ダウンロード > コード全文:最小構成で動くPythonサンプル Python import os, requests, json API_KEY = os.getenv("FINCODE_TEST_SECRET_KEY") BASE_URL = "https://api.test.fincode.jp" ENDPOINT = "/v1/sessions" SUCCESS_URL = "http://localhost:8000/success" headers = { "Authorization": f"Bearer {API_KEY}", "Content-Type": "application/json" } data = { "success_url": SUCCESS_URL, "transaction": { "pay_type": ["Card"], "amount": "1500" }, "card": { "job_code": "CAPTURE", "tds_type": "2", "tds2_type": "2" } } try: resp = requests.post(f"{BASE_URL}{ENDPOINT}", headers=headers, json=data, timeout=20) resp.raise_for_status() print("OK:\n" + json.dumps(resp.json(), ensure_ascii=False, indent=2)) except requests.exceptions.HTTPError: try: print(json.dumps(resp.json(), ensure_ascii=False, indent=2)) except Exception: print(resp.text) コードの流れを分解して理解する ①認証キーの設定 Python API_KEY = os.getenv("FINCODE_TEST_SECRET_KEY") テスト用シークレットキーを環境変数(※1)から取得します。 fincodeのテスト用シークレットキーは「m_test_**********************」という形式です。 fincodeのテスト環境管理画面にログイン後、「API・Webhook」タブからAPIキーを確認できます。 テスト環境のアカウントを作成する > テスト環境管理画面にログインする > セキュリティ上、APIキーをコード内に直接書くことは推奨されません。 ②リクエストヘッダーとリクエストボディ Python headers = { "Authorization": f"Bearer {API_KEY}", "Content-Type": "application/json" } Authorizationヘッダーは "Bearer <キー>" の形式で送信します。 fincodeではBearer認証(※2)またはBasic認証が使用できます。本記事ではBearer認証で実装しています。 ヘッダーでは認証とJSON形式の指定を行い、ボディには以下の内容を指定します。 項目 内容 補足 success_url 決済完了後の戻り先 ローカル開発時はlocalhostでもOK pay_type 利用する決済手段 今回は「Card」のみ amount 決済金額 文字列で送信(例: "1500") job_code 売上確定方法 「CAPTURE」=即時売上、「AUTH」=仮売上 tds_type / tds2_type 3Dセキュア設定 「2」は3Dセキュア2.0対応 ※カード決済以外の決済手段を追加する方法はAPIリファレンスをご参照ください。 APIリファレンス > ③APIを実行 Python resp = requests.post(f"{BASE_URL}{ENDPOINT}", headers=headers, json=data, timeout=20) requests.post()で決済URL作成APIを呼び出します。 成功すると、以下のようなJSONレスポンスが返ってきます。 json { "id": "lk_**********************", "link_url": "https://secure.test.fincode.jp/v1/links/lk_**********************", } この link_url をブラウザで開くと、テスト用のリダイレクト型決済ページが表示されます。 ④エラー時の挙動 Python rexcept requests.exceptions.HTTPError: try: print(json.dumps(resp.json(), ensure_ascii=False, indent=2)) except Exception: print(resp.text) APIキーが誤っているなどの理由でエラーが発生した場合、APIが返したエラーメッセージを整形して表示します。 決済のテストを行う リダイレクト型決済ページにおいて、テストカードの番号を用いることで、カード決済のテストを行うことができます。 テストカードの番号はこちらからご確認いただけます。 カードの「有効期限、CVC、名前」は適当な内容で問題ないです。 (※1)プログラムが動く環境(パソコンやサーバー)にあらかじめ登録しておく設定情報のことです。APIキーなどの秘密情報をコードに書かず、安全に管理するために使われます。 (※2)APIキー(アクセストークン)をAPIリクエスト時に送ることで認証する方式です。認証に成功した場合のみリソースを参照・操作できます。 想定質問(FAQ) Q1. timeout は削除しても動きますか?→ 動作はしますが、サーバー応答が途絶えた際にプログラムが止まるリスクがあります。実運用では必須です。 Q2. CAPTURE と AUTH の違いは?→ CAPTUREは即時売上、AUTHは仮売上(後から確定)。 Q3. Bearerを付け忘れると?→ 認証エラー(401)が返ります。ヘッダーの形式 "Authorization": "Bearer <キー>" を必ず確認しましょう。 Q4. 本番環境では何を変える?→ BASE_URL を https://api.fincode.jp に変更し、本番用APIキーを設定します。 おわりに 本記事では、fincodeのテスト環境を使って、たった数十行のPythonコードでカード決済を開始できる「決済URL作成API」の実装について説明しました。 非エンジニアであるマーケティング担当者でも数十行の簡単なコードで実装ができたので、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】クレジットカード決済の実装方法(決済登録API+決済実行JS編) Python(Flask)でPayPay決済APIを実装する方法(決済登録API+決済実行API)

マーケティングチーム

CloudWatch Logs Insightsでログを抽出・分析する

fincode開発チームです! 今回は、fincodeでも利用しているAmazon Web Services(AWS)のCloudWatch Logs Insightsを使用して、アプリケーションのログを簡単に抽出し、分析する方法を紹介したいと思います。 はじめに アプリケーションの運用や開発において、ログデータは貴重な情報源です。エラーや警告、トランザクションの記録など、アプリケーションの挙動や状態を理解するために不可欠な要素です。 しかし、アプリケーションが成長し、複雑化するにつれて、ログデータの量も増加し、その分析はますます困難になっています。 ここで登場するのが、Amazon Web Services(AWS)の提供するCloudWatch Logs Insightsです。このサービスは、ログデータを簡単に抽出し、リアルタイムで効果的に分析するための強力なツールです。 ログデータから価値ある情報を引き出し、アプリケーションのパフォーマンスを向上させる手助けをしてくれます。 CloudWatch Logs Insightsとは CloudWatch Logs Insightsは、AWSのモニタリングおよび管理サービスであるCloudWatchの一部として提供されています。このサービスを使用することで、アプリケーションのログデータをリアルタイムで簡単にクエリし、分析することができます。 従来のログの探索や分析では手間がかかっていた作業が、CloudWatch Logs Insightsを使用することで迅速かつ効率的に行えるようになります。 ログの重要性 ログデータは、アプリケーションがどのように動作しているか、ユーザーやシステムとのインタラクションがどのように進行しているかを記録する貴重な情報源です。特に、以下のような状況でログの分析が重要となります。 エラーのトラブルシューティング: エラーメッセージやスタックトレースを分析することで、アプリケーションの不具合を特定し、修正する手助けをします。 パフォーマンスの最適化: レスポンスタイムやリソース使用量などの情報を分析することで、アプリケーションのボトルネックを特定し、パフォーマンスを向上させる施策を打つことができます。 セキュリティ監視: 不正アクセスや異常なアクティビティを検知するために、アクセスログや認証イベントを監視することが重要です。 CloudWatch Logs Insightsは、これらの課題に取り組むためのツールとして優れた機能を提供しており、ログの分析作業を効率化し、アプリケーションの品質向上に寄与します。 次に、CloudWatch Logs Insightsの基本的な概念や操作方法について探求していきましょう。 実際に使ってみる 1.Logs Insights(ログのインサイト)を開く AWSコンソールからCloudWatchを開きログ>ログのインサイトを選択。 2.ロググループを選ぶ 抽出したいログが出力されてるロググループを選ぶ。(複数選択できる) 3.ログを抽出するクエリを書いて実行する クエリを書くことでログの表示ができる。(SQLみたいな感じ) @messageに1レコードのログが入っている。 そこからfilterを使って不要なログのレコードは取り除いたり、PARSEを使って欲しい情報のみを抽出してフィルタリング(filter)に使ったり並び替え(sort)に使ったりできる。 今回はAPI Gatewayのログを見てみることにします。 参考 CloudWatch Logs Insights のクエリ構文 - Amazon CloudWatch Logs API Gateway での CloudWatch による REST API のログの設定 CloudWatch Logs Insights は、さまざまなタイプのログをサポートします。Amazon CloudWatch Logs に送信されるすべてのログについて、CloudWatch Logs Insights は 5 つのシステムフィールドを自動的に生成しています。 フィールド名 備考 @message 生の未解析のログイベント。要はアプリで出力したログの中身 @timestamp ログイベントの timestamp フィールドに含まれるイベントタイムスタンプ。 @ingestionTime CloudWatch Logs によって受信された時間。 @logStream ログイベントの追加先のログストリームの名前を示します。ログストリームは、生成時と同じプロセスでログをグループ化します。 @log ロググループ識別子。 API Gatewayのログを見てみましょう。 下記のようなクエリを書いて実行することで、集計したデータを取得することができます。 fields@message # 単純に表示するとき | display@timestamp,path,httpMethod,status,authorizererror,dataProcessed,integrationErrorMessage,integrationLatency,sourceip # path毎に集計 | stats avg(integrationLatency) as avg_integrationLatency , sum(integrationLatency) as sum_integrationLatency , count(*) as count_path by path as path | sort count_path desc すると下記のように結果を出力できます。処理時間によってソート出来ていて、かつ各情報を簡潔に確認できますね。 @単純に表示するとき @path毎に集計 count(*) as path by pathのように記述することで、エンドポイント単位で集計することもできます。 4.使用したクエリを保存して他の人にも使ってもらう。 作ったクエリはAWSに保存できます。汎用性のあるものはできたら保存しておけば同一環境の他の人たちも気軽に使えて便利です。 まとめ この記事では、AWSのCloudWatch Logs Insightsを使ってアプリケーションのログをスマートに抽出し、リアルタイムで分析する方法をご紹介しました。 ログデータの探索や分析が面倒だった過去とは違い、CloudWatch Logs Insightsはその手間を劇的に削減してくれる頼もしいツールです。 fincodeではこのようなサービスを活用しながら継続的なサービスの改善に取り組んでいます! ご意見・ご要望もお待ちしております! あわせて読みたい開発者におすすめの記事 FindyToolsの「決済基盤のアーキテクチャ特集」にて、fincodeをご紹介いただきました! DevelopersNightでfincodeを紹介しました エンジニアファーストの決済ソリューション–fincodeの強みとは

開発チーム

UIコンポーネントのデモページを作成しました

fincode開発チームです! UIコンポーネントの「コーディングを始める」というページを作成したのでそのご紹介です。 https://docs.fincode.jp/payment/ui_component/demo fincodeでは、UIコンポーネントというWebサイトに埋め込めるカード情報入力フォームを提供しています。 詳しくはこちら UIコンポーネントは利用者が自由にカスタマイズできるようになっていて、 文字色や背景、ラベルの内容...などを任意の値に指定できるようにしています。 今回はdocs上に実際にUIコンポーネントのカスタマイズを試してどんなUIになるのか?をインタラクティブに試せるページを作成しました。 1.初期表示 ページを開くとこの画面が表示されます。 2.各パラメータを変更 今回はテキストを変えてみようと思います。 ラベルテキストの各項目を英語にし、プレースホルダーテキストのカード名義人を変更し、「更新」を選択します。 すると... 3.更新後画面 UIコンポーネントが更新され、変更したパラメータ通りの表示になっていますね! また、左に記載されているコードブロックはUIコンポーネントのサンプルコードです。 このページでお好みの文字や色に調整したあと、コードをコピーすればローカルでも利用できます! 今回はdocsに追加したUIコンポーネントの「コーディングを始める」ページの紹介でした。 あわせて読みたい開発者におすすめの記事 fincodeの構築方法~UIコンポーネント編~ エンジニアファーストの決済ソリューション–fincodeの強みとは

開発チーム

fincodeの構築方法~UIコンポーネント編~

fincode開発チームです! fincodeを使ってみた 第四弾・UIコンポーネント編をご紹介します! 今回は、UIコンポーネントを使って決済画面を構築してみました。 htmlにformを埋め込み、fincodeJSを使ったコードを書くだけで簡単にカード入力フォームを配置することができたので、ぜひ使ってみてください! UIコンポーネントを使った決済フローは以下になります。 まず、[UI初期化]・[入力フォーム作成]・[UIマウント]を行うことで決済画面にカード入力フォームを配置します。 その後ユーザーが入力したカード情報を[入力フォーム情報取得]で取得します。 取得したカード情報と決済実行APIのレスポンスをもとに、[決済実行JS]を呼び出し決済を実行します。 以下で画面にカード入力フォームを埋め込んだコードを掲載します。フロントはVue.jsで実装しました。 実装メモ: ・htmlにformを挿入 ・fincodeJSの[UI初期化]・[入力フォーム作成]・[UIマウント]を実行 htmlタグ <form id="fincode-form"> <div id="fincode"> </div> <button v-on:click="payment" class="fincode-button"> <span>お支払い</span> </button> </form> JS <script src="https://js.test.fincode.jp/v1/fincode.js"></script> <script> const app = new Vue({ el: '#app', mounted() { setUiComponent() { const fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const appearance = { layout: "vertical", hideLabel: false, hideHolderName: false, hidePayTimes: true, labelCardNo: "カード番号", labelExpire: "有効期限", labelCvc: "セキュリティコード", labelHolderName: "カード名義人", cardNo: "1234 5678 9012 3456", expireMonth: "01", expireYear: "25", cvc: "001", holderName: "TARO YAMADA", colorBackground: "f7f6e7", colorBackgroundInput: "ecebd9", colorText: "333", colorPlaceHolder: "9a9a9a", colorLabelText: "314e52", colorBorder: "314e52", colorError: "990c02", colorCheck: "000054", } const ui = fincode.ui(appearance) ui.create("payments", appearance) ui.mount("fincode", "400") }, }, }); </script> 上記実装で構築した決済画面はこちらです↓ フォームのデザインを考える際にはDocsの[コーディングを始める]ページを使うのがおすすめです! UIコンポーネントのDocs 好きなカラーやレイアウトを選ぶだけで簡単にコードが生成できるようになっています。 皆さんも是非試してみてください! あわせて読みたい開発者におすすめの記事 UIコンポーネントのデモページを作成しました エンジニアファーストの決済ソリューション–fincodeの強みとは

開発チーム

fincodeの構築方法~リダイレクト型編~

fincode開発チームです! fincodeを使って決済実行してみた 第三弾・リダイレクト型決済編をご紹介します! (第一弾・決済JS編、第二弾・トークンJS編) リダイレクト型決済では、決済JS・トークンJSを用いた決済方法とは異なり fincodeが提供する決済画面を使用して決済が実行されます。 リダイレクト型決済のフローは以下になります。 まず、サーバから決済URL作成APIを実行し、決済URLを取得します。 取得したURLに遷移させることで、fincodeの決済画面での決済が可能となります。 オーソリ後に決済結果画面に遷移して完了です。 今回フロントはVue.js、バックエンドはnode.js(+ Express)で実装しました。 実装メモ: ■フロント ・axiosでバックエンドのAPIを呼び出す。 ・決済URL作成APIで取得したURLに遷移する。 ■バックエンド ・決済URL作成APIを実行する。 ※[success_url]→fincodeの決済画面で[お支払い]ボタン押下後、オーソリ完了時の遷移先を設定 [cancel_url]→fincodeの決済画面で[戻る]ボタン押下時の遷移先を設定 Vue.js <template> 省略 </template> <script> import axios from "axios"; export default { name: "redirectTest", data() { return { amount: "1000", }; }, methods: { redirect() {   //axiosでリクエストデータ送信   axios.post("http://localhost:3000/redirect", { amount: this.amount, }) .then((res) => { console.log(JSON.stringify(res)); //リダイレクト型リンクに遷移 window.location.href = res.data.link_url; }) .catch((err) => { console.log(err); }); }, }, }; </script> node.js var express = require('express'); var router = express.Router(); /* 決済URL作成呼び出しAPI * http://localhost:3000/redirect にPOSTを投げると、 * 決済URL作成APIのレスポンスをJSON形式で返す。 */ router.post('/', function (req, res, next) { "use strict"; const console = require("console"); const request = require("request"); const API_KEY = "Bearer m_prod_XXXXXXXXXXXXXXXX“”; const BASE_URL = "https://api.fincode.jp"; const endpoint = "/v1/sessions"; const DATA = { success_url: "http://localhost:3000/success", cancel_url: "http://localhost:3000/cancel", transaction: { amount: req.body.amount, }, }; const options = { url: BASE_URL + endpoint, proxy: PROXY_URL, headers: { "Content-Type": "application/json; charset=utf-8", Authorization: API_KEY, }, json: DATA, } main(); function main() { // 決済URL作成API呼び出し request.post(options, (error, response, body) => { if (200 != response.statusCode) { console.log("ERROR"); console.log(body); } else { console.log("SUCCESS"); console.log(body); res.header('Content-Type', 'application/json; charset=utf-8') res.send(body); } } ); } }); module.exports = router; ■画面イメージ 上記を実行するとサンプルの商品選択画面からfincodeの決済画面に遷移させることができました。 ・商品選択画面(サンプル) ↓ [購入画面へ]押下 ・fincodeが提供する決済画面 ※決済画面デザインは変更になる可能性があります あわせて読みたい開発者におすすめの記事 リダイレクト型画面のUIを変更しました エンジニアファーストの決済ソリューション–fincodeの強みとは

開発チーム

fincodeの構築方法~トークン決済編~

fincode開発チームです! fincodeを使って決済実行してみた 第二弾・トークン決済編をご紹介します! 今回は、fincodeが提供している決済フローのうち、トークンJSを使って構築してみました。 (第一弾・決済JS編はこちら)   トークンJSを使った決済フローは以下になります。 ■決済登録API + トークンJS + 決済実行APIのフロー まず決済登録APIを呼び出し、オーダーIDや取引IDを取得します。 次にフロント側でトークンJSを実行し、カード情報(カード番号・有効期限など)のトークン化を行います。 最後に決済実行APIを呼び出し、オーソリを実行します。 今回もフロントはVue.js、バックエンドはnode.js(+ Express)で実装しました。   実装メモ: ■フロント ・axiosでバックエンドのAPIを呼び出し、決済登録API・決済実行APIのレスポンスを受け取っている ・カード情報を引数に設定してトークンJSを呼び出す ・トークンJSでエラーの場合はエラーコードがリスト形式で複数返る ・APIキーはパブリックキーを使う Vue.js <script src="https://js.fincode.jp/v1/fincode.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> let fincode = Fincode('p_prod_XXXXXXXXXXXXXXXX'); const app = new Vue({ el: '#app', data() { return { card: { card_no: '', expire: '', holder_name: '', security_code: '' }, expire_mm: '', expire_yy: '', amount: "500", id: '', access_id: '', } }, methods: { submit() { this.card.expire = this.expire_yy + this.expire_mm; //axiosでリクエストデータ送信(①fincode決済登録呼び出しAPI) axios.post("http://localhost:3000/payment", { amount: this.amount }) .then((res) => { console.log(res); //決済登録APIのレスポンスを設定 this.id = res.data.id;; this.access_id = res.data.access_id; //トークンJS実行 fincode.tokens(this.card, (status, response) => { if (200 === status) { // トークンJS リクエスト正常時の処理 console.log(response); // 決済実行APIのリクエストパラメータを設定 const transaction = { id: this.id, access_id: this.access_id, token: response.list[0].token, //トークンJSで取得した値 }; //axiosでリクエストデータ送信(②fincode決済実行呼び出しAPI) axios.post("http://localhost:3000/execute", { data: transaction }).then((res) => { // リクエスト正常時の処理 console.log(res); alert("決済が完了しました"); }) .catch((err) => { console.log(err); }); } else { // トークンJS リクエストエラー時の処理 console.log(response); response.errors.forEach(error => { alert(error.error_message + "(" + error.error_code + ")"); }); } }, () => { // トークンJS 通信エラー処理。 alert("通信エラーが発生しました。しばらく経ってから再度お試しください。"); } ); }) .catch((err) => { console.log(err); }); }, } }); </script> ■バックエンド 2つのAPIを作成し、fincodeのAPIを呼び出す。 ①決済登録呼び出しAPI ・requestモジュールでfincode(決済登録API)にPOST通信 ・決済登録APIのレスポンスをフロントに渡す   ②決済実行呼び出しAPI ・requestモジュールでfincode(決済実行API)にPUT通信 ・決済実行APIのレスポンスをフロントに渡す ※①②とも、fincodeと通信する際のAPIキーはシークレットキーを使う。 node.js(①決済登録呼び出しAPI) var express = require('express'); var router = express.Router(); /* ①fincode決済登録呼び出しAPI * http://localhost:3000/payment にPOSTを投げると、 * 決済登録APIのレスポンスをJSON形式で返す。 */ router.post('/', function (req, res, next) { "use strict"; const console = require("console"); const request = require("request"); const API_KEY = "Bearer m_prod_XXXXXXXXXXXXXXXX"; const BASE_URL = "https://api.fincode.jp"; const endpoint = "/v1/payments"; const DATA = { pay_type: "Card", job_code: "CAPTURE", amount: req.body.amount, }; const options = { url: BASE_URL + endpoint, proxy: PROXY_URL, headers: { "Content-Type": "application/json; charset=utf-8", Authorization: API_KEY, }, json: DATA, } main(); function main() { request.post(options, (error, response, body) => { if (200 != response.statusCode) { console.log("ERROR"); console.log(body); } else { console.log("SUCCESS"); console.log(body); res.header('Content-Type', 'application/json; charset=utf-8') res.send(body); } } ); } }); module.exports = router; node.js(②決済実行呼び出しAPI) var express = require('express'); var router = express.Router(); /* ②fincode決済実行呼び出しAPI * http://localhost:3000/execute にPOSTを投げると、 * 決済実行APIのレスポンスをJSON形式で返す。 */ router.post('/', function (req, res, next) { "use strict"; const console = require("console"); const request = require("request"); const API_KEY = "Bearer m_prod_XXXXXXXXXXXXXXXX"; const BASE_URL = "https://api.fincode.jp"; const ID = req.body.data.id; const DATA = { pay_type: "Card", access_id: req.body.data.access_id, token: req.body.data.token, method: "1", }; console.log(DATA); main(); function main() { var endpoint = "/v1/payments/{id}".replace("{id}", ID); request.put( { url: BASE_URL + endpoint, proxy: PROXY_URL, headers: { "Content-Type": "application/json; charset=utf-8", Authorization: API_KEY, }, json: DATA, }, (error, response, body) => { if (200 != response.statusCode) { console.log("ERROR"); console.log(body); } else { console.log("SUCCESS"); console.log(body); res.header('Content-Type', 'application/json; charset=utf-8'); res.send(body); } } ); } }); module.exports = router; 上記を実行した結果、ダッシュボードから決済成功したことを確認できました。 (参考)決済実行APIからのレスポンス SUCCESS { acs: '0', shop_id: 's_21121014979', id: 'o_0TiOWd3DT5uWD-0nCOiZ4g', pay_type: 'Card', status: 'CAPTURED', access_id: 'a_Jou6XFKoT6KUjHNpG6XXKw', process_date: '2022/04/25 10:16:23.681', job_code: 'CAPTURE', item_code: '0000990', amount: 500, tax: 0, total_amount: 500, customer_group_id: null, customer_id: null, card_no: '************1234', card_id: null, expire: '2411', holder_name: 'Test', card_no_hash: '0e4802a01114169feded374beed5f7d810be72c4aed0118285169b2b57fd55ec', method: '1', pay_times: null, forward: '15250', issuer: '9999999', transaction_id: '2204251016602250501600919723', approve: ' 067736', auth_max_date: null, client_field_1: null, client_field_2: null, client_field_3: null, tds_type: '0', tds2_type: null, tds2_ret_url: null, tds2_status: null, merchant_name: null, send_url: null, subscription_id: null, error_code: null, created: '2022/04/25 10:16:22.771', updated: '2022/04/25 10:16:23.681' } あわせて読みたい開発者におすすめの記事 fincodeの決済APIの利用する仕組みと方法 エンジニアファーストの決済ソリューション–fincodeの強みとは

開発チーム