バックエンドとSDK

決済(b77.payments)

ご自身のStripeまたはWhopアカウントで、単発の支払いとサブスクリプションを受け付けます。

アプリで単発の支払いやサブスクリプションを受け付け、代金をご自身のStripeまたはWhopアカウントに直接受け取れます。builder77はプラットフォーム手数料を取りません。Starter以上のプランで使えます。

1. StripeまたはWhopを接続する

ビルダーで設定 → 決済(詳細設定内)を開き、どちらか一方、または両方を接続します。キーは暗号化して保存されます。

  • Stripe: シークレットキー(Developers → API keys)を貼り付けます。テスト中は sk_test_… のキーを使います。
  • Whop: WhopのダッシュボードでDeveloperを開き、payment、plan、product、checkoutの権限を持つ会社用のAPIキーを作成します。それを会社IDと一緒に入力します。会社IDは biz_ で始まり、ダッシュボードのアドレスバーに表示されています。実際のお金を動かさずに支払いを試すには、サンドボックスをオンにします。

両方を接続した場合は、決済にどちらを使うかを選びます。どちらを選んでも、アプリのコードは変わりません。

2. 決済を始める

// b77.config.json: { "rules": { "classes": "readonly" } }
// a 'classes' record: { name: 'Yoga drop-in class', price: 15, currency: 'usd' }
await b77.payments.checkout({
  items: [{ collection: 'classes', id: classId, qty: 1 }], // the price is read on the server
  metadata: { note: 'Bring a mat' },
});
// or a price made at your provider:
// items: [{ price: 'price_123', qty: 1 }] (Stripe) / items: [{ price: 'plan_123' }] (Whop)

価格は必ずサーバー側で、readonly ルールのコレクションにあるレコード(name と price を持つもの)から読み取られます。レコードの代わりに、StripeのPrice ID(price_…、Stripeのみ)やWhopのプランID(plan_…、Whopのみ、1回の決済につき1つ)を渡すこともできます。

訪問者は決済サービスの安全な支払いページに移動し、支払いが終わると元の画面に戻ります。builder77に頼むだけでも大丈夫です。たとえば 「1レッスン$15を請求する購入ボタンを追加して」。

3. 結果を確認する

const r = await b77.payments.result; // null | { canceled: true } | { paid, payment }
if (r?.paid) b77.toast('Payment received — see you in class!');

サブスクリプション

// b77.config.json: { "rules": { "plans": "readonly", "lessons": "members" } }
// a 'plans' record: { name: 'Pro', price: 9, currency: 'usd', interval: 'month' }
await b77.payments.subscribe({ items: [{ collection: 'plans', id: planId, qty: 1 }] });

const { active } = await b77.payments.subscription(); // show or hide paywall UI
await b77.payments.manage(); // Stripe billing portal or the buyer's Whop membership page

サブスクリプションはどちらの決済サービスでも使えます。購入する人はログインしている必要があります。b77.payments.manage() を呼ぶと、Stripeの請求ポータル、または購入者のWhopのメンバーシップページが開きます。有料コンテンツをサーバー側で確実に制限するには、members または members-private ルールのコレクションに入れます。

決済の記録

決済はすべてアプリの payments コレクションに保存されます。status(pending、paid、expired)、amount、currency、items、metadata が記録され、データタブで確認できます。決済1回につき連携クレジットを1消費します。