PAY.JP とは?

もっともかんたんな決済サービス

シンプルなAPIと豊富なライブラリで、かんたんにクレジットカード決済を導入することができます。
柔軟な料金体系とスムーズな審査で、あなたのビジネスを支援します。

投げ銭箱を作ってみた！

言語

今回も、僕が最も理解している言語であろう、PythonのFlaskを使用します。なんとPAY.JPにはPython用のライブラリもあり、簡単に支払処理を行うことができます！

対応している言語

Python
Ruby
PHP
Javascript
Java
Go

できたもの

コード

app.py

from flask import Flask, render_template, request
import payjp
import os

app = Flask("__app__")

payjp.api_key = os.getenv("SECRET_KEY")
public_key = os.getenv("PUBLIC_KEY")

@app.route("/")
def index():
    return render_template("index.html", public_key=public_key)

@app.route("/charge", methods=["POST"])
def charge():
    token = request.form["payjp-token"]
    amount = int(request.form["amount"])
    payjp.Charge.create(
        amount=amount,
        currency="jpy",
        card=token,
        description="投げ銭"
    )
    return render_template("pay.html",amount=amount)

if __name__ == "__main__":
    app.run()

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投げ銭箱</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>投げ銭箱</h1>
    <div>
        <img src="/static/saisenbako.png" height="100px">
    </div>
    <form action="/charge" method="POST">
        <label for="amount">金額を選んでください：</label>
        <select name="amount" id="amount">
           <!-- 省略 -->
        </select>
        <script type="text/javascript"
                src="https://checkout.pay.jp"
                class="payjp-button"
                data-key="{{ public_key }}">
        </script>
    </form>
</body>
</html>

pay.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投げ銭箱 - {{ amount }}円の支払いが完了しました</title>
    <style>
        body{
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>
<body>
    <h1>投げ銭箱 - 支払いありがとうございますq(≧▽≦q)</h1>
    <p>支払金額: {{ amount }}円</p>
    <a href="/">ホームに戻る</a>
</body>
</html>

すごいところ

<script type="text/javascript"
        src="https://checkout.pay.jp"
        class="payjp-button"
        data-key="{{ public_key }}">
</script>

これを書くだけで、「カードで支払う」ボタンと
カード情報入力フォームが出来ます！すごく便利
app.pyが30行ほどしかない ->
少ないコードで実装ができる！

分かったことなど

テスト環境でも十分開発できる
環境変数の大切さ

おわりに

今回はPAY.JPでクレカ決済を導入してみました！
色々なことの勉強になるので、まずは自分に合った言語で
導入を検討するといいんじゃないでしょうか:)
最後まで読んでいただきありがとうございます！
いいねやコメントをしてくれると励みになります！