결제 (b77.payments)
내 Stripe 또는 Whop 계정으로 일회성 결제와 구독을 받아요.
앱에서 일회성 결제와 구독을 받고, 대금은 내 Stripe 또는 Whop 계정으로 바로 들어오게 할 수 있어요. builder77은 플랫폼 수수료를 받지 않아요. Starter 이상에서 쓸 수 있어요.
1. Stripe 또는 Whop 연결하기
빌더에서 설정 → 결제(고급 설정 안)를 열고 서비스 하나 또는 둘 다 연결하세요. 키는 암호화되어 저장돼요.
- Stripe: 비밀 키(secret key)를 붙여 넣으세요 (Developers → API keys). 테스트할 때는
sk_test_…키를 쓰세요. - Whop: Whop 대시보드에서 Developer를 열고 결제, 요금제, 상품, 체크아웃 권한이 있는 회사 API 키를 만드세요. 이 키와 함께 회사 ID를 입력하세요. 회사 ID는
biz_로 시작하고 대시보드 주소창에 표시돼요. Sandbox를 켜면 실제 돈 없이 결제를 테스트할 수 있어요.
둘 다 연결했다면 체크아웃에 어느 쪽을 쓸지 고르세요. 어느 쪽이든 앱 코드는 그대로예요.
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 전용, 체크아웃당 하나)를 넘길 수도 있어요.
방문자는 결제 서비스의 안전한 결제 페이지로 이동했다가, 끝나면 같은 화면으로 돌아와요. builder77에 이렇게 요청해도 돼요. “수업당 $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개가 들어요.