Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ

Stripe ✖ Greater Tokyo Innocation Ecosystem Stripeでノーコードに始める、 オンライン決済・請求管理 体験ワークショップ @hidetaka_dev Updated Sep 2023

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ ワークショップのゴール 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 2

ワークショップで 作成・体験するもの（例） 3

銀行振込 クレカ決済を サポートした 定期課金

サブスク 申し込みフォーム https://buy.stripe.com/test_7sIfZlca08rM7VSdQT

• https://buy.stripe.com/test_7sIfZlca08rM7VSdQT

デモサイト https://romantic-hypatia8602.on.getshifter.io/

• https://romantic-hypatia8602.on.getshifter.io/

https://www.docswell.com/s/hidetaka-stripe/ZLLEL4-2023-09-12-161511

• https://www.docswell.com/s/hidetaka-stripe/ZLLEL4-2023-09-12-161511

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 8

サービス・ビジネスを 新しく立ち上げる時、 「決済や請求」をどう用意しますか？ 9

個別に請求書を 発行して送付

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ 紙の請求書で請求を開始する ● 銀行口座とテンプレートがあればOK ● 入金確認や顧客への連絡は人力になる ● 定期的な請求は、「抜け漏れ」リスクも ● 契約者リストやMRR / LTVの計算も人力 11

Stripe Billingとは Billing：ビジネスモデルに応じた課金ロジックを構築 サブスクリプションビジネスのチャレンジ 収益機会の最大化 オペレーション の最適化 開発・メンテナンス の最小化 Billing のサポート範囲 柔軟な料金設定（固定・従量課金、週次・月次 等） KPI 分析（コホート、MRR 等） 支払いステータスの管理、カードの洗替 事業データと決済データの瞬時の把握 定期的な請求書発行・送付 入金消込・催促 日割り計算や特別な料金対応 CRM 等との連携 等 Billing 開発工数の増加 他システムとの連携 追加開発のリードタイム メンテナンスの負荷 等 13

収益財務オートメーション( RFA )

収益財務オートメーション( RFA )ライフサイクル

Stripe Dashboardに ログイン https://dashboard.stripe.com

• https://dashboard.stripe.com

[+]アイコンから [サブスクリプション]を 選択 https://subscription.new または [c]キー -> [s]キーの順にキーボード入力

• https://subscription.new

1: [顧客]フィールドに、 [ログイン中のメールアドレ ス]を入力 2: [<メールアドレス>を追 加]をクリック

[顧客を追加]ボタン をクリック

[料金体系]の [新しい商品を追加] をクリック

1: [名前]と [価格]を入力 2: [商品を追加]を クリック

顧客と サブスクリプションが 設定できた状態

[サブスクリプションの設定 ]の [支払い]を [手動支払い~]に

Tips: [支払い方法]の [管理]で [支払い方法]を 変更できる

[テストのサブスクリプションを作成]を クリックして、[サブスクリプション]を作成

サブスクリプションの 詳細や請求履歴を確認

[インボイス]セクションで[...]をクリックして、 [PDFをダウンロード]をクリック

銀行振込 クレカ決済を サポートした 定期課金

[設定]の [顧客へのメール] 表示言語や メール送信設定を 変更できる

Stripeアカウントと 顧客のメールアドレスがあれば、 クレカにも対応した請求がすぐできる 30

Stripe Billingとは Billingを使うと、多種多様な料金プランが設計できる 定額・ 段階 定額＋ 従量 従量 31

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 32

申し込みを 顧客が自分で できるようにする

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 34

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 35

メールアドレスだけで テスト用のWordPress が作れるサービス https://instawp.com/

• https://instawp.com/

[Try for Free]ボタンを クリック https://instawp.com/

• 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 ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 1. デモ用の無料WordPressサイトを立ち上げる 2. Stripeで、申し込みURLを作成する 3. 申し込みURLを、サイトのリンクに追加する 44

