11.5K Views
May 24, 23
スライド概要
JP_Stripes Kobeで使用したワークショップ資料です。
Stripe Developer Advocate
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
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 ● 1商品・1プラン -> 購入ボタン ● 複数商品 / 複数プランもしくはカスタムのオファー -> 料金表 ○ プランごとの機能表の追加も可能 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