Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ
4.5K Views
September 12, 23
スライド概要
Stripe Developer Advocate
関連スライド
各ページのテキスト
Stripe ✖ G's ACADEMY Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ @hidetaka_dev Updated Sep 2023
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ ワークショップのゴール 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 2
ワークショップで 作成・体験するもの（例） 3
銀行振込 クレカ決済を サポートした 定期課金
サブスク 申し込みフォーム https://buy.stripe.com/test_7sIfZlca08rM7VSdQT
デモサイト https://romantic-hypatia8602.on.getshifter.io/
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 7
サービス・ビジネスを 新しく立ち上げる時、 「決済や請求」をどう用意しますか？ 8
個別に請求書を 発行して送付
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ 紙の請求書で請求を開始する ● 銀行口座とテンプレートがあればOK ● 入金確認や顧客への連絡は人力になる ● 定期的な請求は、「抜け漏れ」リスクも ● 契約者リストやMRR / LTVの計算も人力 10
Stripe Billingとは Billing：ビジネスモデルに応じた課金ロジックを構築 サブスクリプションビジネスのチャレンジ 収益機会の最大化 オペレーション の最適化 開発・メンテナンス の最小化 Billing のサポート範囲 柔軟な料金設定（固定・従量課金、週次・月次 等） KPI 分析（コホート、MRR 等） 支払いステータスの管理、カードの洗替 事業データと決済データの瞬時の把握 定期的な請求書発行・送付 入金消込・催促 日割り計算や特別な料金対応 CRM 等との連携 等 Billing 開発工数の増加 他システムとの連携 追加開発のリードタイム メンテナンスの負荷 等 12
収益財務オートメーション( RFA )
収益財務オートメーション( RFA )ライフサイクル
Stripe Dashboardに ログイン https://dashboard.stripe.com
[+]アイコンから [サブスクリプション]を 選択 https://subscription.new または [c]キー -> [s]キーの順にキーボード入力
1: [顧客]フィールドに、 [ログイン中のメールアドレ ス]を入力 2: [<メールアドレス>を追 加]をクリック
[顧客を追加]ボタン をクリック
[料金体系]の [新しい商品を追加] をクリック
1: [名前]と [価格]を入力 2: [商品を追加]を クリック
顧客と サブスクリプションが 設定できた状態
[サブスクリプションの設定 ]の [支払い]を [手動支払い~]に
Tips: [支払い方法]の [管理]で [支払い方法]を 変更できる
[テストのサブスクリプションを作成]を クリックして、[サブスクリプション]を作成
サブスクリプションの 詳細や請求履歴を確認
[インボイス]セクションで[...]をクリックして、 [PDFをダウンロード]をクリック
銀行振込 クレカ決済を サポートした 定期課金
[設定]の [顧客へのメール] 表示言語や メール送信設定を 変更できる
Stripeアカウントと 顧客のメールアドレスがあれば、 クレカにも対応した請求がすぐできる 29
Stripe Billingとは Billingを使うと、多種多様な料金プランが設計できる 定額・ 段階 定額＋ 従量 従量 30
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 31
申し込みを 顧客が自分で できるようにする
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 33
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 34
メールアドレスだけで テスト用のWordPress が作れるサービス https://instawp.com/
[Try for Free]ボタンを クリック https://instawp.com/
1. メールアドレスを入力 2. Configurationを[Default]に設定 3. [How do you describe Your Self] のアンケートに回答 4. [Launch Site Instantly]をクリック
テスト用の WordPressが起動 [One click login to your site] をクリックしてログイン
WordPress管理画面に ログイン成功した状態
[Settings] から [General]をクリック
1. [Site Language]を [日本語]に変更 2. [Save Changes]を クリックして保存
管理画面などが 日本語に切り替わる
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 43
Stripe Dashboardに ログイン https://dashboard.stripe.com
[+]アイコンから [支払いリンク]を 選択 https://paymentlinks.new または [c]キー -> [l]キーの順にキーボード入力
46
[新しい商品を追加] で商品を登録
商品登録画面
商品情報を登録後、 [商品を追加]を クリック *画像は[ぱくたそ]を利用
支払いリンクに 商品が追加された
[リンクを作成]を クリックする
完成！
[コピー]ボタンを クリックしてURLを コピーしておく
Stripeで、申し込み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) Stripe Checkoutで、 後からシステムと 連携することも可能
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 55
[外観]の[エディター]を クリックする
WordPressの サイト編集画面
青枠部分を クリックする
コンテンツの 編集画面に移動する
テキストを 画像のように変更する
[Get In Touch]ボタンをクリックして、 [リンク]をクリック
コピーしたPayment Linksをペーストして、 [Enterキー]をクリック
[保存]ボタンを クリックして反映
ヘッダーの[表示]アイコンをクリック
[サイトを表示]をクリック
サイトが表示される
[Get in Touch]を クリックすると、 申し込み画面に
見た目の カスタマイズは https://wordpress.org/patterns/ から https://wordpress.org/patterns/
1. ブロックを選択 2. [Copy Pattern]を クリック https://wordpress.org/patterns/
WordPressの エディタにペースト https://wordpress.org/patterns/
Stripe + サイトビルダーで コードを書かずに サブスク申し込みページが作れる 71
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 72
サブスクリプションは 「契約してから」が 本番
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ 決済に付随する様々なOperations ● ● ● マーケティング施策との連動 ○ 様々な種類の特別オファー（クーポン・トライアルなど） ○ 優良顧客のリサーチや、解約率・LTVなどの分析・レポート 顧客からのリクエストや問い合わせへの対応 ○ 領収書の再発行や契約内容の確認 ○ クレジットカードや契約者情報の更新 ○ 解約・プラン変更・料金の未払い etc.. 74
Stripeを使った「収益財務オートメーション( RFA )」
カスタマーポータル ->顧客向けの 請求マイページ
[設定] > [Billing]から [カスタマーポータル] をクリック
[テスト環境のリンクを 有効化] をクリック
1. URLを取得 2. 設定を変更 3. [変更を保存]を クリック
[外観]の[エディター]を クリックする
[ナビゲーション]を クリックする
[編集]アイコンを クリックする
[ブロックを追加]を クリックする
カスタマーポータルのURL を貼り付けて[Enter]キー
1. 右上の[設定]アイコンを クリック (保存の右側) 2. ラベルを [マイページ]に変更 3. 右上の[保存] ボタンをクリック
メール認証式のマイページ
ローコードなマイページ組み込み マイページも、段階的な独自UI化が可能 ノーコードで素早く開始 独自UIで「ホワイトラベル化」 ・開発工数の最小化 ・イベント駆動を意識した アーキテクチャ設計を実施 ・Stripe APIをシステムに組み込み ・準備できた機能から順に ディープリンクより移行する カスタマーポータル カスタマーポータル（ディープリンク） APIを利用した独自UI 段階的な「埋め込み化」 ・マイページTOPを独自UIに ・必要な「操作」を、 ディープリンクにて実現 87
Stripe ✖ G's ACADEMY - ノーコードで始めるオンライン決済ワークショップ まとめ ● Stripeアカウントがあれば、 請求業務がオンラインで完結できる ● 決済・マイページURLを発行して、 ノーコードでStripeとウェブサイトを連携できる ● サービスが成長したら、 Stripe APIを活用してリッチな体験を提供しよう 88
Two more things 89
やっておくと便利な 追加設定 90
[設定]の[CheckoutとPayment Links]から、 [顧客のサブスクリプションを１つに制限する]をオンに
[設定]の [顧客へのメール] Stripeから 自動送信する メールを設定
[設定]の [公開情報] 各種リンクや 明細書表記を設定
[設定]の [サブスクリプションお よびメール] リマインドメールの送 信設定
クーポンを発行して、 特別なLPを作る 95
1. [商品カタログ]の [クーポン]へ移動 2. [テストクーポンを作 成] or [新規]ボタン をクリック
割引額や 割引期間を設定する
マーケティング キャンペーンに合致する クーポンコードを作成
[クーポンを作成]で作成
WordPressで設定したURLの最後部に、 「?prefilled_promo_code=WELCOME20」を追加 例: https://buy.stripe.com/test_7sIfZlca08rM7VSdQT?prefilled_promo_code=AUTUMN2023
割引済みの価格で、 申し込みページが開く
Revenue and Finance Automation with ecosystems