Step-by-Step: Add Stripe Checkout to Your Next.js App for SaaS Monetization

1. User clicks "Buy" -> 2. Next.js API creates Stripe Session -> 3. Redirect to Stripe Checkout
                                                                            -> 6. User redirected to success page -> 5. Your API processes webhook -> 4. Stripe sends webhook (payment complete)

npm install stripe
# or
yarn add stripe

STRIPE_SECRET_KEY=sk_test_YOUR_SECRET_KEY
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_YOUR_PUBLISHABLE_KEY
NEXT_PUBLIC_BASE_URL=http://localhost:3000 # Your app's base URL

// pages/api/create-stripe-checkout-session.ts
import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-10-16', // Use current API version
});

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method Not Allowed' });
  }

  const { priceId, quantity = 1, userId } = req.body; // userId for metadata

  try {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price: priceId, // The Price ID from Stripe Dashboard
          quantity: quantity,
        },
      ],
      mode: 'subscription', // or 'payment' for one-time purchases
      success_url: `${process.env.NEXT_PUBLIC_BASE_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_BASE_URL}/cancel`,
      metadata: {
        userId: userId, // Attach user ID for later use in webhooks
      },
      customer_email: 'customer@example.com', // Pre-fill email if known
    });

    res.status(200).json({ sessionId: session.id });
  } catch (error: any) {
    console.error('Error creating checkout session:', error);
    res.status(500).json({ error: error.message });
  }
}

// components/BuyButton.tsx
'use client'; // For App Router

import { loadStripe } from '@stripe/stripe-js';
import React from 'react';

// Make sure to call `loadStripe` outside of a component-'s render to avoid
// recreating the Stripe object on every render.
const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

interface BuyButtonProps {
  priceId: string;
  userId: string; // Or get from auth context
}

export function BuyButton({ priceId, userId }: BuyButtonProps) {
  const handleClick = async () => {
    const stripe = await stripePromise;

    // Call your API route to create a checkout session
    const response = await fetch('/api/create-stripe-checkout-session', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ priceId, userId }),
    });

    const session = await response.json();

    if (response.ok && stripe) {
      // Redirect to Stripe Checkout
      const result = await stripe.redirectToCheckout({
        sessionId: session.sessionId,
      });

      if (result.error) {
        console.error(result.error.message);
      }
    } else {
      console.error('Failed to create Stripe Checkout session:', session.error);
    }
  };

  return (
    <button
      onClick={handleClick}
      className="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-150 ease-in-out"
    >
      Upgrade to Pro
    </button>
  );
}

// pages/pricing.tsx or app/pricing/page.tsx
import { BuyButton } from '../components/BuyButton';

export default function PricingPage() {
  const currentUserId = 'user_123'; // Replace with actual user ID from your auth system

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold mb-8">Choose Your Plan</h1>
      <div className="grid md:grid-cols-2 gap-8 max-w-4xl">
        {/* Basic Plan */}
        <div className="bg-gray-800 p-8 rounded-lg shadow-xl border border-gray-700">
          <h2 className="text-2xl font-bold mb-4">Basic Plan</h2>
          <p className="text-gray-400 mb-6">Access to core features.</p>
          <p className="text-4xl font-extrabold mb-8">$0/month</p>
          <button className="px-6 py-3 bg-gray-600 text-white font-semibold rounded-lg cursor-not-allowed">
            Current Plan
          </button>
        </div>

        {/* Pro Plan */}
        <div className="bg-gradient-to-br from-purple-800 to-indigo-800 p-8 rounded-lg shadow-xl border border-purple-700">
          <h2 className="text-2xl font-bold mb-4">Pro Plan</h2>
          <p className="text-gray-200 mb-6">Unlock all premium features!</p>
          <p className="text-4xl font-extrabold mb-8">$10/month</p>
          <BuyButton priceId="price_12345" userId={currentUserId} />{' '}
          {/* Replace with your actual price ID */}
        </div>
      </div>
    </div>
  );
}

// pages/success.tsx
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import { CheckCircleIcon } from '@heroicons/react/24/solid';