Stripe Dashboardに ログイン https://dashboard.stripe.com

• https://dashboard.stripe.com

[+]アイコンから [支払いリンク]を 選択 https://paymentlinks.new または [c]キー -> [l]キーの順にキーボード入力

• https://paymentlinks.new

47

[商品]から 前のステップで 作成した商品を選択

商品登録画面

支払いリンクに 商品が追加された

[リンクを作成]を クリックする

完成！

[コピー]ボタンを クリックして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) [Tips] Stripe Checkoutで、 後からシステムと 連携することも可能

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

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ サービス申し込みのためのサイトを作る 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/

• https://wordpress.org/patterns/

1. ブロックを選択 2. [Copy Pattern]を クリック https://wordpress.org/patterns/

• https://wordpress.org/patterns/

WordPressの エディタにペースト https://wordpress.org/patterns/

• https://wordpress.org/patterns/

Stripe + サイトビルダーで コードを書かずに サブスク申し込みページが作れる 71

[Advanced Tips] 料金表も ノーコードで作れる

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ アジェンダ 1. コードを書かずに、オンライン決済をはじめる a. サブスクリプションの請求を開始する b. サイト・アプリに申し込みフローを導入する 2. 請求管理やマーケティングキャンペーンと Stripeがどのように連携できるかを体験する 73

サブスクリプションは 「契約してから」が 本番

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ 決済に付随する様々なOperations ● ● ● マーケティング施策との連動 ○ 様々な種類の特別オファー（クーポン・トライアルなど） ○ 優良顧客のリサーチや、解約率・LTVなどの分析・レポート 顧客からのリクエストや問い合わせへの対応 ○ 領収書の再発行や契約内容の確認 ○ クレジットカードや契約者情報の更新 ○ 解約・プラン変更・料金の未払い etc.. 75

Stripeを使った「収益財務オートメーション( RFA )」

カスタマーポータル ->顧客向けの 請求マイページ

[設定] > [Billing]から [カスタマーポータル] をクリック

[テスト環境のリンクを 有効化] をクリック

1. URLを取得 2. 設定を変更 3. [変更を保存]を クリック

[外観]の[エディター]を クリックする

[ナビゲーション]を クリックする

[編集]アイコンを クリックする

[ブロックを追加]を クリックする

カスタマーポータルのURL を貼り付けて[Enter]キー

1. 右上の[設定]アイコンを クリック (保存の右側) 2. ラベルを [マイページ]に変更 3. 右上の[保存] ボタンをクリック

メール認証式のマイページ

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

Stripe ✖ GTIE - ノーコードで始めるオンライン決済ワークショップ まとめ ● Stripeアカウントがあれば、 請求業務がオンラインで完結できる ● 決済・マイページURLを発行して、 ノーコードでStripeとウェブサイトを連携できる ● サービスが成長したら、 Stripe APIを活用してリッチな体験を提供しよう 89

Two more things 90

やっておくと便利な 追加設定 91

[設定]の[CheckoutとPayment Links]から、 [顧客のサブスクリプションを１つに制限する]をオンに

[設定]の [顧客へのメール] Stripeから 自動送信する メールを設定

[設定]の [公開情報] 各種リンクや 明細書表記を設定

[設定]の [サブスクリプションお よびメール] リマインドメールの送 信設定

クーポンを発行して、 特別なLPを作る 96

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

Learn more about Stripe and online business 104

ユーザー事例は YouTubeで 「JP_Stripes」から https://www.youtube.com/@jp_s tripesstripe5761/videos

• https://www.youtube.com/@jp_stripesstripe5761/videos

今後開催予定の イベント情報は Connpassにて https://jpstripes.connpass.com/

• https://jpstripes.connpass.com/

Facebookグループでの オンライン コミュニケーション https://www.facebook.com/grou ps/jpstripes

• https://www.facebook.com/groups/jpstripes