How to add Stripe checkout to your app

Stripe is one of the nine connectors Vibely ships. Connected, your app charges real cards: hosted Checkout on the web, PaymentSheet on mobile. Stripe's processing fees are charged by Stripe against your Stripe account; Vibely takes no cut of what your app collects and never appears on your customers' statements.

Two prerequisites, both worth checking first

• Products and prices already created in Stripe. The generated code references price ids (price_…), not amounts. Create them in the Stripe Dashboard under Products → Add product and copy each id.
• Supabase linked to the project. The three Edge Functions Stripe scaffolds are the backend, and they cannot deploy without it.

The three steps

1. Create the products and prices in the Stripe Dashboard.
2. Connect it. Customize → Connectors → Stripe → Connect. Connecting syncs STRIPE_SECRET_KEY and STRIPE_PUBLISHABLE_KEY into your project's Edge Function secrets, so the secret key never reaches a browser or an app binary. The publishable key (pk_…) is public by design and safe in the bundle.
3. Ask for the feature. "Add a Pro tier at $19/month with Checkout and gate the dashboard behind it." The agent scaffolds src/lib/payments.ts plus create-checkout, check-subscription and customer-portal Edge Functions, and runs the migration for the subscribers table.

Stay in Stripe's test mode while you iterate; flip to live when you ship.

What to ask for, by shape of business

You want	Say
A SaaS paywall	"Add a Pro tier at $19/month with Checkout and gate the dashboard behind it"
A one-off sale	"Sell a $49 template download with a receipt email"
Self-serve billing	"Let subscribers upgrade or cancel themselves" — wires the Stripe customer portal
A storefront on mobile	"Expo checkout for the print shop order — shipping address then PaymentSheet"

The mobile rule that gets apps rejected

On iOS and Android, Stripe may be used only for physical goods and real-world services — a print order, a cleaning booking, a delivery. Digital goods, premium features and subscriptions must go through in-app purchase, which on Vibely means the RevenueCat connector. A Stripe checkout for a subscription inside a mobile app is an automatic rejection under App Store Guideline 3.1.1.

The test is simple: if the thing being bought is consumed inside the app, it is IAP. If it arrives in the post or shows up at your door, Stripe is fine.

Where the secret key lives

In your Supabase Edge Function secrets, encrypted, read at execution time. The agent works inside the sandbox and cannot read raw connector secrets — the key is never in the model's context and never written into a file. If you ever see a literal sk_live_… in a diff, that is a bug worth reporting; Vibely also detects common secret formats and refuses the write. Run a security scan before you take live payments.