Flask/Checkout

PythonのFlaskチェックアウトを使ったかんたんな支払いを行う実装サンプルについて説明します。ソースコードはこちらからどうぞ。

インストール

最初に今回使用するFlaskとPAY.JPのPythonライブラリをインストールしましょう:

pip install Flask payjp

アプリケーション

まずは支払い処理を行うアプリケーション部分を実装します。 app.py というファイルを作成し、PAY.JPの設定を書きましょう:

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

SECRET_KEY = os.environ['SECRET_KEY']
PUBLIC_KEY = os.environ['PUBLIC_KEY']

payjp.api_key = SECRET_KEY

app = Flask(__name__)

環境変数の SECRET_KEY PUBLIC_KEY から各自のシークレットキー、パブリックキーを読み込み、PAY.JPライブラリのAPIキーにセットしています。特にシークレットキーは支払い処理を含むさまざまな処理を行う重要なキーなので、ハードコードせずに扱うようにしてください。

次に、支払いフォーム画面を表示するメソッドを定義しましょう:

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


@app.route('/pay', methods=['POST'])
def pay():
    amount = 1000
    customer = payjp.Customer.create(
        email='example@pay.jp',
        card=request.form['payjp-token']
    )

    payjp.Charge.create(
        amount=amount,
        currency='jpy',
        customer=customer.id,
        description='flask example charge'
    )
    return render_template('pay.html', amount=amount)

index() では、パブリックキーを引数に index.html を生成しています。

pay() では、トークンIDからカードを所有する顧客を作成し、作成した顧客IDを指定して1000円の支払い処理を行っています。トークンIDは後述するチェックアウトフォームから送信されるものです。

最後に amount を引数に pay.html を生成し、支払い完了画面を表示しています。

テンプレート

次は、画面を表示するテンプレート部分を実装します。まず共通レイアウトを構成するテンプレートを ./templates/layout.html に配置しましょう:

<!DOCTYPE html>
<html>
<head>
  <title>PAY.JP Flask Example</title>
</head>
<body>
  {% block content %}{% endblock %}
</body>
</html>

次に、支払いフォーム画面を ‘./templates/index.html` に作成します。支払いフォームは、<script> タグを1行で、デザインされた決済フォームを生成するチェックアウト を使ったフォームです:

{% extends "layout.html" %}
{% block content %}
  <form action="/pay" method="post">
    <article>
      <label>1000円のお支払い</label>
    </article>

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

{{ public_key }} という変数にはアプリケーションの index() でテンプレートを表示するときに引数として各自のパブリックキーをセットします。

最後に支払い後の完了画面を ./templates/pay.html に作成します:

{% extends "layout.html" %}
{% block content %}
  <p>{{ amount }}円のお支払いが完了しました。</p>
{% endblock %}

{{ amount }} にはアプリケーションの pay() で支払った金額をセットして表示しています。

これだけで支払いを行うサンプルができました。

起動する

実際に作ったアプリケーションを起動してみましょう。環境変数の PUBLIC_KEYSECRET_KEY には各自のキーをセットしてください:

PUBLIC_KEY=pk_test_0383a1b8f91e8a6e3ea0e2a9 SECRET_KEY=sk_test_c62fade9d045b54cd76d7036 python app.py

http://localhost:5000 に作成した支払いフォーム画面が表示されます。下記の情報を入力し、支払い処理を試してみましょう。

  • カード番号: 4242424242424242
  • 有効期限: 1220
  • CVC: 123
  • カード名義: YUI ARAGAKI

チェックアウトリファレンス

Flask