Next.js – Payment Integration

Next.js

Payment Integration

Integrating Stripe checkout sessions in a Next.js application.

Stripe Checkout API: Creating a Stripe Checkout session via a Route Handler.

📄app/api/checkout/route.ts
TS

import { NextResponse } from 'next/server';
import Stripe from 'stripe';

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

export async function POST(request: Request) {
  try {
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: {
              name: 'Next.js Pro Course',
            },
            unit_amount: 9900, // $99.00
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: `${process.env.NEXT_PUBLIC_URL}/success?session_id={CHECKOUT_SESSION_ID}`,
      cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
    });

    return NextResponse.json({ sessionId: session.id });
  } catch (err: any) {
    return NextResponse.json({ error: err.message }, { status: 500 });
  }
}

Client Checkout Button: A React component that triggers the checkout process and redirects to Stripe.

📄components/CheckoutButton.tsx
TSX

'use client';
import { loadStripe } from '@stripe/stripe-js';

const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!
);

export default function CheckoutButton() {
  const handleCheckout = async () => {
    const stripe = await stripePromise;
    
    const response = await fetch('/api/checkout', {
      method: 'POST',
    });
    
    const { sessionId } = await response.json();
    
    // Redirect to Stripe Checkout
    const result = await stripe?.redirectToCheckout({
      sessionId,
    });
    
    if (result?.error) {
      console.error(result.error.message);
    }
  };

  return (
    <button 
      onClick={handleCheckout}
      className="bg-blue-600 text-white px-4 py-2 rounded"
    >
      Buy Now
    </button>
  );
}