Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方【第2回】Express アカウントとオンボーディング
Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方
第2回：Stripe Connect 設計 – Express アカウントとオンボーディング
前回のおさらい
第1回では、プラットフォーム決済の概要を解説しました。
- なぜ Stripe Connect が必要か
- 3つのアカウントタイプ（Standard / Express / Custom）
- お金の流れの設計
今回は、Express アカウント の設計と、店舗登録（オンボーディング）の実装を解説します。
Express アカウントとは
Express は、Stripe Connect の中で最もバランスの取れたアカウントタイプです。
特徴
| 項目 | Express |
|---|---|
| 店舗の負担 | 軽い（数分で登録完了） |
| 本人確認 | Stripe が代行 |
| 銀行口座登録 | Stripe の画面で完結 |
| ダッシュボード | Stripe Express ダッシュボード |
| 出金 | 店舗が自分で操作可能 |
店舗側の体験
1. プラットフォームで「売上を受け取る」ボタンをクリック
2. Stripe の登録画面に遷移
3. メールアドレス、電話番号、本人確認書類を入力
4. 銀行口座を登録
5. 完了 → プラットフォームに戻る5分程度で完了します。
オンボーディングの流れ
「オンボーディング」とは、店舗を Stripe Connect に登録するプロセスです。
全体像
[店舗管理画面]
│
↓
「Stripe連携」ボタンをクリック
│
↓
[Bubble → Stripe API]
Account Links を作成
│
↓
[Stripe の登録画面]
店舗が情報を入力
│
↓
[登録完了]
プラットフォームにリダイレクト
│
↓
[Bubble]
stripe_account_id を保存Stripe ダッシュボードでの準備
1. Connect の有効化
Stripe ダッシュボード → Connect → 「始める」
2. ブランディング設定
Connect → 設定 → ブランディング
| 項目 | 設定内容 |
|---|---|
| ビジネス名 | プラットフォーム名 |
| アイコン | ロゴ画像 |
| ブランドカラー | サイトのメインカラー |
これを設定すると、店舗がオンボーディング時に見る画面にロゴが表示されます。
信頼感が全然違います。
3. 必要な情報の設定
Connect → 設定 → Express
ここで、店舗から収集する情報を選択できます。
最低限必要なのは：
- メールアドレス
- 電話番号
- 本人確認書類
- 銀行口座
Bubble での実装
必要なもの
1. Stripe のシークレットキー（sk_test_xxx または sk_live_xxx）
2. 店舗テーブル に stripe_account_id フィールド
ステップ1：Connected Account の作成
まず、Stripe に「この店舗用のアカウント」を作成します。
API呼び出し（Bubble の API Connector）:
Method: POST
URL: https://api.stripe.com/v1/accounts
Headers:
Authorization: Bearer sk_test_xxx
Content-Type: application/x-www-form-urlencoded
Body:
type=express
country=JP
email={{店舗のメールアドレス}}
capabilities[card_payments][requested]=true
capabilities[transfers][requested]=trueレスポンス:
{
"id": "acct_1ABC123xxx",
"type": "express",
...
}この id（acct_xxx）が、店舗の Stripe アカウントIDです。
ステップ2：Account Link の作成
次に、店舗を登録画面に誘導するURLを作成します。
API呼び出し:
Method: POST
URL: https://api.stripe.com/v1/account_links
Headers:
Authorization: Bearer sk_test_xxx
Content-Type: application/x-www-form-urlencoded
Body:
account={{さっき作成した acct_xxx}}
refresh_url={{登録中断時の戻り先URL}}
return_url={{登録完了時の戻り先URL}}
type=account_onboardingレスポンス:
{
"url": "https://connect.stripe.com/express/onboarding/xxx...",
"expires_at": 1234567890
}この url に店舗をリダイレクトします。
ステップ3：リダイレクト
Bubble のワークフローで：
[ボタンクリック]
│
↓
[API Call: Create Account]
│
↓
[店舗の stripe_account_id を保存]
│
↓
[API Call: Create Account Link]
│
↓
[Open external website: 返ってきたURL]登録完了後の処理
店舗が登録を完了すると、return_url に戻ってきます。
やるべきこと
1. 登録状況の確認
店舗が本当に登録を完了したか確認します。
Method: GET
URL: https://api.stripe.com/v1/accounts/{{acct_xxx}}
Headers:
Authorization: Bearer sk_test_xxxレスポンスの charges_enabled と payouts_enabled が true なら完了。
2. ステータスの更新
Bubble のデータベースで、店舗の「Stripe連携済み」フラグを更新。
よくあるハマりポイント
1. Account Link の有効期限
Account Link は 数分で期限切れ になります。
店舗が「後でやろう」と思って放置すると、リンクが無効に。
→ 再度 Account Link を作成する仕組みが必要。
対策:
[Stripe連携ボタン]
│
├─→ stripe_account_id がない → Account 作成から
│
└─→ stripe_account_id がある → Account Link だけ作成2. 本人確認が完了していない
店舗が途中で離脱すると、アカウントは作成されているが、本人確認が未完了の状態に。
対策:
charges_enabled をチェックして、未完了なら「登録を続ける」ボタンを表示。
3. テスト環境と本番環境
テスト環境で作成した Connected Account は、本番環境では使えません。
本番移行時は、店舗に再度オンボーディングしてもらう必要があります。
実装のコツ
1. stripe_account_id は必ず保存
この ID がないと、決済時に「どの店舗に送金するか」が分かりません。
最重要データです。
2. 状態を可視化
店舗管理画面に、現在の状態を表示：
[Stripe連携状況]
・未連携 → 「連携する」ボタン
・登録中 → 「登録を続ける」ボタン
・連携済み → 「✓ 売上を受け取れます」3. Webhook も設定（次回以降で詳しく）
account.updated イベントを受け取ると、店舗の状態変化を自動で検知できます。
テスト方法
テスト用の店舗アカウント作成
1. Stripe テストモードで Account を作成
2. Account Link でオンボーディング画面へ
3. テスト用の情報を入力
テスト用本人確認書類:
Stripe のテストモードでは、「000000」などのダミー番号が使えます。
テスト用銀行口座:
銀行コード: 0000
支店コード: 000
口座番号: 0000000次回予告
第3回では、予約決済の実装 を解説します。
- Destination Charges とは
- application_fee_amount（手数料）の設定
- 決済金額の計算ロジック
お楽しみに！
このシリーズの目次
| 回 | タイトル | 内容 |
|---|---|---|
| 1 | イントロ | プラットフォーム決済の設計 |
| 2 | Stripe Connect設計 | ← 今ここ |
| 3 | 予約決済の実装 | Destination Charges、手数料計算 |
| 4 | クーポンの罠 | プロモコードが使えない問題と回避策 |
| 5 | サブスク課金 | 有料掲載・広告プランの実装 |
| 6 | Webhook設計 | 決済完了の検知、ステータス更新 |
| 7 | 本番デプロイ | テスト→本番の切り替え、審査対策 |
いいね・フォローしていただけると励みになります！
実装のご相談
予約システム・サブスク決済の導入でお困りの方へ。
・Stripe / Stripe Connect の設計・実装
・Bubble / Make.com でのノーコード開発
・テスト環境→本番デプロイまで一貫対応
初期設定から運用まで、初心者の方にも丁寧にサポートします。