Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方【第1回】プラットフォーム決済の設計
Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方
第1回：プラットフォーム決済の設計、何が難しいのか
はじめに
「予約サービスを作りたい。決済も付けたい」
そう思って調べ始めると、すぐに壁にぶつかります。
- ユーザーが払ったお金を、店舗にどう渡す？
- 手数料はどこから引く？
- 店舗ごとに銀行口座が違うけど、どう管理する？
単純な「自分が売る」決済なら、Stripeを導入するだけ。
でも 「誰かの代わりに決済を受けて、分配する」 となると、話が一気に複雑になります。
これが プラットフォーム決済 の世界です。
今回作るもの
実際に作った「予約決済プラットフォーム」をベースに解説します。
サービス概要
- 店舗検索・予約サイト
- ユーザーが予約時にクレジットカードで決済
- 売上は店舗に自動で分配
- プラットフォーム（サイト運営者）は手数料5%を受け取る
決済の種類
| 種類 | 内容 | 誰が払う |
|---|---|---|
| 予約決済 | 3,000円〜（利用料金） | ユーザー |
| 有料掲載 | 55,000円/年 | 店舗 |
| 広告掲載 | 55,000円〜/月 | 店舗 |
技術スタック
| ツール | 役割 |
|---|---|
| Bubble | フロントエンド・バックエンド |
| Stripe Connect | 決済・売上分配 |
| Stripe Checkout | 決済画面 |
| Webhook | 決済完了の通知 |
コードは書きません。 Bubbleのワークフローだけで完結します。
なぜ Stripe Connect なのか
普通のStripe決済との違い
普通のStripe:
ユーザー → Stripe → あなたシンプル。お金はあなたに入る。
Stripe Connect:
ユーザー → Stripe → 店舗（の一部をあなたに）お金の流れを分岐させられる。
Connect を使わないとどうなるか
「店舗への支払いは銀行振込で対応します」
これ、運用が地獄です。
- 毎月、売上を集計して店舗ごとに計算
- 振込手数料がかさむ
- 入金ミスのリスク
- 店舗から「まだ入金されてません」の問い合わせ
Stripe Connect なら、決済と同時に自動で分配されます。
Connect の3つのアカウントタイプ
Stripe Connect には3種類のアカウントがあります。
| タイプ | 特徴 | 向いてるケース |
|---|---|---|
| Standard | 店舗が自分でStripeアカウントを持つ | 大規模、店舗側にStripe経験あり |
| Express | 簡易版、店舗の負担が少ない | 中小規模、店舗側にITリテラシー低め |
| Custom | 完全カスタマイズ | 大規模、独自UIが必要 |
今回は Express を採用しました。
理由：
- 店舗側の登録が簡単（数分で完了）
- Stripeが本人確認・銀行口座登録を代行
- 店舗は自分で出金タイミングを選べる
- プラットフォーム側の実装も軽い
お金の流れを設計する
予約決済の場合（例：3,000円）
ユーザーが3,000円を決済
│
↓
Stripe が受け取る
│
├─→ Stripe手数料: 108円（3.6%）
│
├─→ プラットフォーム手数料: 42円（1.4%）
│
└─→ 店舗への入金: 2,850円ポイント：ユーザーから見た「手数料5%」の内訳
- Stripe手数料（約3.6%）は避けられない
- 残り約1.4%がプラットフォームの取り分
- 店舗には「5%引かれる」とだけ伝えればOK
有料掲載・広告の場合
店舗が55,000円を決済
│
↓
Stripe が受け取る
│
├─→ Stripe手数料: 約2,000円
│
└─→ プラットフォームへ: 約53,000円こちらは店舗への分配なし。全額プラットフォームの売上。
このシリーズで解説すること
実際に実装した内容をベースに、以下を解説します。
| 回 | タイトル | 内容 |
|---|---|---|
| 1 | イントロ | ← 今ここ |
| 2 | Stripe Connect設計 | Express アカウント、オンボーディング |
| 3 | 予約決済の実装 | Destination Charges、手数料計算 |
| 4 | クーポンの罠 | プロモコードが使えない問題と回避策 |
| 5 | サブスク課金 | 有料掲載・広告プランの実装 |
| 6 | Webhook設計 | 決済完了の検知、ステータス更新 |
| 7 | 本番デプロイ | テスト→本番の切り替え、審査対策 |
実際にハマったポイント（予告）
このシリーズでは、公式ドキュメントに書いてないことも共有します。
第4回で詳しく解説：「クーポンが効かない」
Stripeにはプロモーションコード機能があります。
「WELCOME500」と入力すると500円引き、みたいなやつ。
でも、Stripe Connect（Destination Charges）では使えません。
[Stripe公式の仕様]
Destination Charges ではプロモーションコードは無視されますこれ、どこにも目立つ形で書いてないんです。
実装してテストして「あれ？割引されない」となって初めて気づく。
回避策はあります。第4回で詳しく解説します。
対象読者
- Bubbleで予約サービスを作りたい人
- Stripe Connect に興味があるけど、難しそうで躊躇してる人
- 「手数料を取るビジネスモデル」を実装したい人
- プラットフォーム型サービスの決済設計を学びたい人
前提知識
- Bubbleの基本操作（エレメント配置、ワークフロー作成）
- Stripeアカウントの作成経験（なくてもOK、一緒に作ります）
次回予告
第2回では、Stripe Connect の設計 を解説します。
- Express アカウントとは
- オンボーディング（店舗登録）の流れ
- Bubble での実装方法
お楽しみに！
このシリーズの目次
| 回 | タイトル | 内容 |
|---|---|---|
| 1 | イントロ | ← 今ここ |
| 2 | Stripe Connect設計 | Express アカウント、オンボーディング |
| 3 | 予約決済の実装 | Destination Charges、手数料計算 |
| 4 | クーポンの罠 | プロモコードが使えない問題と回避策 |
| 5 | サブスク課金 | 有料掲載・広告プランの実装 |
| 6 | Webhook設計 | 決済完了の検知、ステータス更新 |
| 7 | 本番デプロイ | テスト→本番の切り替え、審査対策 |
いいね・フォローしていただけると励みになります！
実装のご相談
予約システム・サブスク決済の導入でお困りの方へ。
・Stripe / Stripe Connect の設計・実装
・Bubble / Make.com でのノーコード開発
・テスト環境→本番デプロイまで一貫対応
初期設定から運用まで、初心者の方にも丁寧にサポートします。