惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Cyber Attacks, Cyber Crime and Cyber Security
N
News and Events Feed by Topic
Schneier on Security
Schneier on Security
Forbes - Security
Forbes - Security
Webroot Blog
Webroot Blog
PCI Perspectives
PCI Perspectives
www.infosecurity-magazine.com
www.infosecurity-magazine.com
A
Arctic Wolf
Google Online Security Blog
Google Online Security Blog
T
Troy Hunt's Blog
T
Tenable Blog
L
Lohrmann on Cybersecurity
C
Cisco Blogs
罗磊的独立博客
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
T
Threat Research - Cisco Blogs
Attack and Defense Labs
Attack and Defense Labs
T
The Exploit Database - CXSecurity.com
有赞技术团队
有赞技术团队
V2EX - 技术
V2EX - 技术
GbyAI
GbyAI
P
Proofpoint News Feed
雷峰网
雷峰网
Cisco Talos Blog
Cisco Talos Blog
Hacker News - Newest:
Hacker News - Newest: "LLM"
Cloudbric
Cloudbric
K
Kaspersky official blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
S
Securelist
M
MIT News - Artificial intelligence
H
Heimdal Security Blog
Vercel News
Vercel News
S
SegmentFault 最新的问题
U
Unit 42
Help Net Security
Help Net Security
S
Schneier on Security
人人都是产品经理
人人都是产品经理
爱范儿
爱范儿
Microsoft Azure Blog
Microsoft Azure Blog
H
Hackread – Cybersecurity News, Data Breaches, AI and More
cs.CV updates on arXiv.org
cs.CV updates on arXiv.org
T
Threatpost
I
Intezer
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
P
Palo Alto Networks Blog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
博客园 - 三生石上(FineUI控件)
J
Java Code Geeks
宝玉的分享
宝玉的分享
Latest news
Latest news

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant Common SOC 2 Failures (Real World) Stop Vibe-Checking Your AI App: A Practical Guide to Evals How to Use SonarQube and SonarScanner Locally to Level Up Your Code Quality Your Next To-Do App Is Dead — I Replaced Mine with an OpenClaw AI Sign a Nostr event in 60 lines of Python using coincurve — no nostr-sdk, no nbxplorer, no rust toolchain ITGC Audit Explained Like You’re in Big 4 Patch Tuesday abril 2026: Microsoft parcha 163 vulnerabilidades y un zero-day en SharePoint Stop scraping everything: a better way to track competitor price changes Listing on MCPize + the Official MCP Registry while routing payments OUTSIDE the marketplace — how I kept 100% of my x402 revenue Building an AI-Powered Risk Intelligence System Using Serverless Architecture Why We Ripped Function Overloading Out of Our AI Toolchain Testing AI-Generated Code: How to Actually Know If It Works SaaS Churn Is Killing Your Business. Here Is What to Do About It (Without a Support Team) The Speed of AI Is No Longer Linear - And Self-Improving Models Are Why How to Implement RBAC for MCP Tools: A Practical Guide for Engineering Teams From Standard Quote to Persuasive Proposal: AI Automation for Arborists I built a CLI that scaffolds complete multi-tenant SaaS apps Axios CVE-2025–62718: The Silent SSRF Bug That Could Be Hiding in Your Node.js App Right Now The dashboard that ended our friendship Data Pipelines Explained Simply (and How to Build Them with Python) The Hidden Cost of AI Systems Nobody Talks About. undefined vs undeclared, and how typeof behaves Switching from file-based jobs to NATS/Kafka in Rust without changing code io_uring Adventures: Rust Servers That Love Syscalls Why Agentic AI is Killing the Traditional Database The POUR principles of web accessibility for developers and designers Quantum Neural Network 3D — A Deep Dive into Interactive WebGL Visualization How To Install Caveman In Codex On macOS And Windows Automation Pipeline Reliability: Why Your Workflow Breaks When Nobody Is Watching I Built an 'Open World' AI Coding Agent — It Works From ANY Folder From Freelancing to Product: A Tech Service Company's SaaS Transformation China's AI Giants: Adding Tencent Hunyuan & ByteDance Doubao to AI University (74 Providers) On the Vibe Coders and Their Lies clerk: Auto-Summarize Your Claude Code Sessions AI Weekly — 2026/04/10–04/17 | The Model Lockdown Is Here, but the Toolchain Is the Real Battleground AI 週報 — 2026/04/10–2026/04/17 模型封鎖潮來了,但工具鏈才是真戰場 Maybe this is how Open-Source apps are born... 🚀 Fine-Tune LLMs with LoRA and QLoRA: 2026 Guide tRPC v11 + Next.js App Router: End-to-End Type Safety Without the Boilerplate ShadCN UI in 2026: Why I Stopped Installing Component Libraries and Started Owning My Components SaaS Billing in React Server Components: Stripe + Supabase Without a Single `useEffect` Join our DEV Weekend Challenge — $1,000 in Prizes Across TEN winners! Submissions Due April 20 at 6:59 AM UTC. Implementing FSRS Spaced Repetition in Flutter + Supabase — Adding Memory Science to an AI Learning App "I Texted My Localhost From the Train — Claude Code Fixed the Bug Before I Got Home" I Built a Sales Prep AI and It Went Deeper Than Expected Design to Code #2: One JSON, Eleven Outputs Solving the 100M-Row Problem: A Summary Table Pattern for High-Volume Push Notification Logs Flutter Web With Wasm: What Actually Changes For Developers I Built 50 Royalty-Free Soundtracks for My Side Project in a Weekend Using AI Music Generation The Vibe Coding Security Checklist: 7 Things to Check Before You Ship Stop Letting Googlebot Guess Fix Your React App's SEO Right Desconstruindo o Streaming do LinkedIn: Como Criar um Engine de Extração de Vídeo de Alta Performance com HLS e FFmpeg (EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning Brand Relationship Management at Scale: Our 4-Touch Outreach System for 200+ Brands Why String.fromEnvironment() Might Return an Empty String in Dart JGuardrails 1.0.0 — Hardening Java LLM Apps Against Jailbreaks, Toxicity, and Prompt Injection Plan and Schedule a Full Week of Threads Content From One Claude Conversation Coding Cat Oran Ep3, Five Tables Changed Everything Updated: BFF Pattern I'm done watching freelancers get buried by 200 proposals. So I'm building the alternative. This is my first post BFS Algorithm in Java Step by Step Tutorial with Examples Tracking LLM Pricing Monthly: An Open Dataset for 22 AI Models How We Measure Content ROI on a Comparison Site: Revenue Attribution Without Perfect Data Introducing Nova AI Ops: The AI-Native Operating System for SRE Teams I built a free desktop video downloader for Windows — Grabbit How Talkie OCR Helps Vision-Impaired & Dyslexic Users Read the World Around Them VRCFaceTracking安装和iPhone面捕配置教程,有bug Even CrowdStrike Can't See Your Agents The Automation Gold Rush: What n8n Workflows and Claude Are Opening Up for Developers Right Now
How to Add Stripe Subscriptions to an AI-Generated App (Step by Step)
Aadesh Kumar · 2026-04-23 · via DEV Community

