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

4.1K Views

September 12, 23

スライド概要

シェア

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

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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

38.

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

39.

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

40.

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

41.

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

42.

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

43.

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

44.

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

45.

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

47.

[新しい商品を追加] で商品を登録

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

55.

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

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

73.

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

74.

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

75.

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

76.

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

77.

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

78.

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

79.

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

80.

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

81.

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

82.

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

83.

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

84.

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

85.

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

86.

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

87.

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

88.

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

89.

Two more things 89

90.

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

91.

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

92.

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

93.

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

94.

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

95.

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

96.

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

97.

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

98.

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

99.

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

100.

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

101.

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

102.

Revenue and Finance Automation with ecosystems