Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方【第5回】サブスク課金の実装

Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方

第5回：サブスク課金 – 有料掲載・広告プランの実装

前回のおさらい

第4回では、クーポン実装の罠を解説しました。

Destination Charges ではプロモーションコードが使えない
Bubble 側での独自実装による回避策

今回は、店舗向けのサブスク課金 を実装します。

今回実装するプラン

プラン	料金	更新頻度	内容
有料掲載	55,000円/年	年次	検索上位表示、詳細ページ充実
プレミアム広告	55,000円/月	月次	駅ページのバナー掲載
トップ広告	110,000円/月	月次	トップページのバナー掲載

ポイント:

これらは店舗向けの課金なので、Stripe Connect は使いません。

プラットフォームが直接受け取る売上です。

Stripe Subscription の基本

仕組み

[店舗] → [Stripe Checkout] → [サブスク開始]
              │
              ↓
         [毎月/毎年 自動課金]
              │
              ↓
         [invoice.paid イベント]
              │
              ↓
         [Webhook で検知]

必要な Stripe オブジェクト

オブジェクト	説明
Product	商品（有料掲載プラン、広告プランなど）
Price	価格（月額/年額、金額）
Customer	顧客（店舗）
Subscription	定期課金（Customer と Price の紐付け）

Stripe ダッシュボードでの設定

1. Product の作成

ダッシュボード → 商品 → 「商品を追加」

有料掲載プラン:

商品名: 有料掲載プラン
説明: 検索上位表示、詳細ページの充実

プレミアム広告:

商品名: プレミアム広告
説明: 駅ページへのバナー掲載

2. Price の作成

各 Product に価格を設定。

有料掲載プラン:

価格: ¥55,000
請求期間: 年次

プレミアム広告:

価格: ¥55,000
請求期間: 月次

作成後、各 Price の API ID（price_xxx）をメモ。

Bubble での実装

Checkout Session の作成（サブスク版）

予約決済との違いは mode と line_items です。

API設定:

Method: POST
URL: https://api.stripe.com/v1/checkout/sessions
Headers:
  Authorization: Bearer sk_test_xxx
  Content-Type: application/x-www-form-urlencoded
Body:
  mode=subscription  ← 「payment」ではなく「subscription」
  success_url=https://xxx/success
  cancel_url=https://xxx/cancel
  line_items[0][price]={{price_id}}  ← Price の API ID
  line_items[0][quantity]=1
  customer_email={{店舗のメールアドレス}}
  metadata[store_id]={{店舗ID}}

予約決済との比較:

項目	予約決済	サブスク
mode	payment	subscription
line_items	price_data で動的に指定	price（事前作成）を指定
送金先	destination で店舗に送金	なし（プラットフォーム受取）
手数料	application_fee_amount	なし

「先着100店舗 1年無料」キャンペーン

店舗向けのキャンペーンとして、有料掲載を1年間無料 にしたい。

Stripe プロモーションコードが使える！

予約決済（Destination Charges）と違い、サブスク課金では プロモーションコードが使えます。

設定方法:

1. Stripe ダッシュボード → 商品 → クーポン → 「クーポンを追加」

2. クーポン設定:

割引: 100%オフ
期間: 12ヶ月間
上限回数: 100回

3. プロモーションコード発行:

コード: FIRST100

4. Checkout Session で有効化:

allow_promotion_codes=true

ユーザー体験:

1. 有料掲載プラン「申し込む」をクリック
2. Stripe 決済画面で「FIRST100」を入力
3. 「100%オフ（12ヶ月間）」が適用される
4. 初回〜12ヶ月目: 0円
5. 13ヶ月目〜: 55,000円/年

Customer の管理

初回決済時

Checkout Session で Customer が自動作成されます。

この Customer ID を店舗データに保存。

[Webhook: checkout.session.completed]
    │
    ↓
[Customer ID を取得]
data.object.customer = "cus_xxx"
    │
    ↓
[店舗の stripe_customer_id を更新]

2回目以降

既存の Customer ID を使って Checkout Session を作成。

customer={{店舗's stripe_customer_id}}

メリット:

前回登録したカードを使って決済できる
ユーザーはカード情報を再入力しなくて良い

サブスクのキャンセル

店舗がサブスクを解約したい場合。

方法1: Stripe ダッシュボードから

プラットフォーム管理者が手動でキャンセル。

方法2: Customer Portal

Stripe の「カスタマーポータル」を使うと、店舗自身でキャンセルできます。

Portal Session の作成:

Method: POST
URL: https://api.stripe.com/v1/billing_portal/sessions
Body:
  customer={{cus_xxx}}
  return_url={{戻り先URL}}

返ってきたURLに遷移すると、カード変更・解約などができる画面が開きます。

複数プランの管理

店舗が複数のプランに加入する場合。

店舗A:
  - 有料掲載プラン（年額）✓
  - プレミアム広告（月額）✓
  - トップ広告（月額）✗

データベース設計

店舗テーブルに追加:

フィールド	型	説明
has_premium_listing	yes/no	有料掲載加入中
has_premium_ad	yes/no	プレミアム広告加入中
has_top_ad	yes/no	トップ広告加入中
premium_listing_subscription_id	text	サブスクID
premium_ad_subscription_id	text	サブスクID
top_ad_subscription_id	text	サブスクID

Webhook での更新

[checkout.session.completed]
→ 該当するフラグを true に

[customer.subscription.deleted]
→ 該当するフラグを false に

テスト方法

サブスクのテスト

1. テストモードで Checkout Session を作成

2. テストカードで決済

3. Stripe ダッシュボード → サブスクリプションで確認

更新のテスト

Stripe には「テストクロック」機能があります。

時間を進めて、月次更新・年次更新をシミュレートできます。

次回予告

第6回では、Webhook設計 を解説します。

決済完了の検知
ステータス更新
エラーハンドリング

お楽しみに！

このシリーズの目次

回	タイトル	内容
1	イントロ	プラットフォーム決済の設計
2	Stripe Connect設計	Express アカウント、オンボーディング
3	予約決済の実装	Destination Charges、手数料計算
4	クーポンの罠	プロモコードが使えない問題と回避策
5	サブスク課金	← 今ここ
6	Webhook設計	決済完了の検知、ステータス更新
7	本番デプロイ	テスト→本番の切り替え、審査対策

いいね・フォローしていただけると励みになります！

実装のご相談

予約システム・サブスク決済の導入でお困りの方へ。

・Stripe / Stripe Connect の設計・実装

・Bubble / Make.com でのノーコード開発

・テスト環境→本番デプロイまで一貫対応

初期設定から運用まで、初心者の方にも丁寧にサポートします。

👉 ココナラで相談する

Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方【第5回】サブスク課金の実装