Most Stripe tutorials stop at the payment form. This one covers what comes after.

What you will learn in this guide:

  • How to configure Stripe Billing products and price objects correctly from the start
  • How to build the checkout session flow for subscription plans
  • How to handle Stripe webhooks reliably — including the two events most tutorials omit
  • How to manage subscription state in your database across plan changes, upgrades, and cancellations
  • How to surface a working billing portal without building one from scratch

Why Stripe Subscriptions Are Harder Than They Look

Stripe's documentation is thorough. It is also large enough that developers routinely wire up payment forms, test a successful charge, and ship — without realizing that the critical parts of a subscription integration happen after the initial payment.

Subscription management means handling renewals, failed payments, plan upgrades, downgrades, and cancellations — all asynchronously, via webhooks, with state that has to be reflected accurately in your own database.

AI-generated apps frequently scaffold the checkout flow correctly but leave the post-payment state management incomplete. This guide fills that gap.

The code examples use Node.js with Express, but the architectural patterns apply to any backend stack.

Step 1: Set Up Your Stripe Products and Prices

Before writing any code, the Stripe dashboard configuration determines how flexible and maintainable your billing logic will be.

Create a Product in the Stripe dashboard for each tier of your SaaS (e.g., Starter, Pro, Enterprise). Products are the high-level concept; Prices are the billing intervals and amounts attached to them.

