1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

PAY.JP とは?

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

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

投げ銭箱を作ってみた!

言語

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

対応している言語

  • Python
  • Ruby
  • PHP
  • Javascript
  • Java
  • Go

できたもの

index.html
pay.html

コード

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>

すごいところ

card-info-form

<script type="text/javascript"
        src="https://checkout.pay.jp"
        class="payjp-button"
        data-key="{{ public_key }}">
</script>
  • これを書くだけで、「カードで支払う」ボタンと
    カード情報入力フォームが出来ます!すごく便利:cheese::cake:
  • app.pyが30行ほどしかない ->
    少ないコードで実装ができる!

分かったことなど

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

おわりに

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?