SIOS Tech. Lab | エンジニアのタメになるOSS・クラウド・認証の技術トピックス 
こんにちは、サイオステクノロジー 佐藤 陽です。
今日も Stripe の CustomerPortal のお話をしていきたいと思います。
CustomerPortal にはフローという機能が存在しており
この機能を使う事で、アプリと Stripe とのシンクロ率を高める事ができます。
目次
はじめに
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'おまけ
今回は「支払い方法の更新」を対象にフロー機能を活用しましたが
サブスクリプションのオブジェクトに対してもフロー機能を活用することができます。
ただ、顧客の情報更新には対応していないんです。
是非customer_updateのfeaturesについても対応してほしいところですね。
まとめ
今回はフロー機能を使って、アプリと Stripe のシンクロ率を向上させる方法をご紹介しました。
非常に便利な機能なので是非使ってみてください！
ではまた！
Be the first to comment