要件
Stripe を統合する前に、以下を準備してください。
正常に動作する MGX アプリケーション
Supabase プロジェクトとすでに接続されている MGX プロジェクト(詳細は Supabase ガイドを参照)
Stripe ダッシュボードで作成された商品および対応する価格
注意: プレビュー(Preview)モードでは決済機能をテストできません。MGX アプリをデプロイし、Stripe をテストモードに切り替えて統合を確認してください。
テスト用カード番号: 4242 4242 4242 4242
有効期限: 任意の未来の日付
CVC: 任意の3桁
Stripe 決済設定
1. Supabase 接続
MGX 画面右上の Supabase ボタンをクリックします。
Supabase Connect ガイドに従い、対象の Supabase プロジェクトを選択します。
接続後、Supabase から決済設定を構成できます。
2. サブスクリプション要件を自然言語で説明
例: 「週 4.99ドル、月 14.99ドル、年 149.99ドルの 3 つのサブスクリプションプランをサポートする決済システムを作成してください。」
送信後、MGX エージェントが設定ボタンを生成します。少なくとも2つのフィールドを入力する必要があります。
3. Stripe Secret Key の追加
Add Stripe Secret Key ボタンをクリックします。
STRIPE_SECRET_KEY フィールドに Stripe のシークレットキーを入力します。
各プランに対応する Price ID を入力します。
Stripe Secret Key の取得方法:
Price ID のコピー方法:
Product Catalog > Products に移動します。
対象価格の右側にある More ボタンをクリックし、Copy Price ID を選択
または
価格名をクリックして詳細ページを開き、右上に表示される Price ID をコピーします。
⚠️ 注意: セキュリティのため、MGX チャットにシークレットキーを直接貼り付けないでください。
Add API Key ボタンを使用して安全に保存してください。
4. Stripe Webhook Secret Key の追加
Add Stripe Webhook Secret Key ボタンをクリックします。
Webhook Secret Key を入力します。
Webhook Secret Key の取得方法:
Stripe で左下の Developers → Webhooks を選択。
Add destination をクリック。
プロジェクトに必要なイベントを選択:
checkout.session.async_payment_failed
checkout.session.async_payment_succeeded
checkout.session.completed
checkout.session.expired
Continue → Webhook endpoint を選択。
Supabase のエンドポイント URL を入力します。
Supabase エンドポイント URL の確認方法:
MGX で View Edge Function をクリック。
_webhook サフィックスが付いた Edge Function を選択。
詳細パネルに表示される Endpoint URL をコピーし、Stripe イベントの宛先に貼り付けます。
統合テスト
Stripe のテストモードを使用して決済をテストします。
テストカード情報:
カード番号: 4242 4242 4242 4242
有効期限: 任意の未来の日付
CVC: 任意の 3 桁
よくある質問(FAQ)
Q. なぜプレビューモードで決済をテストできないのですか?
A. プレビューモードはローカル環境で動作しており、公開アクセス可能な Webhook URL を提供しません。Stripe イベントを受信するには、アプリをデプロイする必要があります。
Q. 本番モードに切り替えるには?
A. Stripe ダッシュボードでテストモードをオフにし、ライブ用の Secret Key と Webhook Secret を使用してください。
Q. テスト決済が成功したかどうかを確認する方法は?
A. テスト決済完了後、Stripe の Payments ページで取引記録を確認できます。