Flask/Checkout

この記事では、Python のFlaskフレームワークとPAY.JPのチェックアウト機能を用いて、簡単な支払い処理を実装するサンプルについて説明します。ソースコードはpayjp-example/flask at master · payjp/payjp-exampleにて公開されています。

インストール

まず、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 を指定して1,000円の支払い処理を行っています。トークン 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 タグ一行でデザインされた決済フォームを生成するチェックアウトを使用しています。

{% 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_KEY と SECRET_KEY には、各自のキーを設定してください。

PUBLIC_KEY=YOUR_PUBLICK_KEY SECRET_KEY=YOUR_SECRET_KEY python app.py

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

項目 値
カード番号 4242424242424242
有効期限 12/20
CVC 123
カード名義 PAY TARO

参考情報