Slide 1

Slide 1 text

LINEとStripeではじめる サブスクリプションビジネス入門 REVUP 2022 @hidetaka_dev Oct 2022 1

Slide 2

Slide 2 text

今日のトピック ● LINEとStripeを使うと、 ノーコードに月額・年額などのサブスク課金を始めることができる ● LINEもStripeも、ユーザーの行動や状態を Webhookイベントでシステムに通知してくれる ● LINEとStripeを使いこなして、 効率的に顧客との関係性をより良いものに進化させよう 2 REVUP 2022 #linedc_revup

Slide 3

Slide 3 text

岡本 秀高 ( @hidetaka_dev ) ● Stripe Developer Advocate (ex-developer in Digitalcube) ● JavaScript / TypeScript developer ○ AWS Lambda / CDK ○ Next.js / React ○ WordPress / Alexa / etc ● AWS Samurai 2017 / AWS Community Day APAC 2017 ● QiitaでStripeに関する Dev blogを週2/3本で更新中 ○ https://qiita.com/hideoka moto ○ 年間120記事ペース 3 REVUP 2022 #jawsdays2022

Slide 4

Slide 4 text

今日のトピック ● LINEとStripeを使うと、 ノーコードに月額・年額などのサブスク課金を始めることができる ● LINEもStripeも、ユーザーの行動や状態を Webhookイベントでシステムに通知してくれる ● LINEとStripeを使いこなして、 効率的に顧客との関係性をより良いものに進化させよう 4 REVUP 2022 #linedc_revup

Slide 5

Slide 5 text

サブスクリプション(定期課金)を始めるためには ● 申し込みを受け付けるフォームの用意 ● 提供するプラン・料金の管理 ● クレジットカード・銀行振込などの決済方法の安全な処理 ● 定期的な請求と、請求失敗時の通知やユーザーへの案内 ● 契約状況を管理するダッシュボード ● 顧客が支払い履歴や契約・支払い情報を確認・管理できるマイページ ● etc… 5 REVUP 2022 #linedc_revup

Slide 6

Slide 6 text

商品・サービス注文フォーム ダッシュボードから 商品 / 料金 / 決済方法などを 設定してリンクを取得 アップセルやクロスセル、 配送方法の設定なども可能 顧客マスタが複数作成され、 複数のサブスクリプション を契 約する場合には不向き 6 REVUP 2022 Stripe Payment Linksで、ノーコードに申し込みを受付

Slide 7

Slide 7 text

ノーコードで 契約管理マイページを提供 申し込み時に入力した メールアドレスで認証 プラン変更・決済手段更新、 請求履歴の確認やPDF DLな ど 表示項目や操作内容は ダッシュボードにて カスタマイズ可能 7 REVUP 2022 Stripe Customer Portalで、顧客マイページも

Slide 8

Slide 8 text

● 応答メッセージでURLを指定 ● Stripeが発行するURLを登録 ○ 商品の注文 or サブスクリプション申込 -> Payment Links ○ 契約内容マイページ -> Customer Portal ● AI応答メッセージで、複数のケースに対応 8 REVUP 2022 LINEの応答メッセージで、申込やマイページURLを案内

Slide 9

Slide 9 text

サブスクリプション決済フローでのベストプラクティス 1. 無料トライアルを提供する 2. 決済ページにて、 クーポンなどの割引コードを入力できるようにする 3. クレジットカード以外の決済方法のサポート Stripeが毎年公開しているレポートから pickup https://go.stripe.global/state-of-checkouts-japan-2021-ja 9 REVUP 2022 #linedc_revup

Slide 10

Slide 10 text

リダイレクト型決済フォーム → Stripe Checkout APIの引数で、 幅広いユースケースに対応 ● 1度注文した顧客の 新しいサブスク契約 ● 有効期限付きURL ● コードでの 決済方法の制御 10 REVUP 2022 コードが書ければ、より柔軟な申し込みフォームも

Slide 11

Slide 11 text

ノーコードからはじめるサブスクリプション ● LINEとStripeを使うと、 ノーコードに月額・年額などのサブスクリプションを始めることが可能 ○ URLを共有するだけの、サブスク申し込みフォーム機能 ○ メールアドレスを利用した、ノーコードマイページ機能 ○ LINEの応答メッセージを使えば、UIもほぼノーコード ● LINE Message APIやStripe Checkout APIを使えば、 ローコードまたは本格的な組み込みによるより柔軟なシステム構築も 11 REVUP 2022 #linedc_revup

Slide 12

Slide 12 text

今日のトピック ● LINEとStripeを使うと、 ノーコードに月額・年額などのサブスク課金を始めることができる ● LINEもStripeも、ユーザーの行動や状態を Webhookイベントでシステムに通知してくれる ● LINEとStripeを使いこなして、 効率的に顧客との関係性をより良いものに進化させよう 12 REVUP 2022 #linedc_revup

Slide 13

Slide 13 text

サブスクリプションは、「契約してからが本番」 ● サブスクリプションは、「契約し続けてもらう」必要がある ○ 使わないサブスクサービスは、解約される ■ 競合他社への乗り換え: 「もっと安いor便利なサービスにしよう」 ■ 需要の消失: 「子どもが成長したので、もう使わない」 ○ 物理的に「解約させない」のは、特商法違反になる恐れ ■ 令和4年6月1日施行 ■ トライアルから有料への移行に関する情報や、 キャンセル・解約フローに関する条項の事前告知が必須に ■ https://www.caa.go.jp/policies/policy/consumer_transaction/specified_commercial_t ransactions/assets/consumer_transaction_cms202_220601_05.pdf 13 REVUP 2022 #linedc_revup

Slide 14