// Creating a product and price via Stripe API (can also be done in dashboard)
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

const product = await stripe.products.create({
  name: 'Pro Plan',
  description: 'Full access to all features'
});

const price = await stripe.prices.create({
  unit_amount: 4900,         // $49.00 in cents
  currency: 'usd',
  recurring: { interval: 'month' },
  product: product.id
});

console.log('Price ID:', price.id);
// Store this Price ID — you will reference it in checkout sessions

Enter fullscreen mode Exit fullscreen mode

Key principle: Store your Price IDs in environment variables, not hardcoded in your application. When you add annual billing or change a plan's price, you update a variable rather than hunting through code.

# .env
STRIPE_SECRET_KEY=sk_live_xxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxx
STRIPE_PRO_MONTHLY_PRICE_ID=price_xxxxxxxx
STRIPE_PRO_ANNUAL_PRICE_ID=price_xxxxxxxx

Enter fullscreen mode Exit fullscreen mode

Step 2: Build the Checkout Session

Stripe Checkout handles the payment form, card validation, and 3D Secure authentication. The correct approach is to create a server-side Checkout Session and redirect the user — never build a custom payment form for subscriptions unless you have a specific regulatory requirement.

// POST /api/billing/create-checkout-session
app.post('/api/billing/create-checkout-session', requireAuth, async (req, res) => {
  const { priceId } = req.body;
  const user = req.user;

  try {
    // Retrieve or create a Stripe customer for this user
    let customerId = user.stripeCustomerId;

    if (!customerId) {
      const customer = await stripe.customers.create({
        email: user.email,
        metadata: { userId: user.id }   // Critical: links Stripe customer to your DB user
      });
      customerId = customer.id;

      // Persist the customer ID immediately
      await db.users.update({ stripeCustomerId: customerId }, { where: { id: user.id } });
    }

    const session = await stripe.checkout.sessions.create({
      customer: customerId,
      payment_method_types: ['card'],
      line_items: [{ price: priceId, quantity: 1 }],
      mode: 'subscription',
      success_url: `${process.env.APP_URL}/dashboard?billing=success`,
      cancel_url: `${process.env.APP_URL}/pricing`,
      subscription_data: {
        metadata: { userId: user.id }   // Attach user ID to the subscription too
      }
    });

    res.json({ url: session.url });
  } catch (err) {
    console.error('Checkout session error:', err);
    res.status(500).json({ error: 'Failed to create checkout session' });
  }
});

Enter fullscreen mode Exit fullscreen mode

The metadata: { userId: user.id } on both the customer and the subscription is the most commonly missed step in AI-generated integrations. Without it, webhook handlers cannot reliably map Stripe events back to users in your database.

Step 3: Handle Webhooks — The Part Most Tutorials Skip

Webhook handling is where subscription integrations succeed or fail. Stripe sends events for every billing lifecycle change. Your application needs to listen for and process these events to keep your database in sync.

First, set up webhook signature verification. This confirms the event came from Stripe and not a malicious request.

