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

3K Views

October 11, 23

スライド概要

Stripe ✖︎ Greater Tokyo Innovation Ecosystemで利用した資料です。

# 前回ワークショップとの差分
・Payment Links作成時、前ステップで作成した商品を利用するように変更
・プラス1トピックを1件追加(料金表)
・JP_Stripesの紹介を追加

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

1. メールアドレスを入力 2. Configurationを[Default]に設定 3. [How do you describe Your Self] のアンケートに回答 4. [Launch Site Instantly]をクリック

39.

テスト用の WordPressが起動 [One click login to your site] をクリックしてログイン

40.

WordPress管理画面に ログイン成功した状態

41.

[Settings] から [General]をクリック

42.

1. [Site Language]を [日本語]に変更 2. [Save Changes]を クリックして保存

43.

管理画面などが 日本語に切り替わる

44.

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

45.

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

46.

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

48.

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

49.

商品登録画面

50.

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

51.

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

52.

完成!

53.

[コピー]ボタンを クリックしてURLを コピーしておく

54.

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で、 後からシステムと 連携することも可能

55.

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

56.

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

57.

WordPressの サイト編集画面

58.

青枠部分を クリックする

59.

コンテンツの 編集画面に移動する

60.

テキストを 画像のように変更する

61.

[Get In Touch]ボタンをクリックして、 [リンク]をクリック

62.

コピーしたPayment Linksをペーストして、 [Enterキー]をクリック

63.

[保存]ボタンを クリックして反映

64.

ヘッダーの[表示]アイコンをクリック

65.

[サイトを表示]をクリック

66.

サイトが表示される

67.

[Get in Touch]を クリックすると、 申し込み画面に

68.

見た目の カスタマイズは https://wordpress.org/patterns/ から https://wordpress.org/patterns/

69.

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

70.

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

71.

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

72.

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

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

90.

Two more things 90

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

1. [商品カタログ]の [クーポン]へ移動 2. [テストクーポンを作 成] or [新規]ボタン をクリック

98.

割引額や 割引期間を設定する

99.

マーケティング キャンペーンに合致する クーポンコードを作成

100.

[クーポンを作成]で作成

101.

WordPressで設定したURLの最後部に、 「?prefilled_promo_code=WELCOME20」を追加 例: https://buy.stripe.com/test_7sIfZlca08rM7VSdQT?prefilled_promo_code=AUTUMN2023

102.

割引済みの価格で、 申し込みページが開く

103.

Revenue and Finance Automation with ecosystems

104.

Learn more about Stripe and online business 104

105.

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

106.

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

107.

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