【 stripe 】【Stripe】フロー機能を使ってアプリと Stripe のシンクロ率向上【CustomerPortal】

2023.08.24 stripeコラム

こんにちは、サイオステクノロジー佐藤陽です。
今日も Stripe の CustomerPortal のお話をしていきたいと思います。

CustomerPortal にはフローという機能が存在しており
この機能を使う事で、アプリと Stripe とのシンクロ率を高める事ができます。

はじめに
フロー機能のメリット
フロー機能実装
- フロー機能を使わない場合
  - CustomerPortalConfiguration作成
  - Session作成
- フロー機能を使う場合
  - CustomerPortalConfiguration作成
  - Session作成
おまけ
まとめ

はじめに

Stripe の Customer Portal については、こちらをご覧ください。
Customer Portal には、現在契約しているサブスクリプションのプラン内容や、支払い金額、更新情報などが表示されます。
ただ表示するだけではなく、支払い方法や、請求先住所の登録・変更なども行う事ができます。

そしてここが肝なんですが、CustomerPortal はそれ単体で使うに限らず、部分的にアプリケーションに組み込んで使う事ももちろんできます。

例えば、

サブスクリプションの契約などはビジネスロジックが多く含まれているので自分たちで作成したい
支払い方法の登録などは実装の手間を省くために CustomerPortal の機能を活用したい

といった感じの要求があった場合、以下のようなイメージで作成することが可能です。
なお、この時CustomerPortalは「支払い方法の変更」のみを有効としています。

このように部分的にStripe機能を使う事で、スピード感をもってアプリの開発が行えます。
このままでも十分なのですが、更にアプリとのシンクロ率を高める方法があります。

それがフロー機能です。
フロー機能を使う事で、リダイレクトの挙動を簡便化し、UX体験を向上させる事ができます。

フロー機能のメリット

では通常のCustomerPortalとフロー機能を使った場合の違いを見てみます。
画面遷移を2Step減らすことができ、UX体験の向上に繋がります。

※解像度悪くてすみません、雰囲気で掴んでください。

フロー機能実装

ではどうやって実装していくかを見ていきます。

大きな流れとしては

PortalConfiguration作成(CreatePortalConfiguration)
作成したConfigurationを元にSessionを作成(CreatePoralSession)

という流れです。

フロー機能を使わない場合

CustomerPortalConfiguration作成

今回は支払い方法の変更のみを有効とします。
ビジネス情報は適当な値を入れています。

curl -L 'https://api.stripe.com/v1/billing_portal/configurations' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Bearer ${STRIPE_SECRET_KEY}' \
-d 'features[payment_method_update][enabled]=true' \
-d 'business_profile[privacy_policy_url]=https://example.com/privacy' \
-d 'business_profile[terms_of_service_url]=https://example.com/terms'

Session作成

作成したConfigurationID(bpc_)を元にSessionを作成します。

curl -L 'https://api.stripe.com/v1/billing_portal/sessions' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Bearer ${STRIPE_SECRET_KEY}' \
-d 'customer=cus_OVRyxuuOIjB2c1' \
-d 'return_url=https://example.com/account' \
-d 'configuration=bpc_1NiRVqFKJ9JA5A9AOL2GqqA7'

フロー機能を使う場合

CustomerPortalConfiguration作成

ここはフロー機能を使わない場合と一緒です。

curl -L 'https://api.stripe.com/v1/billing_portal/configurations' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Bearer ${STRIPE_SECRET_KEY}' \
-d 'features[payment_method_update][enabled]=true' \
-d 'business_profile[privacy_policy_url]=https://example.com/privacy' \
-d 'business_profile[terms_of_service_url]=https://example.com/terms'

Session作成

フローを使わない場合に対して、flow_dataのパラメータを追加しています。

curl -L 'https://api.stripe.com/v1/billing_portal/sessions' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Bearer ${STRIPE_SECRET_KEY}' \
-d 'customer=cus_OVRyxuuOIjB2c0' \
-d 'return_url=https://example.com/account' \
-d 'configuration=bpc_1NiRVqFKJ9JA5A9AOL2GqqB7' \
-d 'flow_data[type]=payment_method_update' \
-d 'flow_data[after_completion][type]=redirect' \
-d 'flow_data[after_completion][redirect][return_url]=https://example.com/account'