Forem: zahg

How to Build a Scalable Payment System with Stripe API in 2026

zahg — Wed, 18 Feb 2026 20:22:50 +0000

How to Build a Scalable Payment System with Stripe API in 2026

Building a payment system from scratch is complex. Between handling credit card security, PCI compliance, and fraud prevention, most teams shouldn't reinvent the wheel. That's where Stripe comes in.

In this guide, I'll walk you through building a production-ready payment system using Stripe's API. By the end, you'll have a system that handles payments, subscriptions, webhooks, and customer management—all secure and compliant.

Why Stripe? The Realistic Comparison

Let me be direct: don't build your own payment processor. Here's why:

Security: PCI compliance is a nightmare. Stripe handles it.
Compliance: Stripe operates in 195+ countries with local payment methods.
Reliability: 99.99% uptime. Your homemade system won't match that.
Speed: Integration takes hours, not months.
Cost: Stripe charges 2.9% + $0.30 per transaction. That's industry standard.

If your business is payments, use Stripe. If your business is something else, definitely use Stripe.

Getting Started: API Keys and Basic Setup

1. Create a Stripe Account

Go to Stripe and sign up. You'll immediately get:

Publishable key (safe to use in client code)
Secret key (keep this private—never expose it)

2. Install the Stripe SDK

npm install stripe

3. Initialize the Client

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

That's it. You're ready to accept payments.

Building a Simple Checkout Flow

Here's a complete example: a user buys a product for $29.99.

Backend: Create a Payment Intent

const express = require('express');
const app = express();
app.use(express.json());

app.post('/create-payment-intent', async (req, res) => {
  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: 2999, // $29.99 in cents
      currency: 'usd',
      payment_method_types: ['card'],
    });

    res.json({ clientSecret: paymentIntent.client_secret });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

app.listen(4000, () => console.log('Server running on port 4000'));

Frontend: Collect Card Details

On the client side, use Stripe.js to collect the payment:

<script src="https://js.stripe.com/v3/"></script>
<form id="payment-form">
  <div id="card-element"></div>
  <button id="submit-button">Pay Now</button>
</form>

<script>
const stripe = Stripe('YOUR_PUBLISHABLE_KEY');
const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

document.getElementById('submit-button').addEventListener('click', async (e) => {
  e.preventDefault();

  // Get client secret from your backend
  const response = await fetch('/create-payment-intent', { method: 'POST' });
  const { clientSecret } = await response.json();

  // Confirm the payment
  const result = await stripe.confirmCardPayment(clientSecret, {
    payment_method: {
      card: cardElement,
      billing_details: { name: 'John Doe' },
    },
  });

  if (result.error) {
    alert(result.error.message);
  } else if (result.paymentIntent.status === 'succeeded') {
    alert('Payment successful!');
  }
});
</script>

That's it. You've built a payment system. The card details never touch your server (Stripe handles that), and you're fully PCI compliant.

Handling Subscriptions

Most SaaS companies need recurring payments. Stripe makes this straightforward:

app.post('/create-subscription', async (req, res) => {
  try {
    const subscription = await stripe.subscriptions.create({
      customer: 'cus_123456', // Stripe customer ID
      items: [{ price: 'price_plan_id' }],
      payment_settings: {
        save_default_payment_method: 'on_subscription',
        default_mandate_id: 'mandate_123', // For SCA/3DS
      },
      expand: ['latest_invoice.payment_intent'],
    });

    res.json(subscription);
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

Stripe automatically:

Charges customers on schedule
Handles failed payments with retries
Sends renewal emails
Processes cancellations

Webhooks: Real-Time Event Handling

Your app needs to react to Stripe events. Use webhooks:

app.post('/webhook', express.raw({type: 'application/json'}), (req, res) => {
  const event = JSON.parse(req.body);

  switch (event.type) {
    case 'payment_intent.succeeded':
      console.log('Payment succeeded:', event.data.object);
      // Update your database, send confirmation email
      break;

    case 'charge.failed':
      console.log('Charge failed:', event.data.object);
      // Alert user, trigger retry
      break;

    case 'customer.subscription.deleted':
      console.log('Subscription canceled:', event.data.object);
      // Disable access, send goodbye email
      break;

    default:
      console.log('Unhandled event:', event.type);
  }

  res.json({received: true});
});

Pro tip: Use Stripe's webhook signing to verify events are legitimate:

const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET;

app.post('/webhook', express.raw({type: 'application/json'}), (req, res) => {
  const sig = req.headers['stripe-signature'];

  try {
    const event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
    // Process event...
  } catch (error) {
    return res.status(400).send(`Webhook error: ${error.message}`);
  }

  res.json({received: true});
});

Best Practices for Production

Never expose your secret key. Use environment variables.
Validate webhook signatures. Don't trust unsigned requests.
Store customer IDs. Link them to your users so you can process refunds/updates.
Test extensively. Use Stripe's test card numbers (4242 4242 4242 4242).
Handle idempotency. Use idempotency keys for crucial operations.
Log everything. You'll need audit trails for compliance.

Real-World Scenario: A SaaS Subscription Site

Let's say you're building a tool that costs $29/month. Here's the flow:

User signs up → Create Stripe customer
User enters card → Create payment method
User confirms → Create subscription
Stripe charges monthly → Webhook notifies your app
User cancels → Delete subscription, revoke access

// Create customer
const customer = await stripe.customers.create({
  email: 'user@example.com',
  name: 'John Doe',
});

// Attach payment method
const paymentMethod = await stripe.paymentMethods.create({
  type: 'card',
  card: { /* card details from frontend */ },
});

await stripe.paymentMethods.attach(paymentMethod.id, {
  customer: customer.id,
});

// Create subscription
const subscription = await stripe.subscriptions.create({
  customer: customer.id,
  items: [{ price: 'price_monthly_plan' }],
  default_payment_method: paymentMethod.id,
});

Boom. Your SaaS is now monetized.

Monitoring and Debugging

Use the Stripe Dashboard to:

View all transactions in real-time
Test webhooks using the webhook debugger
Check failed payments and retry logs
Monitor refunds and chargebacks

For local development, use Stripe CLI to forward webhooks to your machine:

stripe listen --forward-to localhost:4000/webhook

Costs and ROI

Processing fee: 2.9% + $0.30 (standard)
Payout schedule: 2-day rolling basis
Monthly volume: $1000 → $29 in fees
Monthly volume: $100k → $2929 in fees

For most startups, this is cheaper than hiring a payments engineer.

Common Mistakes to Avoid

Storing card data yourself. Don't. Use Stripe Elements.
Not handling failed payments. Stripe retries, but you should too.
Ignoring webhooks. Your customer status won't sync if you do.
Using the same key in dev/prod. Stripe provides separate keys for this.
Not testing cancellations. Test the full lifecycle.

Conclusion

Building with Stripe is fast, secure, and scales with you. You can launch a revenue-generating SaaS in a weekend using their API.

Start here: Stripe Dashboard → Create account → Get API keys → Follow the examples above.

Want to learn about advanced features like Connect (for marketplaces), Radar (for fraud), or Billing (for invoicing)? Let me know in the comments.

Published: February 2026
Questions? Check Stripe Docs or leave a comment.

The Complete Guide to Deploying Next.js Apps in 2026: Vercel, Self-Hosted, and Everything In Between

zahg — Wed, 18 Feb 2026 20:22:48 +0000

The Complete Guide to Deploying Next.js Apps in 2026: Vercel, Self-Hosted, and Everything In Between

Your Next.js app is ready. You've tested it locally, fixed the bugs, and now you're wondering: where do I put this thing?

This guide covers every realistic deployment option for Next.js in 2026, from dead-simple (Vercel) to fully custom (your own VPS). I'll walk through each, with code examples and real costs.

Option 1: Vercel (Recommended for 90% of Teams)

TL;DR: Deploy directly from GitHub. Zero config. Works.

Vercel is built by the creators of Next.js. It's optimized for it, and honestly, it just works.

Why Vercel?

No configuration needed. Git push → deployed.
Free tier includes: 100GB bandwidth, 100k Function invocations, unlimited deployments.
Automatic scaling. Your app handles traffic spikes automatically.
Edge functions. Run code close to your users, globally.
Environment variables. Managed securely in the dashboard.
Database integration. Connect Postgres, Redis, etc. directly from the dashboard.

Deploying to Vercel in 3 Minutes

Connect your GitHub repo
- Go to Vercel
- Click "Import Project"
- Select your Next.js repo
- Click "Import"
That's it. Vercel auto-detects Next.js and deploys it.
Your app is live at: yourproject.vercel.app

Environment Variables

In your Vercel dashboard, add environment variables:

NEXT_PUBLIC_API_URL=https://api.example.com
DATABASE_URL=postgresql://user:pass@host/db
STRIPE_SECRET_KEY=sk_test_xxx

Your Next.js app reads them immediately.

Serverless Functions

Next.js API routes automatically become serverless functions on Vercel:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' });
}

No configuration. It's just a function on the server, deployed globally.

Edge Functions (New in 2026)

Run code at the edge (CDN nodes worldwide) with zero cold start:

// middleware.js (runs at the edge)
import { NextResponse } from 'next/server';

export function middleware(request) {
  // Block requests from certain countries
  const country = request.geo.country;
  if (country === 'XX') {
    return NextResponse.error();
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/api/*'],
};

Costs

Hobby (free): Up to 100GB bandwidth, good for side projects
Pro ($20/month): Unlimited bandwidth, analytics, team collaborators
Enterprise: Custom pricing

For most applications, the free tier or $20/month is sufficient.

When to Use Vercel

✅ Building a SaaS product
✅ Prototyping quickly
✅ Small to medium traffic sites
✅ Teams that want zero ops
❌ Extreme scale (100k+ concurrent users)
❌ Custom infrastructure needs

Option 2: Railway (Best Alternative)

Cost: $5/month baseline, $0.30/hour per service

Railway is like Vercel's rebellious cousin. Less opinionated, more flexible.

Deploy in 2 Minutes

npm install -g railway
railway login
railway init
railway up

That's it. Railway reads your package.json and deploys.

Key Features

Databases included: Postgres, MySQL, MongoDB, Redis—click and create
Monitoring dashboard: See CPU, memory, errors in real-time
Preview deployments: Each git branch gets its own environment
Logs: Streaming logs directly in the CLI

When to Use Railway

✅ Need database out-of-the-box
✅ Want more control than Vercel
✅ Don't need global edge distribution
✅ Prefer CLI-first workflow

❌ Need serverless (Railway is containers)
❌ Extreme scale requirements

Option 3: Docker + AWS ECS (Self-Hosted, Professional)

Cost: $15-50/month for small apps, $500+/month for production scale

You want full control? Here's how to deploy Next.js on AWS.

Build a Docker Image

Create Dockerfile:

FROM node:18-alpine

WORKDIR /app

# Copy package files
COPY package*.json ./

# Install dependencies
RUN npm ci

# Copy app code
COPY . .

# Build Next.js
RUN npm run build

# Expose port
EXPOSE 3000

# Start app
CMD ["npm", "start"]

Push to ECR (AWS Container Registry)

# Create ECR repo
aws ecr create-repository --repository-name my-nextjs-app

# Build and push
docker build -t my-nextjs-app:latest .
docker tag my-nextjs-app:latest 123456789.dkr.ecr.us-east-1.amazonaws.com/my-nextjs-app:latest
docker push 123456789.dkr.ecr.us-east-1.amazonaws.com/my-nextjs-app:latest

Deploy to ECS

Create an ECS cluster
Create a task definition pointing to your ECR image
Create a service from that task definition
Attach an Application Load Balancer (ALB)
Point your domain to the ALB

When to Use Docker + AWS ECS

✅ Need complete control
✅ Complex infrastructure requirements
✅ Compliance/security requirements
✅ Plan to scale significantly

❌ Spend extra time on DevOps
❌ Higher learning curve
❌ More expensive than Vercel

Option 4: DigitalOcean App Platform (Middle Ground)

Cost: $5-12/month for small apps

Think of it as "Railway but slightly cheaper."

Deploy from GitHub

Connect your GitHub repo to DigitalOcean
Set environment variables
Choose resources (CPU, memory)
Click "Deploy"

That's it. App runs on DigitalOcean's infrastructure.

Pros

Cheap
Simple dashboard
Built-in database options
Good documentation

Cons

Less sophisticated than Vercel
No edge functions
Slower than Vercel globally

Performance Comparison (2026)

Platform	Cold Start	Global CDN	Database	Free Tier	Easiest
Vercel	<100ms	Yes	Yes	Yes	✅ Yes
Railway	500ms	No	Yes	Yes	Yes
DigitalOcean	1-2s	No	Yes	Yes	Yes
AWS ECS	Depends	Optional	Optional	No	No

For 90% of use cases, pick Vercel. It's fast, cheap, and just works.

My Recommendation for Different Scenarios

Building a Side Project

→ Vercel (free tier, zero setup)

Building a SaaS

→ Vercel (scales beautifully, great analytics)

Building a Complex Backend

→ AWS ECS (full control, more complexity)

Starting Out, Want to Learn

→ Railway (simpler than AWS, more flexible than Vercel)

Want Cheap & Simple

→ DigitalOcean App Platform ($5-12/month)

Step-by-Step: Deploy to Vercel Today

Create a Vercel account: Vercel.com
Import your GitHub repo: Click "Import Project" → select your repo
Set environment variables: Add any secrets in the dashboard
Click "Deploy"
Your app is live. Share the URL.

That's seriously it.

Post-Deployment Checklist

[ ] Test the live app
[ ] Set up custom domain (Vercel dashboard → Domains)
[ ] Enable HTTPS (automatic on Vercel)
[ ] Set up monitoring/error tracking (Sentry, LogRocket)
[ ] Configure CI/CD (auto-deploy on git push)
[ ] Set up backups (if you have a database)
[ ] Monitor costs (check Vercel dashboard monthly)

Common Mistakes to Avoid

Leaving NEXT_PUBLIC_ prefixes on secret keys. They're visible in the browser.
Not setting up monitoring. You won't know when your app breaks.
Deploying without testing. Test locally first.
Forgetting about environment variables. Your app will crash if they're missing.
Not using a CDN. Vercel handles this, but on self-hosted, use Cloudflare.

Conclusion

In 2026, deploying a Next.js app is dead simple. Push to GitHub, and it's live.

For 90% of projects, Vercel is the answer. No ops, automatic scaling, and you pay only for what you use.

For everything else, pick your platform based on your needs and budget.

Now stop reading and deploy something.

Published: February 2026
Need help? Check Next.js docs or ask in the comments.