// POST /api/billing/webhook
// IMPORTANT: This route must use raw body parsing, not JSON parsing
app.post('/api/billing/webhook',
  express.raw({ type: 'application/json' }),
  async (req, res) => {
    const sig = req.headers['stripe-signature'];
    let event;

    try {
      event = stripe.webhooks.constructEvent(
        req.body,
        sig,
        process.env.STRIPE_WEBHOOK_SECRET
      );
    } catch (err) {
      console.error('Webhook signature verification failed:', err.message);
      return res.status(400).send(`Webhook Error: ${err.message}`);
    }

    // Process the event
    await handleStripeEvent(event);
    res.json({ received: true });
  }
);

Enter fullscreen mode Exit fullscreen mode

The express.raw() middleware on the webhook route is non-negotiable. Stripe's signature verification requires the raw request body. If express.json() parses it first, verification will fail every time.

Now handle the events that actually matter:

async function handleStripeEvent(event) {
  const { type, data } = event;
  const object = data.object;

  switch (type) {

    // Subscription created (after successful first payment)
    case 'customer.subscription.created':
      await db.subscriptions.upsert({
        userId: object.metadata.userId,
        stripeSubscriptionId: object.id,
        stripePriceId: object.items.data[0].price.id,
        status: object.status,
        currentPeriodEnd: new Date(object.current_period_end * 1000),
        cancelAtPeriodEnd: object.cancel_at_period_end
      });
      break;

    // Subscription updated (plan change, renewal, etc.)
    case 'customer.subscription.updated':
      await db.subscriptions.update({
        stripePriceId: object.items.data[0].price.id,
        status: object.status,
        currentPeriodEnd: new Date(object.current_period_end * 1000),
        cancelAtPeriodEnd: object.cancel_at_period_end
      }, { where: { stripeSubscriptionId: object.id } });
      break;

    // Subscription cancelled or payment permanently failed
    case 'customer.subscription.deleted':
      await db.subscriptions.update({
        status: 'canceled'
      }, { where: { stripeSubscriptionId: object.id } });
      break;

    // THIS IS THE EVENT MOST TUTORIALS MISS #1
    // Triggered on each successful renewal payment
    case 'invoice.payment_succeeded':
      if (object.billing_reason === 'subscription_cycle') {
        await db.subscriptions.update({
          status: 'active',
          currentPeriodEnd: new Date(object.lines.data[0].period.end * 1000)
        }, { where: { stripeSubscriptionId: object.subscription } });
      }
      break;

    // THIS IS THE EVENT MOST TUTORIALS MISS #2
    // Triggered when a renewal payment fails
    case 'invoice.payment_failed':
      await db.subscriptions.update({
        status: 'past_due'
      }, { where: { stripeSubscriptionId: object.subscription } });
      // Optionally: trigger an email notification to the user
      await sendPaymentFailedEmail(object.customer_email);
      break;

    default:
      // Unhandled event type — log and continue
      console.log(`Unhandled Stripe event: ${type}`);
  }
}

Enter fullscreen mode Exit fullscreen mode

invoice.payment_succeeded on subscription_cycle is how your database learns that a subscription has renewed for another month. Without this handler, your currentPeriodEnd date will expire and you will incorrectly restrict access to paying customers.

invoice.payment_failed is how you detect and respond to failed renewals before Stripe's dunning process results in cancellation. Applications that handle this event can surface in-app notices to users, trigger email nudges, and prevent unnecessary churn.

Step 4: Model Subscription State in Your Database

The webhook handlers above depend on a subscriptions table that reflects Stripe's state. A minimal schema:

CREATE TABLE subscriptions (
  id              UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id         UUID NOT NULL REFERENCES users(id),
  stripe_subscription_id VARCHAR(255) UNIQUE NOT NULL,
  stripe_price_id        VARCHAR(255) NOT NULL,
  status                 VARCHAR(50) NOT NULL,  -- active, past_due, canceled, trialing
  current_period_end     TIMESTAMP NOT NULL,
  cancel_at_period_end   BOOLEAN DEFAULT FALSE,
  created_at             TIMESTAMP DEFAULT NOW(),
  updated_at             TIMESTAMP DEFAULT NOW()
);

