決済(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消費します。