今回は、StripeでCustomerにデフォルトの支払い情報を設定する方法についてまとめました。調べた限りだと、3つのパターンがありました。Checkout・Customer Portal・SetupIntentsのそれぞれの方法について、必要となるAPIをまとめています。Webhookを使用して設定する方法が特に見つけにくかったです！

ご挨拶

急に寒くなったので大急ぎで衣替えをしたけども、冬服が思った以上になくて驚愕した龍ちゃんです。ついでにお気に入りのパーカーのファスナーが壊れたのでしょげました。

さて、今回は「Stripe」のお話になります。縁があってStripeの試験に合格しました。そこからStripeのAPIをこねくり回していたのですが、一つブログにまとめるまでに至ったので書いていきたいと思います。

今回は、「Stripe Customerにデフォルトの支払い設定として、カード情報を登録する」というシナリオそう想定して解説していきたいと思います。Stripeでカード情報を収集する方法は、複数あるため状況によって使い分ける必要があります。この辺りは、要件に沿って考える必要があります。知ってるのと知らないのでは大きい違いだと思うので、知らない方法があったらこっそり勉強しましょう。

前提として、すでにStripe上にCustomer情報が登録されていると仮定しています。

それでは本編です。

Stripeでカード支払情報を収集する方法について

まず、Stripeでカード支払い情報を収集する方法の分類について書いていきます。その後、書く方法の実装方法について解説を入れていきます。

Stripeでカード情報を収集する方法分類

カードを収集する方法に関しては、知りうる限りで3パターンあります。

ジャンル分けとしては、「ノーコード」「ローコード」「ハイコード」の3つになります。【Customer Portal】に関しては、ノーコードで支払いを受け取ることもできます。【Checkout】では、一つのAPIで構築済みのカード情報を入力する画面のURLを発行することができます。【Setup Intents】では、Stripeが提供している【Stripe.js】と組み合わせて画面を構築することができ自由度が高いです。

やはりコード量によってコストが上がるので、要件にあった選択をする必要大です。それでは、各項目の実装方法について解説していきます。

Checkoutでデフォルト支払情報としてカードをセットする

Checkoutでデフォルトの支払い設定をする場合は、こちらの公式ページが参考になります。

大前提として、カスタマーと紐づけるために「顧客」の登録が必要になります。継続的に利用しない場合に関しては、作成せずとも「Checkout」を作成することができます。以下に手順と必要なAPIについて明記します。

Checkout Session作成：Create a Sessionをmode=”setup”で実行する
WebhookでCheckout Sessionのcompletedを受信
- カスタマー情報更新API：Update a customerでdefault_sourceを更新

Checkoutを用いて、カスタマーのデフォルト支払情報にセットするためにはWebhookを使用する必要があります。Checkoutでの処理終了を検知して、入力されたカード情報を受け取ります。受け取った情報をもとに、カスタマーアップデート処理を実装して、登録したカード情報をデフォルト支払情報としてセットします。

余談としてmode=”subscription”でCheckoutを使用した場合は、自動でデフォルト支払設定になるという公式リファレンスに記載があります。mode=”payment”の場合では、payment_intent_data.setup_future_usageというパラメータを使用することで将来の支払いに対して情報を保存できると記載あります。こちらは、Customerのデフォルト支払設定に紐づけられるわけでなく、Customerに支払情報が保存されます。次回のCheckoutを起動した際に、カード情報が入力された状態で表示されます。以下にサンプルを示します。

Checkoutのみを使い続ける場合では、デフォルトの支払い設定に入れる必要はありません。

サブスクリプションでCheckoutを使用する場合に関しては、今回調査しなかったので次回調査します。

カスタマーポータルでデフォルト支払情報としてカードをセットする

カスタマーポータルは「ノーコード」と「ローコード」の二つの作成方法があります。とりあえず、Stripeの公式が出しているデモを見ましょう。ノーコードでは、カスタマー登録をやってくれるためStripeのダッシュボードのみで操作をすることができます。

今回は、APIを経由してカスタマーポータルを発行する「ローコード」の解説を行っていきます。「ローコード」では、カスタマーと紐づけるために「顧客」の登録が必要になります。カスタマーはすでに存在していると仮定して話を進めていきます。以下に手順と必要なAPIについて明記します。

カスタマーポータル設定作成：Create a portal configuration
カスタマーポータルリンク作成：Create a portal session

カスタマーポータルでの設定内容についてはこちらのページが参考になります。視覚的には「ノーコード」でカスタマーポータルサイトを作ることができる、ダッシュボードの機能を使用するとわかりやすいです。カスタマーポータルで支払情報を保存する場合は、**features.payment_method_update**をオンにする必要があります。

作成した設定のIDを使用して、カスタマーポータルのリンクが発行されます。以下にカスタマーポータルのサンプルを置いておきます。

カスタマーポータルでは、特に設定することなくデフォルトの支払い設定の項目がついてきます。

SetupIntentsでデフォルトの支払い情報としてカードをセットする

バックエンドとフロントエンドの両方の実装が必要になるため、3つの手法の中で最も実装が重い内容になります。自前で実装するため、既存のWebページで決済を加えたい場合は選択肢に入ります。公式のページでがっつりと説明されているので参考にしましょう。大前提として、カスタマーと紐づけるために「顧客」の登録が必要になります。カスタマーはすでに存在していると仮定して話を進めていきます。以下に手順と必要なAPIについて明記します。

セットアップインテントを発行：Create a SetupIntent
フロント側から支払情報を送信：stripe.confirmSetup(option)

payment_methodを取得する方法は、Webhookで取得する方法とStripe.jsを利用して収集する方法が2パターンあります。

フロントでclientSecretから情報を取得する：stripe.retrieveSetupIntent(clientSecret)
フロントで画面遷移を伴わず取得する：stripe.confirmSetup(option)
- stripe.confirmSetup(option)でredirect:”if_required”を設定する。
WebhookでSetupIntentsのsuccededを受信する

上記の方法のいずれかでpayment_methodを取得して、カスタマー情報更新API：Update a customerでdefault_sourceを更新することでデフォルトの支払い設定を行うことができます。

SetupIntentsを使用して、カード情報入力画面を作成した場合のサンプルを以下に示します。