コードを書かずに、 請求業務やサブスクリビジネスを始める方法

JP_Stripes仙台 Re:Boot コードを書かずに、 請求業務やサブスクリビジネスを始め る方法 @hidetaka_dev Updated June 2023

JP_Stripes仙台 Re:Boot 👋 Hello! Hidetaka Okamoto(岡本秀高) Developer Advocate @ Stripe 💬 @hidetaka_dev ✉ [email protected] Hyogo / Kyoto, Japan

「なにをやらないか」 「なぜやらないか」 を明確にしよう 3

JP_Stripes仙台 Re:Boot Agenda ● なぜサブスク管理・請求管理がビジネスに重要か？ ● コードを書かない or 少ないコードで自動化する方法 ● 少ないリソースを活かすための「やらない決断」 4

JP_Stripes仙台 Re:Boot Agenda ● なぜサブスク管理・請求管理がビジネスに重要か？ ● コードを書かない or 少ないコードで自動化する方法 ● 少ないリソースを活かすための「やらない決断」 5

ビジネスの目的は 「収益の獲得」 写真：rupixen.com on Unsplash https://unsplash.com/ja/写真/4kIM7ED8F1A Unsplashライセンス

• https://unsplash.com/ja/

請求処理を ● 遅滞なく ● 正確かつ ● 適切に 写真：FIN on Unsplash https://unsplash.com/ja/写真/0rHxkbcvQAE Unsplashライセンス

• https://unsplash.com/ja/

なぜサブスク管理・請求管理がビジネスに重要か？ 請求方法1: 紙の請求書 + 銀行振込 ● もっとも手軽に開始できる ○ Excel / テンプレート / webサービスで作成 ○ 郵送またはメール ○ ネットバンクなどで入金をチェック ● 「入金が遅延した」場合に、 対応のための時間ロスや、未収金による資金繰り問題が発生 8

なぜサブスク管理・請求管理がビジネスに重要か？ 請求方法2: クレジットカード決済による請求 ● カード会社を利用し、「回収漏れ・遅延リスク」を最小化 ○ カード会社の与信審査による信用チェック ○ スケジュールベースの請求処理で、請求漏れを回避 ● 「カード情報を安全に入手する方法」の知識が必要 ○ 決済URLのメール送付 ○ PSP提供のカード要素を申し込みフォームに埋め込み 9

なぜサブスク管理・請求管理がビジネスに重要か？ 提供方法・経路に応じて、プラン契約ルートを選択 申し込みURLを作成して、共有する https://stripe.com/jp/payments/payment-links 個別に契約を作成し、メールや紙で共有 https://subscription.new 10

• https://subscription.new
• https://stripe.com/jp/payments/payment-links

なぜサブスク管理・請求管理がビジネスに重要か？ 「請求業務」の裏側にある、様々な見えない作業 ● ● ● ● ● サブスクリプション 契約の作成・更新 定期的な請求書や カード決済リクエストの 作成 契約内容の変更に伴う 請求額の日割り調整 未払いが発生した際の 顧客への通知 クレジットカードの 自動更新処理 ● ● ● ● ● ● ● ● クーポンでの割引 個人情報の安全な管理 決済情報の安全な管理 トライアルや 無料プランの提供 月額・年額などの 複数の請求サイクル 請求書やメールの 多言語対応 1週間以内の入金処理 会計データ化 ● ● ● ● ● ● ● ● LTV / MRRなどの計算 優良顧客の特定 未払い顧客などの 情報を検索する機能 解約率・継続率 Webhookでの 外部システム連携 SQLベースの データ探索機能 チャージバック対応 etc… 11

顧客向けの請求マイページ (Stripe Customer Portal)

Revenue and Finance Automation Life Cycle

Revenue and Finance Automation with ecosystems

JP_Stripes仙台 Re:Boot Agenda ● なぜサブスク管理・請求管理がビジネスに重要か？ ● コードを書かない or 少ないコードで自動化する方法 ● 少ないリソースを活かすための「やらない決断」 15

開発時間の41%は、 バグ対応や保守・技術負債に費やされている https://youtu.be/5aqwPlMHFM8

• https://youtu.be/5aqwPlMHFM8

https://stripe.com/docs/no-code

• https://stripe.com/docs/no-code

保守・不具合対応を減らす方法 申し込みから顧客の請求管理までノーコード化 https://stripe.com/jp/payments/payment-links https://dashboard.stripe.com/test/settings/billing/portal 18

• https://dashboard.stripe.com/test/settings/billing/portal
• https://stripe.com/jp/payments/payment-links

完全ノーコードの場合、 １顧客１サブスクリプションで設計しよう https://stripe.com/docs/customer-management/activate-no-code-customer-portal#add-ons

• https://stripe.com/docs/customer-management/activate-no-code-customer-portal#add-ons

New 設定 > CheckoutとPayment Linksから サブスクリプション作成数を制限する

IPaaSを使って、 システム連携も 少ないコードで

If: Event Driven Architecture StripeのWebhookイベントで、 「契約」と「システム」を紐付け もし This: XXなら Then: その時 That: YYする https://stripe.com/sessions 22

• https://stripe.com/sessions

ノーコード・ローコード開発では、「イベント駆動」が欠かせない 決済や契約に関する「問題」を迅速に検知・対応する AWS account AWS Step Functions workflow Email Webhook イベント Amazon Simple Email Service (Amazon SES) 契約に関する 重要なお知らせ Users AWS Lambda Amazon Simple Notification Service (Amazon SNS) Email notification Admin [対応依頼] 請求書の未払い 発生 23

