Stripe + WordPressでノーコードに 決済やサブスクを始めようワークショップ

7.5K Views

May 24, 23

スライド概要

JP_Stripes Kobeで使用したワークショップ資料です。

シェア

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

関連スライド

各ページのテキスト
1.

JP_Stripes 神戸 2023/05 Stripeでノーコードに 決済やサブスクを始めよう @hidetaka_dev Updated Apr 2023

2.

JP_Stripes 神戸 2023/05 Goal 1. Stripeを使って、コードを書かずに サブスクリプション申し込みページを作る 2. 顧客マイページを作成し、 WordPressサイトにリンクを追加する 2

3.

JP_Stripes 神戸 2023/05 ワークショップの進行 ● [ 10 min ] サブスクリプション申し込みページを作成しよう ● [ 10 min ] 埋め込み型の料金表を作って埋め込もう ● [ 5 min ] 顧客マイページを作成してリンクしよう 3

4.

JP_Stripes 神戸 2023/05 ワークショップの進行 ● [ 10 min ] サブスクリプション申し込みページを作成しよう ● [ 10 min ] 埋め込み型の料金表を作って埋め込もう ● [ 2 min ] 顧客マイページを作成してリンクしよう 4

5.

https://paymentlinks.new 5

6.

Stripeアカウントに ログイン

8.

[タイプを選択]で、 [商品またはサブスクリプション]を選択

9.

[商品]で、[新しい商品を追加]を選択

10.

商品を登録して、 [商品を追加]を クリック ↓画像DL

11.

[リンクを作成]で 支払いURLを作成

12.

注文ページへのURLが発行される

13.

JP_Stripes 神戸 2023/05 ワークショップの進行 ● [ 10 min ] サブスクリプション申し込みページを作成しよう ● [ 10 min ] 埋め込み型の料金表を作って埋め込もう ● [ 2 min ] 顧客マイページを作成してリンクしよう 13

14.

[ Case ] 複数の商品販売や カスタムな注文を 受け付けたい

15.

[商品]ページから、 [商品を追加]をクリック

16.

[商品名]を設定 [その他のオプション]から 機能リストを設定

17.

[継続]を選択して、 サブスクリプションに

18.

[商品を保存]で、 商品を登録

19.

[継続]を選択して、 サブスクリプションに

20.

[ 商品 ]から[ 料金表 ]を選択し、 [ 料金表を作成する ]ボタンをクリックする

21.

[商品]から、 登録した商品を選択

22.

[商品を保存]で、 商品を登録

23.

[カスタムの行動喚起]を クリック

24.

商品・テキストと リンク先URLを設定

25.

[表示設定]の[言語]から [日本語]を選択

26.

[続行]ボタンをクリック

27.

[続行]ボタンをクリック

28.

[完了]ボタンをクリック

29.

[コードをコピー]を クリック

30.

[カスタムHTML]ブロックにコードをペーストして保存

31.

[Appearance]から [Customize]を選択

32.

[Theme Options] を選択

33.

[Page Layout]を [One Column]に変更

34.

[Page Layout]を [One Column]に変更 [Publish]で保存

35.

サイトでの表示

36.

単一商品なら[購入ボタン] も

37.

購入ボタンも コードスニペット 埋め込みで利用

38.

[ Tips ] 見た目やボタンテキストのカスタマイズも可能

39.

JP_Stripes 神戸 2023/05 購入ボタンと料金表の使い分け ● どちらも埋め込みの仕組みは同じ ○ Scriptタグと、Web Component ● 1商品・1プラン -> 購入ボタン ● 複数商品 / 複数プランもしくはカスタムのオファー -> 料金表 ○ プランごとの機能表の追加も可能 39

40.

JP_Stripes 神戸 2023/05 ワークショップの進行 ● [ 10 min ] サブスクリプション申し込みページを作成しよう ● [ 10 min ] 埋め込み型の料金表を作って埋め込もう ● [ 2 min ] 顧客マイページを作成してリンクしよう 40

41.

料金表詳細ページを 開く

42.

下にスクロールして、 [カスタマーポータル]を 表示

43.

[コピー]ボタンを クリック

44.

[Appearance]から [Customize]を選択

45.

[Menus] を選択

46.

[Top Menu] を選択

47.

[ + Add items] を選択

48.

[ Custom Links ]に URLを追加し、 [Add to Menu] をクリック

49.

[ Publish ]で公開

50.

[ 注文時のメールアドレス ]で認証する 顧客マイページ

51.

静的サイト でも URLやコードスニペット で、 決済・サブスクを始めれる 51

52.

JP_Stripes 神戸 2023/05 ワークショップの進行 ● [ 10 min ] サブスクリプション申し込みページを作成しよう ● [ 10 min ] 埋め込み型の料金表を作って埋め込もう ● [ 5 min ] 顧客マイページを作成してリンクしよう ● 「申し込み後」のワークフローをどうするか 52

53.

ダッシュボードの 通知機能で 支払い成功などを メール通知

54.

Stripe Appsで メール送信や CRM連携を 自動化(一部有料)

55.

Pipedreamなどの IPaaSを活用して、 独自WFを構築

56.

JP_Stripes 神戸 2023/05 まとめ ● WordPressとStripeで、コードを書かずに決済・サブスクをはじめよう ● URLまたはコード埋め込みなら、サイトを静的化しても問題なし ● 商品や料金体系に応じて、URL・ボタン・料金表を使い分けよう ● IPaaSやStripe Appsで、バックオフィス業務も効率化しよう 56