![#WESEEK_tech
GROWI.cloudでの導入事例
GROWI.cloud で実際に使っている例をご紹介
2. 同時に課金額0円の料金プランでサブスクリプションを作成
const attachStripeSubscription = async(customer, plan, options) => {
return stripe.subscriptions.create({
customer: customer.id,
items: [{ plan: plan.id }],
expand: ['latest_invoice.payment_intent'],
...options,
});
};
32](https://image.slidesharecdn.com/stripe-211126033517/85/Stripe-WESEEK-Tech-Conf-15-32-320.jpg)
![#WESEEK_tech
GROWI.cloudでの導入事例
GROWI.cloud で実際に使っている例をご紹介
3. 登録完了後、ユーザーの任意のタイミングでプラン変更
const changeSubscription = async(subscriptionId, subscriptionItems, options) => {
await stripe.subscriptions.update(subscriptionId, {
items: subscriptionItems,
expand: ['latest_invoice.payment_intent'],
...options,
});
};
33](https://image.slidesharecdn.com/stripe-211126033517/85/Stripe-WESEEK-Tech-Conf-15-33-320.jpg)
Stripeを使った簡単なサブスク型課金サービスの作り方【WESEEK Tech Conf #15】
- 2. #WESEEK_tech 会社概要 株式会社WESEEK 所在地 ● 本社：〒169-0051東京都新宿区西早稲田2-20-15高田馬場アクセス10F ● サテライトオフィス：〒874-0838大分県別府市荘園9-1 ルーデンス荘園305 Lead with the web -Webで未来をリードする- 2
- 3. #WESEEK_tech 現在の主な事業 1. 通信大手企業の業務フロー自動化プロジェクト 2. ソーシャルゲームの受託開発 3. 自社発オープンソースプロダクト「GROWI」「GROWI.cloud」の開発 3
- 4. #WESEEK_tech GROWIとは 4 快適な情報共有を、全ての人へ ● OSSとして公開している情報共有ツール(ナレッジベース) ● エンジニアに馴染みのあるMarkdown形式で記述可能 ● 柔軟な階層構造での情報管理が可能
- 5. #WESEEK_tech GROWI.cloudとは 情報共有をもっと身近に、もっと手軽に ● OSSであるGROWIを専門的知識がなくても簡単に運用・管理できる、 法人・個人向けの商用サービス ● エンタープライズプランの導入事例 ○ インターネットマルチフィード株式会社様 ○ 株式会社エイチーム様 ○ 株式会社HIKKY(VR法人HIKKY)様 5
- 6. #WESEEK_tech 質問の受付方法について ● Zoomのチャット機能で、発表中も随時質問を受け付けます ○ メッセージの送信先設定は「全員」で！ ● 発表終了後に10分程度、質疑応答の時間を設けています 6
- 8. 本日の発表 8
- 9. #WESEEK_tech 自己紹介 伊勢 達也 Tatsuya Ise 9 2017年7月にWESEEKに入社 別府サテライトオフィスに勤務 GROWI/GROWI.cloud 開発・運用 ウインドサーフィン、 園芸、バイク、子どもとの戯れ 業務 趣味
- 10. #WESEEK_tech はじめに 今日のテーマ ● サブスクリプション型課金のサービスを考えているが決済をど うすればいいのか分からない ● クレジットカードや銀行などが絡んでくると、決済の管理が大 変 ● そもそも定期支払ってどうやって実現するの？ こういった悩みをお持ちの方はいませんか？ 10
- 11. #WESEEK_tech はじめに 今日のテーマ このような悩みを解決してくれる Stripe(ストライプ) という オンライン決済サービスがあります ● オンライン決済を簡単に組み込みたい ● サブスクリプション形式の決済を行いたい(仕組みを知りたい) という方に向けて、GROWI.cloud での実例を交えながらご紹介 11
- 12. #WESEEK_tech 本日の流れ ※一部ハンズオン風の形式で実際に Stripe を操作しつつお送りします 1. 「Stripe」とは 2. Stripeのデータの種類 3. 実際に課金してみる 4. SDK & ドキュメント 12 Coupon Product Plan Invoice Customer Subscription
- 13. #WESEEK_tech はじめに 本日の流れ ※一部ハンズオン風の形式で実際に Stripe を操作しつつお送りします 6. GROWI.cloudでの導入事例 7. Stripe の便利機能 PickUp 8. 失敗談と対策 9. さいごに 10.質疑応答 13
- 15. #WESEEK_tech 「Stripe」とは ● Stripe は、オンライン決済サービス → https://stripe.com/jp ● ライブラリ・API が用意されており、サブスクリプション型の 決済を行うプログラムを簡単にサービスに組み込むことができ る 15
- 16. #WESEEK_tech 「Stripe」とは Stripe は始めるのがとても簡単なオンライン決済サービス ● メールアドレスがあればテストアカウントを即時に発行可能 ● 早速、アカウントを発行してみます → https://stripe.com/jp 16
- 17. #WESEEK_tech 「Stripe」とは Stripe は始めるのがとても簡単なオンライン決済サービス ● 本番環境利用の申請も、必須項目を埋めて送信するだけ ● 最短1日で利用開始できる → 続けて Stripe について深掘りしていきます 17
- 19. #WESEEK_tech Stripeのデータの種類 Stripe にはどんな種類のデータがあるのかご紹介 ● 顧客 (Customer) ・・・ 一顧客を表すデータ ● 商品 (Product) ・・・ 提供する商品を表すデータ ● 料金 (Plan) ・・・商品の料金 ¥〇 / 月 等のデータ ● インボイス(Invoice) ・・・(料金 × 顧客) 請求情報を表す 19
- 21. #WESEEK_tech Stripeのデータの種類 サブスクリプション(Subscription)の仕様 1. 顧客の情報を持つ 2. 期間と期間の区切り、料金プランを持つ 3. 期間の区切りごとに支払い情報を作成する つまり、インボイスを定期的に自動生成して定期支払を実現して いるのが「サブスクリプション」である 21
- 22. #WESEEK_tech Stripeのデータの種類 Stripe の仕様について疑問 ● Q: 期間の途中で顧客がプランを変更したらどうなる？ ○ A: Stripe が日割り計算を行って次回請求情報を更新 ● Q: Stripe の月額はいくら？ ○ A: 月額の利用料はナシだが、決済成立ごとに 3.6% の手数 料がかかる 22
- 23. #WESEEK_tech 実際に課金してみる 太郎さんは現在フリープランなので有料プランに変更してみます ● 課金が発生しない (0円課金) プランの場合は、支払い方法を登 録する必要は無い ● テスト版アカウントでは、ダミーのカードを使用できる ● 支払いに失敗した場合を確認するためのダミーカードもある 23
- 25. #WESEEK_tech SDK & ドキュメント Stripe では、様々な種類の開発者ツールが提供されています ● CLI ● Node.js ライブラリ ● VisualStudio Code の拡張機能 ● REST API 25
- 26. #WESEEK_tech SDK & ドキュメント Stripe では、様々な種類の開発者ツールが提供されています ● CLI ● Node.js ライブラリ ● VisualStudio Code の拡張機能 ● REST API 26
- 27. #WESEEK_tech SDK & ドキュメント ドキュメントも充実 ● API ドキュメントをはじめ、仕様に関するドキュメントが充実 ● 日本語版が現在整備されつつあるが、基本は英語版 ● 翻訳が未対応の箇所や言語による若干の表現の差もある ● ドキュメントを読んで不明点があれば、サポートへ質問できる ○ 日本語はメールで翌営業日に回答、英語ならチャット可 27
- 29. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 ● GROWI.cloud では、Stripe が提供している Node.js のライブラリ、Stripe React Element という外部コ ンポーネントを使用しています ● プランごとの料金設定をマイグレーション用ファイ ルにまとめている ● 変更が発生した際にはマイグレーションを実行 29 プランのマイグレーションファイル
- 30. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 GROWI.cloud では顧客、サブスクリプション、インボイスをどう扱っている のか？ 1. アカウント登録時に Stripe 上の顧客情報を作成 2. 同時に課金額0円の料金プランでサブスクリプションを作成 3. 登録完了後、ユーザーの任意のタイミングでプラン変更 4. 支払い情報が未登録の場合は、登録完了後にプラン変更が可能 30
- 31. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 1. アカウント登録時に Stripe 上の顧客情報を作成 const attachStripeCustomer = async(customer, option) => { const stripeCustomer = await stripe.customers.create({ email: customer.email, description: `Customer ID: ${customer.id}`, }); await customer.update({ stripeCustomerId: stripeCustomer.id }, option); }; 31
- 32. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 2. 同時に課金額0円の料金プランでサブスクリプションを作成 const attachStripeSubscription = async(customer, plan, options) => { return stripe.subscriptions.create({ customer: customer.id, items: [{ plan: plan.id }], expand: ['latest_invoice.payment_intent'], ...options, }); }; 32
- 33. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 3. 登録完了後、ユーザーの任意のタイミングでプラン変更 const changeSubscription = async(subscriptionId, subscriptionItems, options) => { await stripe.subscriptions.update(subscriptionId, { items: subscriptionItems, expand: ['latest_invoice.payment_intent'], ...options, }); }; 33
- 34. #WESEEK_tech GROWI.cloudでの導入事例 GROWI.cloud で実際に使っている例をご紹介 4. 支払い情報が未登録の場合は、登録完了後にプラン変更が可能 34 Stripe React Element コンポーネントを利用
- 36. #WESEEK_tech Stripeの便利機能PickUp ● ダッシュボード ○ Stripe が自動集計してくれる様々なデータを閲覧可能 36
- 37. #WESEEK_tech Stripeの便利機能PickUp ● MRR (月間標準収益) ○ ダッシュボードから確認可能 ○ サブスクリプションが継続している契約全体の収益見込み サブスクリプションサービスを提供する場合、継続が見込める月 間の収益は売り上げと直結するのでサービス戦略を考える指標と しても非常に重要 37
- 38. #WESEEK_tech Stripeの便利機能PickUp クーポン ● 特定の支払いに対して割引を行なえる ● 割引率が MRR に影響しない (正規の金額通り MRR に反映される) ○ 例) 600 円/月 プランに 50% 割引クーポンを適用した場合 → 顧客の支払金額は 300 円/月 → MRR の変動は 600 円 38
- 39. #WESEEK_tech Stripeの便利機能PickUp トライアル ● 期限を設けて、期限まで割引した額で請求を行なえる ● トライアル中のサブスクリプションは MRR に影響しない ○ 例) 600 円/月 プランを50%割引でトライアルした場合 → 顧客の支払金額は 300 円/月 → MRR の変動は 0 円 39
- 41. #WESEEK_tech 失敗談と対策 初月無料キャンペーンにおける失敗 1. 支払い失敗が連発してしまう 2. MRR の数値に悪影響が出てしまった 41
- 42. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン失敗編) 突貫実装による考慮不足で、支払い失敗が連発してしまう ● 他サービスで当たり前となっている「初回〇〇無料！」 ● 社内から強い要望があり、優先して実装することに ● Stripe のドキュメントを調べたところクーポンという機能があ ることを知る 42
- 43. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン失敗編) 突貫実装による考慮不足で、支払い失敗が連発してしまう ● 100%オフクーポンを使うことで、支払い方法の登録なしのま ま有料プランを設定できることも判明 ● 初月無料キャンペーンの実装も完了し意気揚々とプレスリリー スを打つ ● 徐々にユーザーが増えてきた・・・が、そこで事件が起こる 43
- 44. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン失敗編) 突貫実装による考慮不足で、支払い失敗が連発してしまう ● 1か月が経過した初月無料キャンペーン適用ユーザーの支払い が (ほぼ) 全て失敗してしまうという現象が発生 ● 支払い情報の登録を行わず、100%オフクーポンを使うことで、 本来であれば有料であるプランを契約してしまったことが原因 ● 2回目の請求を行った際に支払い方法が無いため失敗していた 44
- 45. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン失敗編) MRR の数値に悪影響が出てしまった ● 「クーポンは MRR に影響しない」という関係性を正しく理解 していなかった ○ MRR には 割引を適用しない 金額が加算される ● つまり、初月無料期間だけお試しのみの顧客が見込み顧客とし て扱われるため、本来の課金額が高いプランを利用したユーザ ーが居れば居るほどプランで MRR が乱高下した 45
- 46. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン対策編) トライアルという機能があり、そちらが適切だと気づく ● トライアルを利用するよう再度仕様を練り直す ● クーポンを利用した「初月無料キャンペーン」から、「1か月 無料トライアル」に乗り換えることに 46
- 47. #WESEEK_tech 失敗談と対策 (初月無料キャンペーン対策編) トライアルという機能があり、そちらが適切だと気づく ● 内部の実装は大きく変わらず実現できた await stripe.subscriptions.update(subscriptionId, { items: subscriptionItems, coupon: “COUPON_CODE_XXX” }); ↓ ↓ ↓ await stripe.subscriptions.update(subscriptionId, { items: subscriptionItems, trial_end: addMonths(new Date(), 1) }); ● トライアルにすることで、サブスクリプションそのものが MRR に影響しなくなった！ 47
- 48. #WESEEK_tech さいごに ● Stripe は、現在勢いのあるオンライン決済サービス ● 導入が簡単 ● 素早く柔軟に変更可能 ● 正しく理解して使えばとても便利 ぜひ利用を検討してみてはいかがでしょうか 48
- 49. 質疑応答 49
- 50. #WESEEK_tech お知らせ 次回のWESEEK Tech Conf 50