Next step: ノーコードから ローコードへ 写真：Bing Hui Yau on Unsplash https://unsplash.com/ja/写真/crdXa0op5bI Unsplashライセンス

• https://unsplash.com/ja/

ノーコードからローコードへ ローコードに切り替えるタイミング ● 決済フローのカスタマイズ ○ 決済方法 / 期限付き注文ページ / etc… ● ログインユーザーとCustomerの紐付け ○ 複数プランの契約 / システム情報との連携 / etc… ● 注文商品や決済方法の「動的化」 ○ 複数商品の組み合わせ / カート機能 / 地域別送料 / etc.. 25

ローコードな決済URLの作り方 const session = await stripe.checkout.sessions.create({ success_url: 'https://example.com/thanks', cancel_url: 'https://example.com', line_items: [{ price: 'price_xxx', quantity: 1, }], mode: 'subscription', }) return Response.redirect(session.url, 302) Checkout Session URLへ リダイレクト

• https://example.com/thanks
• https://example.com

ローコードな決済URLの作り方 <a href="/checkout_session"> 注文する </a> <form method="POST" action="/checkout_session"> リンクまたは Formで遷移 <button type="submit">注文する</button> (methodに注意) </form>

Payment Links -> Checkoutでは、 Webhookイベントはほぼ同じ 28

顧客マイページ（カスタマーポータル）の ローコード化

ノーコードからローコードへ カスタマーポータルのローコード化によるメリット ● ログインユーザーとCustomerの紐付け ○ 認証処理の省略 ● マイページ操作のカスタマイズ ○ 契約変更前の事前処理 / 処理完了後のリダイレクト / etc… ● 独自UI組み込みまでの「段階的」マイグレーション 30

ローコードなマイページ組み込み

const session = await stripe.billingPortal.sessions.create({
customer: 'cus_NloPGgL7HU1dby',
return_url: 'https://example.com/account',
});

return Response.redirect(session.url, 302)

Biiling portal
Session URLへ
リダイレクト

例: [支払い情報の更新]と、 [請求履歴履歴閲覧]のみを許可

プラン更新・キャンセル処理に 独自の事前処理を挟みたい 33

New カスタマーポータル ディープリンク機能 https://stripe.com/docs/customermanagement/portal-deep-links

• https://stripe.com/docs/customer-management/portal-deep-links

カスタマーポータル ディープリンク機能 通常のカスタマーポータルとの違い カスタマーポータル ● ● ● ポータルページに遷移 ユーザーは、複数の操作が可能 ○ プラン変更・キャンセル ○ 決済・顧客情報の更新 ○ 請求履歴やPDFダウンロード ○ etc… APIで複数の設定が作成可能 ディープリンク ● ● ● ● 特定の操作フォームに直接移動 ○ プラン変更 ○ サブスクのキャンセル ○ 決済情報更新 設定した操作のみ可能 操作完了後の遷移先を指定できる セッション作成時に flow_dataとして都度定義 35

const session = await stripe.billingPortal.sessions.create({

ローコードなマイページ組み込み

customer: '{{CUSTOMER_ID}}',
return_url: 'https://example.com/account/overview',
flow_data: {
type: 'subscription_update',
subscription_update: {
subscription: '{{SUBSCRIPTION_ID}}',
},
},
});

例:
サブスクの
更新処理

ローコードなマイページ組み込み 請求マイページの段階的「ホワイトラベル化」 ノーコードで素早く開始 独自UIで「ホワイトラベル化」 ・開発工数の最小化 ・イベント駆動を意識した アーキテクチャ設計を実施 ・Stripe APIをシステムに組み込み ・準備できた機能から順に ディープリンクより移行する カスタマーポータル カスタマーポータル（ディープリンク） APIを利用した独自UI 段階的な「埋め込み化」 ・マイページTOPを独自UIに ・必要な「操作」を、 ディープリンクにて実現 37

ノーコードからローコードへ 「イベント駆動」が段階的移行に効く理由 ● 「ユーザーの操作」と「操作後の処理」の分離 ○ 操作: プランを変更した ○ 処理: システムDBの利用上限を更新 ● Webhook処理部分は、「UI移行」の影響を受けない ○ 「どこからStripeのデータを変更するか」が変わるだけ ● 「前処理・事前チェック」が必要な場合は、 ポータルではなくディープリンクを検討しよう 38

JP_Stripes仙台 Re:Boot Agenda ● なぜサブスク管理・請求管理がビジネスに重要か？ ● コードを書かない or 少ないコードで自動化する方法 ● 少ないリソースを活かすための「やらない決断」 39

“You ain’t gonna need it” - http://www.extremeprogramming.org/rules/early.html 40

少ないリソースを活かすための「やらない決断」 YAGNIの原則: 必要になるまで機能を追加しない ● あるものを活用する ○ Stripeなどが提供するダッシュボード ○ 「目的を達成できる」SaaSを活用 ○ 「足りないデータ」だけ自社システムに取り込む ● 「なぜ、SaaSのダッシュボードでは不十分なのか？」 41

ダッシュボードから LTVや解約率、 コーホート分析

ビジネスや収益を 最速で増やすために 「なにをやらないか」を決めよう 43