サブスクリプションサービスを提供する際、「契約や請求内容を管理する画面と機能」の開発または運用フローの策定が必要です。
月々の請求だけでなく、未払いが発生した場合のリカバリーや回収・キャンセル理由の収集と分析など、サービスを成長させようとすると、少なからず開発リソースを確保する必要が生まれます。
Stripeのカスタマーポータルで「作らない請求管理」を実現する
Stripe Billingを利用してサブスクリプションサービスを提供している場合、カスタマーポータルを利用して、コードを書かずにマイページを提供できます。
https://support.stripe.com/questions/billing-customer-portal?locale=ja-JP
Stripeダッシュボードから「カスタマーポータルリンク」を生成すると、URLを埋め込むだけでサービスに請求マイページを追加できます。
「カスタマーポータル上での出来事」は、Webhook経由でシステムと連携する
カスタマーポータルでは、請求履歴や領収書PDFのダウンロードだけでなく、プランの変更やクレジットカードの変更・キャンセルなどの操作も行えます。
カスタマーポータル上で顧客がサブスクリプションや決済情報に関する操作を行った場合、StripeはWebhookイベントをシステムに送信します。
AWSのAmazon EventBridgeやZapierを利用して、プラン変更や支払い情報の更新などの[状態変化]をシステムに連携させましょう。
APIを利用して、ローコードなマイページカスタマイズに移行する
ノーコードにカスタマーポータルを組み込みした場合、次のような制約が発生します。
- 請求マイページへのアクセスに、「メールを利用した認証ステップ」が必ず発生する
- 同一メールアドレスのCustomer情報が存在する場合、「古いCustomer情報」を参照しない
- マイページに表示する項目や機能を、ユーザーや条件ごとにカスタマイズできない
これらの問題をクリアするために、APIを利用してローコードにカスタマーポータルを利用できます。
BillingPortal APIを利用して、個別の設定を作成する
APIを利用すると、複数のカスタマーポータル設定が行えます。
const sc = await stripe.billingPortal.configurations.create({
business_profile: {
privacy_policy_url: 'https://example.com/privacy-policy',
terms_of_service_url: 'https://example.com/terms-of-service',
},
features: {
subscription_cancel: {
enabled: false,
},
subscription_update: {
enabled: false,
default_allowed_updates: null,
products: null,
},
invoice_history: {
enabled: true
}
},
default_return_url: 'https://stripe.com'
})
BillingPortal 設定IDを利用して、マイページセッションを作成する
ユーザーを特定条件のマイページに遷移させたい場合、前もって作成した設定IDを引数に追加します。
const session = await stripe.billingPortal.sessions.create({
configuration: 'bpc_xxxxxxxx',
customer: 'cus_xxxxx'
})
return c.text(session.url)
「カスタムプランを提案中の顧客のみ、プラン変更やキャンセルを問い合わせベースにする」などのカスタマイズを実現できます。
ディープリンクを利用した、段階的な「埋め込み化」を計画する
ある程度サービスが成長し、開発リソースが確保できるようになると、マイページもリダイレクトから埋め込みに切り替わるフェーズが発生します。
とはいえカスタマーポータルが担っている機能を、すべて一度に切り替えるほどのリソースを確保するのは大変です。
Stripeでは、カスタマーポータルの「ディープリンク」を利用して、「段階的なホワイトラベル化」ができます。
このコードサンプルでは、サブスクリプションのプラン変更画面に直接移動できます。
const session = await stripe.billingPortal.sessions.create({
customer: 'cus_xxxxx',
flow_data: {
type: 'subscription_update',
subscription_update: {
subscription: 'sub_xxxxx',
}
}
})
また、「プランと数量の変更」と「割引コードの設定」の２つを行う「確認画面」に直接遷移することもできます。
const session = await stripe.billingPortal.sessions.create({
customer: 'cus_xxxxx',
flow_data: {
type: 'subscription_update_confirm',
subscription_update_confirm: {
subscription: 'sub_xxxx',
discounts: [{
promotion_code: 'promo_xxxxx'
}],
items: [{
id: 'si_xxx',
price: 'price_1xxxx',
quantity: 2,
}]
}
}
})
カスタマーポータルとカスタマーポータルのディープリンクの違い
2023年8月時点での、両機能の違いを簡単にまとめました。
| カスタマーポータル | カスタマーポータル（ディープリンク） |
|---|---|
| ポータルページを経由して操作する | 操作画面・確認画面に、直接移動する |
| １セッションで、複数の操作が可能 | 設定した操作のみ |
| - | プラン変更やキャンセル前に、独自の処理を挟める |
| 複数の設定を作成・管理できる | APIの引数でのみ定義できる |
「サービスの利用状況（転送量やユーザー数）によって、プラン変更や解約を制限したい」ケースなどでも、カスタマーポータルのディープリンクで対応できます。
サービスの「コア機能開発への集中」と「将来的なカスタマイズ性の確保」を、Stripe カスタマーポータルで両取りしよう
Stripeの請求マイページ提供機能「カスタマーポータル」は、URLを利用したノーコード組み込みから、ディープリンクや設定IDを駆使したカスタマイズされた体験の提供まで、幅広いユースケースに利用できます。
また、Webhookを利用したシステム連携に対応したアーキテクチャを用意することで、収益管理や財務管理まで自動化・サービス連携を可能にします。
請求管理や顧客向けのマイページ機能の開発を最小限に抑え、さらに成長したタイミングでの価格改定やデザインガイドラインの導入にも対応できるカスタマイズ性を確保するため、ぜひカスタマーポータルをサービス開発にご活用ください。