TL;DR: To add Stripe subscriptions to an AI-built app, create your plans as Products and Prices in Stripe, send users to Stripe Checkout to subscribe, store the resulting customer and subscription IDs against your user records, and verify Stripe webhooks to keep access in sync. The API call is easy; the real work is wiring billing state to your auth and handling renewals, cancellations, and failed payments.
A subscription is more than a "Pay" button. You need five pieces working together:
AI app builders are great at #1 and #2 — but billing lives or dies on #3–#5. Skip them and you'll have users who paid and got nothing, or canceled users who keep premium access.
In the Stripe Dashboard (or via the API), create a Product for each tier — "Pro", "Team" — and attach one or more recurring Prices (e.g., $19/month, $190/year). Copy each Price's ID (it looks like price_123
); your app references these IDs, never hard-coded dollar amounts.
Do this in test mode first. Stripe gives you a parallel set of test keys and a card number (4242 4242 4242 4242
) so you can run the entire flow without real money.
Resist building your own card form. Stripe Checkout is a hosted, PCI-compliant page you redirect to:
const session = await stripe.checkout.sessions.create({
mode: 'subscription',
line_items: [{ price: 'price_123', quantity: 1 }],
customer_email: user.email,
success_url: 'https://yourapp.com/welcome?session_id={CHECKOUT_SESSION_ID}',
cancel_url: 'https://yourapp.com/pricing',
});
// redirect the user to session.url
Checkout handles cards, Apple Pay, SCA/3DS, taxes, and coupons for you. Building that yourself is weeks of work and a compliance burden.
Your success_url
redirect is not proof of payment — users close tabs, and redirects can be spoofed. The authoritative signal is a webhook: Stripe POSTs events to your server. At minimum, handle:
checkout.session.completed
— provision access.customer.subscription.updated
— plan changes, renewals.customer.subscription.deleted
— revoke access.invoice.payment_failed
— dunning / grace period.Two non-negotiables:
Verify the signature so attackers can't fake "you got paid" events:
const event = stripe.webhooks.constructEvent(rawBody, sig, endpointSecret);
Be idempotent. Stripe retries events; store each event ID and ignore duplicates so you don't double-provision.
Keep a small mirror of billing state in your database — stripe_customer_id
, stripe_subscription_id
, plan
, status
, current_period_end
. Your app reads this local copy on every request (fast, no Stripe round-trip) and your webhook handler keeps it current. Gate routes and features on status === 'active'
(and treat past_due
per your grace policy).
Don't build cancellation and card-update screens. Stripe's Customer Portal is a hosted page you link to:
const portal = await stripe.billingPortal.sessions.create({
customer: user.stripeCustomerId,
return_url: 'https://yourapp.com/account',
});
One link covers upgrades, downgrades, invoices, and cancellations.
Most AI builders generate a beautiful front end and maybe a database — then hand you a repo and wish you luck on Stripe. The integration above (webhooks, idempotency, access gating) is exactly the unglamorous plumbing that determines whether you actually get paid.
Here's how the common paths compare:
| Approach | Time to first paid user | You own the Stripe account | Full source code | Subscription lifecycle wired |
|---|---|---|---|---|
| Hand-code it yourself | Days–weeks | ✅ | ✅ | Only if you build it |
| Generic AI app builder | Fast UI, billing is DIY | ✅ | Sometimes | ❌ Usually not |
| No-code billing add-on | Fast | ✅ | ❌ (locked in) | Partial |
| Velra | ||||
| Fast | ✅ your account | |||
| ✅ synced to your GitHub | ||||
| ✅ Checkout + webhooks + gating |
(Times are illustrative — your mileage depends on plan complexity.)
A generic builder wins if you only want a prototype and enjoy wiring Stripe yourself. A no-code add-on wins for the simplest one-tier case. Where Velra differs: from a plain-English prompt it scaffolds the whole SaaS and wires Stripe subscriptions to your own Stripe account, then syncs the full source to your GitHub — so you own both the revenue and the code, with no lock-in.
invoice.payment_failed
or churn silently.Do I need a backend to use Stripe subscriptions?
Yes. Webhook verification and your subscription source-of-truth must run server-side with your secret key. A purely static front end can't securely gate paid features.
Can I add Stripe to an app an AI already built?
Usually yes, if you have the source. You'll add the Checkout call, a webhook endpoint, and the billing columns above. Tools that hand you full source (or wire billing for you) make this far easier than locked platforms.
How long does it take?
A basic single-plan integration is a focused day or two; multi-tier plans, proration, taxes, and dunning add time. (Illustrative.)
Stripe Checkout vs. building my own form — which is better?
Use Checkout. It's PCI-compliant, supports SCA/3DS and wallets, and removes most compliance scope from your app.
How do I test without real charges?
Use Stripe test-mode keys and test cards (e.g., 4242 4242 4242 4242
), and trigger webhook events with the Stripe CLI before going live.
If you'd rather not hand-wire webhooks and access gating, Velra turns a plain-English prompt into a production SaaS with Stripe subscriptions already connected to your account and the full source pushed to your GitHub. Build it, own it, get paid — then customize the code however you like. See how it works at velra.dev.