Slide 14 text

LINEでのチャットが、顧客との窓口に ● LINE Message API ○ API呼び出しで、 任意のユーザーまたはグループにメッセージ送信 ○ ユーザーから送られたメッセージ処理も可能 ● サブスクリプションにおける「変化」を、LINEでコミュニケートする ○ 契約内容に関する案内(契約更新の予告・決済エラーのお知らせ) ○ サービスの利用状況に基づく提案(上位プラン・休会などの案内) 14 REVUP 2022 #linedc_revup

Slide 15

Slide 15 text

Webhookが、「顧客・契約の状態変化」をお知らせする ● Stripeでは、150を超えるWebhookイベントをサポート ○ 支払いの成功: payment_intent.succeeded ○ サブスクの次回請求書を作成: invoice.upcoming ○ トライアル終了3日前: customer.subscription.trial_will_end ○ More: https://stripe.com/docs/api/events/types ● Stripeがサブスクリプションの契約内容を管理し、 「状態変化」をWebhookイベントでシステムに通知する ● 通知された「状態変化」に応じて、LINEで顧客とコミュニケーション 15 REVUP 2022 #linedc_revup

Slide 16

Slide 16 text

Webhook活用例1: フリートライアルのフォローアップ ● 「customer.subscription.trial_will_end」イベントを利用 ○ 3日前または手動でトライアルを終了させた場合に発火 ● サブスクリプションデータを確認し、手動終了でないことを確認 ● LINE Message APIで、顧客にトライアル終了3日前をお知らせ ○ LINEのユーザーIDは、StripeのCustomer metadataなどに事前保存 ○ Flexやテンプレートメッセージを使えば、 会話の中でそのまま有料プランへの切り替えや解約操作も 16 REVUP 2022 #linedc_revup

Slide 17

Slide 17 text

Webhook活用例2: 長期利用顧客のアップグレード提案 ● シナリオに応じてイベントを変更 ○ 次回請求の前に案内したい場合: invoice.upcoming ○ 今回の請求で条件を満たしたら連絡: customer.subscription.updated ○ etc.. ● サブスクリプションの開始日と現在を比較 ○ 休会期間を除外したい場合は、請求履歴をカウントする方法も ● より長期のプランを取得 or その顧客用にプランを作成 ● LINE Message APIで顧客にアップグレード提案 17 REVUP 2022 #linedc_revup

Slide 18

Slide 18 text

Webhook活用例3: Chat botによる顧客サポート ● LINEからのWebhookイベントで、Stripe APIを呼び出すパターン ○ 顧客からの問い合わせ ○ リッチメニューやFlex Messageなどのタップ操作 ● Stripe APIから取得したデータを元に、ユーザーが操作しやすい返答を ○ プラン変更や追加購入: カルーセル + Stripe API呼び出しリンク ○ 商品の決済・配送ステータス確認: Flex Message ● カスタマーポータルへのリンクを、リッチメニューにそのまま追加なども 18 REVUP 2022 #linedc_revup

Slide 19

Slide 19 text

Webhook APIは、 署名検証などの実装が必要 Amazon EventBridgeの クイックスタートで、 Webhookの受信部分を ノーコード実装が可能 Step Functionsと併用で、 ローコードな 業務処理WFの構築も 19 REVUP 2022 AWS(Amazon EventBridge)でWebhook連携を効率化 https://aws.amazon.com/jp/about-aws/whats-n ew/2022/08/amazon-eventbridge-supports-rec eiving-events-github-stripe-twilio-using-webho oks/

Slide 20

Slide 20 text

Webhookで、ユーザーとの関係を構築しよう ● SNS・チャットボットも、サブスクリプションも 「顧客との関係構築」がとても重要 ● それぞれのWebhookイベントで、 「顧客がなにをしたか」「契約が今どうなっているか」を システムや人間が簡単に把握・対処できるようになる ● それぞれのダッシュボードや、 AWSやGCPなどを使ったビジネス分析で、顧客への理解を深めよう 20 REVUP 2022 #linedc_revup

Slide 21

Slide 21 text

One more thing 成功施策の「横展開」 21

Slide 22

Slide 22 text

Stripe Appsで、自動化・効率化の「横展開」 ● Webhookを利用した「仕組み化」に成功すると、 成功施策の横展開やパッケージ化が可能になることも ● Stripe Appsで、 StripeとWebhookの処理システムとの連携や配布が簡単に ○ 必要なもの ■ Webhookを処理するAPIシステム(AWSやGCP・Vercelで構築) ■ React + TypeScript + 専用UI FWでダッシュボードウィジェット 22 REVUP 2022 #linedc_revup

Slide 23

Slide 23 text

Stripe Appsの例: kintoneとStripeで顧客データ連携 23 REVUP 2022

Slide 24

Slide 24 text

今日のトピック ● LINEとStripeを使うと、 ノーコードに月額・年額などのサブスク課金を始めることができる ● LINEもStripeも、ユーザーの行動や状態を Webhookイベントでシステムに通知してくれる ● LINEとStripeを使いこなして、 効率的に顧客との関係性をより良いものに進化させよう 24 REVUP 2022 #linedc_revup

Slide 25

Slide 25 text

Stripe + LINEではじめる「決済OPS」 ● LINEアプリもStripeの決済システムも、 「リリースしてからどう使うか」が本番 ● 顧客の状態変化への対応や関係性構築を、 どのように仕組み化し、「なにを仕組み化しない」か ● 決済に紐づく運用(OPS)を、 StripeのデータとLINEのUIを使って、 「ユーザー」も「社内運用チーム」も快適に利用できる仕組みを作ろう 25 REVUP 2022 #linedc_revup