Enter fullscreen mode Exit fullscreen mode

Gate feature access using the status and current_period_end columns — not just status alone. A subscription in past_due status may still have access until the period ends, depending on your product's grace period policy.

// Middleware to check subscription access
async function requireActiveSubscription(req, res, next) {
  const subscription = await db.subscriptions.findOne({
    where: { userId: req.user.id }
  });

  const isActive = subscription &&
    ['active', 'trialing'].includes(subscription.status) &&
    new Date(subscription.currentPeriodEnd) > new Date();

  if (!isActive) {
    return res.status(403).json({ error: 'Active subscription required' });
  }

  next();
}

Enter fullscreen mode Exit fullscreen mode


🔗 Step 5: Surface the Billing Portal

Stripe's Customer Portal handles plan changes, payment method updates, and cancellations — without you building any of that UI.

// POST /api/billing/portal
app.post('/api/billing/portal', requireAuth, async (req, res) => {
  try {
    const session = await stripe.billingPortal.sessions.create({
      customer: req.user.stripeCustomerId,
      return_url: `${process.env.APP_URL}/dashboard`
    });

    res.json({ url: session.url });
  } catch (err) {
    res.status(500).json({ error: 'Failed to open billing portal' });
  }
});

Enter fullscreen mode Exit fullscreen mode

Enable the portal in the Stripe dashboard under Settings > Billing > Customer Portal before testing. Configure which plans customers can switch between and whether they can cancel immediately or at period end.

Where AI-Generated Apps Fit Into This

Some full-stack AI builders scaffold portions of the Stripe integration as part of their generated output. The scaffold quality varies significantly — checkout session creation is commonly handled, but webhook infrastructure and subscription state management are frequently incomplete.

Platforms like this hybrid builder include Stripe and PayPal scaffolding as part of the generated application, with webhook handlers and subscription state management included by default. For teams evaluating whether to build the billing layer from scratch or use pre-scaffolded output, the practical difference is several days of integration work and debugging — primarily in the webhook handling and state management layers covered in this guide.

Testing Your Integration End-to-End

Use Stripe's test mode and the Stripe CLI to simulate the full billing lifecycle before going live:

# Install Stripe CLI and listen for local webhooks
stripe listen --forward-to localhost:3000/api/billing/webhook

# Simulate specific events
stripe trigger customer.subscription.created
stripe trigger invoice.payment_failed
stripe trigger customer.subscription.deleted

Enter fullscreen mode Exit fullscreen mode

Test cards for specific scenarios:

Scenario Card Number
Successful payment 4242 4242 4242 4242
Payment requires authentication 4000 0025 0000 3155
Payment declined 4000 0000 0000 9995
Insufficient funds 4000 0000 0000 9995

Run through the full cycle: subscribe → renew → fail a payment → recover → cancel. Each transition should produce the correct status update in your database.

Common Questions

Why does my webhook keep returning 400 errors?

The most common cause is JSON body parsing running before the raw body parser on the webhook route. Ensure express.raw() is applied specifically to /api/billing/webhook and that express.json() is not globally applied before it.

Should I use Stripe Checkout or a custom payment form?

Stripe Checkout handles 3D Secure, card validation, tax calculation, and localization automatically. Custom payment forms require explicit handling of all of these. For SaaS subscriptions, Checkout is the correct starting point for the large majority of use cases.

How do I handle the period between a failed payment and subscription cancellation?

Stripe's dunning configuration (in dashboard settings) determines how many retry attempts are made and over what period. During this window, the subscription status is past_due. Surfacing an in-app banner to users in past_due status — directing them to the billing portal to update their payment method — reduces involuntary churn significantly.

Can I let users switch between monthly and annual plans?

Yes, via the Stripe Customer Portal or by using stripe.subscriptions.update() with a new price ID and proration_behavior: 'create_prorations'. The billing portal handles this with no code required if configured correctly.

Further Reading