export default function SuccessPage() {
  const router = useRouter();
  const { session_id } = router.query;
  const [loading, setLoading] = useState(true);
  const [message, setMessage] = useState('Verifying your payment...');

  useEffect(() => {
    if (session_id) {
      // In a real app, you might want to verify the session server-side
      // to update your user's subscription status based on a webhook.
      // For now, we'll just show a success message.
      setMessage('Payment successful! Your subscription is now active.');
      setLoading(false);
    } else if (!router.isReady) {
      // Wait for router to be ready to access query params
      return;
    } else {
      // If no session_id is present, something went wrong or direct access
      setMessage('Something went wrong or invalid access.');
      setLoading(false);
    }
  }, [session_id, router.isReady]);

  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
      {loading ? (
        <p className="text-xl">Loading...</p>
      ) : (
        <div className="text-center">
          <CheckCircleIcon className="h-24 w-24 text-green-500 mx-auto mb-6" />
          <h1 className="text-3xl font-bold mb-4">Thank You!</h1>
          <p className="text-lg text-gray-300">{message}</p>
          <p className="mt-8">
            <a href="/dashboard" className="text-blue-400 hover:underline">
              Go to Dashboard
            </a>
          </p>
        </div>
      )}
    </div>
  );
}

// pages/cancel.tsx
import { XCircleIcon } from '@heroicons/react/24/solid';

export default function CancelPage() {
  return (
    <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
      <div className="text-center">
        <XCircleIcon className="h-24 w-24 text-red-500 mx-auto mb-6" />
        <h1 className="text-3xl font-bold mb-4">Payment Canceled</h1>
        <p className="text-lg text-gray-300">
          Your payment was not completed. Please try again or contact support if
          you have any questions.
        </p>
        <p className="mt-8">
          <a href="/pricing" className="text-blue-400 hover:underline">
            Back to Pricing
          </a>
        </p>
      </div>
    </div>
  );
}

Stripe Event -> Webhook POST to API -> Verify Signature -> Update Database -> Send Confirmation Email

// pages/api/stripe-webhook.ts
import { NextApiRequest, NextApiResponse } from 'next';
import Stripe from 'stripe';
import { buffer } from 'micro'; // Required for raw body parsing

// Initialize Stripe with your secret key
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2023-10-16',
});

// Stripe requires the raw body for webhook signature verification.
// We disable Next.js's body parsing for this route.
export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  if (req.method !== 'POST') {
    return res.status(405).send('Method Not Allowed');
  }

  const buf = await buffer(req);
  const signature = req.headers['stripe-signature'];

  let event: Stripe.Event;

  try {
    // Verify the event with your webhook secret
    event = stripe.webhooks.constructEvent(
      buf,
      signature!,
      process.env.STRIPE_WEBHOOK_SECRET! // Get this from Stripe Dashboard -> Webhooks
    );
  } catch (err: any) {
    console.error(`Webhook Error: ${err.message}`);
    return res.status(400).send(`Webhook Error: ${err.message}`);
  }

  // Handle the event
  switch (event.type) {
    case 'checkout.session.completed':
      const session = event.data.object as Stripe.Checkout.Session;
      console.log('Checkout Session Completed:', session.id);
      // Retrieve customer and subscription details
      const customerId = session.customer as string;
      const subscriptionId = session.subscription as string;
      const userId = session.metadata?.userId; // Our custom metadata

      // IMPORTANT: Update your database here!
      // Example: Mark user as 'pro' or create a subscription record
      console.log(`User ${userId} (Stripe Customer: ${customerId}) subscribed with Session: ${session.id}, Subscription: ${subscriptionId}`);
      // await db.updateUserSubscription(userId, { customerId, subscriptionId, status: 'active' });

      // You might also want to send a welcome email here
      break;
    case 'customer.subscription.updated':
      const subscription = event.data.object as Stripe.Subscription;
      console.log('Subscription Updated:', subscription.id, 'Status:', subscription.status);
      // Handle subscription changes (e.g., cancelled, renewed)
      // await db.updateSubscriptionStatus(subscription.id, subscription.status);
      break;
    case 'invoice.payment_succeeded':
      const invoice = event.data.object as Stripe.Invoice;
      console.log('Invoice Payment Succeeded:', invoice.id);
      // Optionally, record successful invoice payments
      break;
    // ... handle other event types
    default:
      console.warn(`Unhandled event type ${event.type}`);
  }

  // Return a 200 response to acknowledge receipt of the event
  res.status(200).json({ received: true });
}