- Stripeを用いて、顧客の支払処理に保存したクレジットカードを使う方法とは？
- StripeのCustomer API・Payment Intent APIの使い方とは？
本記事ではこのような疑問を解決します。
前回こちらの記事でStripeを用いた、顧客登録とクレジットカード保存の方法を解説しました。
Stripeを用いた、顧客登録とクレジットカード保存の方法とは？StripeのCustomer API・Setup Intent APIの使い方とは？ 本記事ではこのような疑問を解決します。Webアプリ開発の中でStripeを利用し[…]
今回は上の記事の続きとして、
顧客の支払処理に保存したクレジットカードを使う方法を解説していきます。
なお、本記事では前回と同様WebフレームワークにDjangoを使用します。
（※他の言語・FWでも書き方が異なるだけで実装方法は基本的に同じです。）
顧客の支払処理に保存したクレジットカードを使う処理の流れ
今回は、
「会員登録を済ませたログインユーザーが以前登録したクレジットカードで支払処理をする」
という流れで話を進めていきます。
①ユーザー側：支払画面にアクセスする
①開発者側：
・バックエンド（views.py）
→テンプレートへ渡す支払金額を指定する
→Customerオブジェクトから顧客のカード情報を取得する
・フロントエンド（stripe.js）
→バックエンドから受け取ったデータ（支払金額・カード情報）を表示する
②ユーザー側：利用するクレジットカードを選択し、支払確定ボタンを押す
②開発者側：
・バックエンド（views.py）
→Customerオブジェクトから顧客が選択したカード情報を取得する
→Payment Intentオブジェクトを生成する
→任意で支払情報をDBに保存する
③ユーザー側：支払い完了画面等が表示される
③開発者側：
・バックエンド（views.py）
→支払い完了ページ等を表示する
顧客登録とクレジットカード保存の実装手順
ここでは以下のDjangoプロジェクトを前提とし、顧客の支払処理に保存したクレジットカードを使う処理に関係するファイルのみを操作します。
sampleproject ├── sampleapp │ ├── __init__.py │ ├── admin.py │ ├── apps.py │ ├── migrations │ │ └── （中身省略） │ ├── models.py │ ├── tests.py │ └── views.py ├── sampleproject │ ├── __init__.py │ ├── __pycache__ │ │ └── （中身省略） │ ├── asgi.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── templates │ ├── payment.html │ └── thanks.html └── manage.py
バックエンド（Django）側の設定
DjangoでのStripe初期設定をする（settings.py）
#Stripeのダッシュボードからシークレットキーとパブリックキーをコピペする
STRIPE_API_KEY = 'Stripeのシークレットキー'
STRIPE_PUBLISHABLE_KEY = 'Stripeのパブリックキー'URLを設定する（urls.py）
urlpatterns = [
path('payment/', views.payment, name="payment"),# 支払画面を表示する
path('payment_post/', views.payment_post, name="payment_post"),# 支払処理を行う
path('thanks/', views.thanks, name="thanks"),# 支払処理完了ページ等を表示する
]支払いページを返す処理を記述する（views.py）
まずは顧客が支払う金額を指定します。
支払金額は任意の方法で数値を取得しましょう。
今回は支払金額を2,000円とします。
次に事前に生成してあるCustomerオブジェクトから、顧客のカード情報を取得します。
今回は1人の顧客が2つのカードを登録しているという想定です。
from django.conf import settings
import stripe
def payment(request):
# 何かしらの方法で、StripeのCustomerオブジェクトIDをDBに格納しておく→Userテーブル（orその他テーブル）
user = request.user
customer_id = user.stripe_customer_id# CustomerオブジェクトIDを格納するフィールド名（任意）
# 支払金額（amount）を何かしらの方法で指定する→ECサイトであればカート内商品の合計金額など
amount = 2000
stripe.api_key = settings.STRIPE_API_KEY
card_list = stripe.Customer.list_payment_methods(
customer_id,# CustomerオブジェクトID
type="card",
)
context = {
"amount": amount,# 支払金額
"card_list": card_list,# 顧客のカード情報
}
template_name = 'payment.html'
return render(request, template_name, context)支払情報が送信された後の処理を記述する（views.py）
まずは支払画面からPOST送信された情報（顧客が選択したカードの情報）をもとに、
Customerオブジェクトから、支払処理に使用するカードを取得します。
次に、支払いに必要な情報を挿入したPayment Intentオブジェクトを生成します。
これで支払処理自体は完了です。
なお、支払処理完了後に任意でデータベースにPayment Intentオブジェクトのidを保存するのも良いでしょう。
※今回はエラーが起きた場合の処理は省略します。
def payment_post(request):
user = request.user
customer_id = user.stripe_customer_id
stripe.api_key = settings.STRIPE_API_KEY
stripe_card = stripe.Customer.list_payment_methods(
customer_id,
type="card",
)
# 今回はStripeからのカード情報の取得順によって、支払いに使用するカードを指定する
card_number = request.POST.get('card_number')
selected_card = stripe_card["data"][int(card_number)]["id"]
amount = request.POST.get('amount')
payment_intent = stripe.PaymentIntent.create(
amount=amount,# 支払金額
currency='jpy',# 利用通貨
customer=customer_id,# CustomerオブジェクトID
payment_method=selected_card,# 支払いに使用するクレジットカード
off_session=True,# 支払いの実行時に顧客が決済フローに存在しないことを示す
confirm=True,# PaymentIntentの作成と確認を同時に行う
)
# PaymentIntentオブジェクトIDをDBに保存する場合は、「payment_intent.id」をsave()でDB保存する
return redirect('app:thanks')
# 単純に、支払完了ページを表示する処理
def thanks(request):
template_name = "thanks.html"
return render(request, template_name)フロントエンド（HTML・JavaScript）側の設定
支払いページを作成する（payment.html）
<!DOCTYPE html>
{% load static %}
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<form action="{% url 'app:payment_post' %}" method="POST">
<input type="hidden" name="amount" value="{{ amount }}"/>
<p>合計金額：{{ amount }}円</p>
{% for c in card_list %}
<div>
<!-- 今回はStripeからのカード情報の取得順で使用するカードを指定 -->
<input type="radio" name="card_number" value="{{ forloop.counter0 }}" required/>
<!-- 顧客が登録してあるカード情報の表示→表示する項目は選択するカードたちを区別できるものにする -->
<p>{{ c.card.brand }}<br>{{ c.card.exp_month }}<br>{{ c.card.exp_year }}<br>{{ c.card.last4 }}</p>
</div>
{% endfor %}
<button type="submit">支払い確定</button>{% csrf_token %}
</form>
</body>支払処理完了後に表示するページのファイルを作成する（thanks.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>支払完了</p>
</body>まとめ
以上がStripeを用いた、顧客の支払処理に保存したクレジットカードを使う方法になります。
簡単に流れをおさらいすると、
事前に生成されたCustomerオブジェクトから、支払いに使うカード情報を取得し、
そのカード情報を引数に指定したPayment Intentオブジェクトを生成するというプロセスです。
本記事が、少しでもStripeを用いたWebアプリ開発の手助けになれれば幸いです。
実務1年未満でもOK！フリーランスエンジニアの案件獲得方法はこちら！
フリーランスエンジニアが案件獲得方法とは？自ら営業せずに案件を獲得するには？実務経験1年未満でも大丈夫なの？ 本記事ではこのような疑問を解決します。これからフリーランスエンジニアとして独立したい方は、兎にも角にも案件の獲得が急務です[…]
