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 でのノーコード開発

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

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

👉 ココナラで相談する

Bubble × Stripe Connect で作る！予約決済プラットフォームの作り方【第2回】Express アカウントとオンボーディング