【Stripe】CustomerにdefaultPaymentを設定する3つの方法

Stripe Customerにデフォルト支払設定を保存する
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。

【7/5開催】azd+Terraform? ~ポイントを押えてAzure上へのアプリケーション環境をラクチン構築~
ツールの概要説明から、実際の開発におけるポイントをお伝えします!

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!

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

ご挨拶

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

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

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

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

それでは本編です。

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

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

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

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

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

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

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

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

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

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

Checkoutでカード支払情報を受けつける方法

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

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

Checkoutのサンプルをモード違いで変更

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

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

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

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

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

カスタマーポータルでカード支払情報を受け付ける方法

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

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

カスタマーポータルのサンプル画面

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

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

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

SetupIntentsでカード情報を収集する方法の手順

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

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

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

SetupIntentsでカード支払情報を入力するサンプル画面

終わりに

どもども!ひとまず、すべての実装パターンでサンプルプログラムを実装することができました。今後は、実際に作成したコードベースでブログを作成していきたいと思います。

一日に三時間程度、Stripeのリファレンスとにらめっこしているので、だいぶ目が慣れましたね。まだまだ社内でのナレッジ有識者には、ほど遠いと思うので頑張って追いかけます****(๑•̀ㅂ•́)و****

社内の有識者のブログはこちらです。

アバター画像
About 龍:Ryu 109 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる