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

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

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

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

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

https://paymentlinks.new 5

• https://paymentlinks.new

Stripeアカウントに ログイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[Appearance]から [Customize]を選択

[Theme Options] を選択

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

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

サイトでの表示

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

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

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

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

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

料金表詳細ページを 開く

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

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

[Appearance]から [Customize]を選択

[Menus] を選択

[Top Menu] を選択

[ + Add items] を選択

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

[ Publish ]で公開

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

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

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

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

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

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

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