Stripe Checkout | Bootspring Docs

One-time payments with Stripe Checkout.

Dependencies#

npm install stripe @stripe/stripe-js

Environment Variables#

# .env.local
STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_APP_URL=http://localhost:3000

Stripe Client Setup#

// lib/stripe.ts
import Stripe from 'stripe';

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2024-11-20.acacia',
  typescript: true,
});

// lib/stripe-client.ts
import { loadStripe } from '@stripe/stripe-js';

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

Create Checkout Session#

// app/api/checkout/route.ts
import { auth } from '@clerk/nextjs/server';
import { NextRequest, NextResponse } from 'next/server';
import { stripe } from '@/lib/stripe';
import { prisma } from '@/lib/prisma';

export async function POST(request: NextRequest) {
  const { userId } = await auth();
  if (!userId) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const body = await request.json();
  const { priceId, quantity = 1 } = body;

  // Get or create Stripe customer
  const user = await prisma.user.findUnique({
    where: { clerkId: userId },
  });

  let customerId = user?.stripeCustomerId;

  if (!customerId) {
    const customer = await stripe.customers.create({
      email: user?.email,
      metadata: { userId },
    });
    customerId = customer.id;

    await prisma.user.update({
      where: { clerkId: userId },
      data: { stripeCustomerId: customerId },
    });
  }

  // Create checkout session
  const session = await stripe.checkout.sessions.create({
    customer: customerId,
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
      {
        price: priceId,
        quantity,
      },
    ],
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/checkout/cancel`,
    metadata: {
      userId,
    },
  });

  return NextResponse.json({ sessionId: session.id, url: session.url });
}

Checkout Button Component#

// components/CheckoutButton.tsx
'use client';

import { useState } from 'react';
import { stripePromise } from '@/lib/stripe-client';

interface CheckoutButtonProps {
  priceId: string;
  quantity?: number;
  children: React.ReactNode;
  className?: string;
}

export function CheckoutButton({
  priceId,
  quantity = 1,
  children,
  className,
}: CheckoutButtonProps) {
  const [loading, setLoading] = useState(false);

  const handleCheckout = async () => {
    setLoading(true);

    try {
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ priceId, quantity }),
      });

      const { sessionId, url } = await response.json();

      // Option 1: Redirect to Stripe hosted page
      if (url) {
        window.location.href = url;
        return;
      }

      // Option 2: Use Stripe.js redirect
      const stripe = await stripePromise;
      const { error } = await stripe!.redirectToCheckout({ sessionId });

      if (error) {
        console.error('Checkout error:', error);
      }
    } catch (error) {
      console.error('Checkout failed:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <button
      onClick={handleCheckout}
      disabled={loading}
      className={className}
    >
      {loading ? 'Loading...' : children}
    </button>
  );
}

Product Display#

// components/ProductCard.tsx
import { CheckoutButton } from './CheckoutButton';

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  priceId: string;
  image?: string;
}

export function ProductCard({ product }: { product: Product }) {
  return (
    <div className="border rounded-xl p-6 bg-white dark:bg-gray-900">
      {product.image && (
        <img
          src={product.image}
          alt={product.name}
          className="w-full h-48 object-cover rounded-lg mb-4"
        />
      )}
      <h3 className="text-xl font-semibold">{product.name}</h3>
      <p className="text-gray-600 dark:text-gray-400 mt-2">
        {product.description}
      </p>
      <div className="mt-4 flex items-center justify-between">
        <span className="text-2xl font-bold">
          ${(product.price / 100).toFixed(2)}
        </span>
        <CheckoutButton
          priceId={product.priceId}
          className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
        >
          Buy Now
        </CheckoutButton>
      </div>
    </div>
  );
}

Webhook Handler#

// app/api/webhooks/stripe/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { stripe } from '@/lib/stripe';
import { prisma } from '@/lib/prisma';
import Stripe from 'stripe';

export async function POST(request: NextRequest) {
  const body = await request.text();
  const signature = request.headers.get('stripe-signature')!;

  let event: Stripe.Event;

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    );
  } catch (err: any) {
    console.error('Webhook signature verification failed:', err.message);
    return NextResponse.json({ error: 'Invalid signature' }, { status: 400 });
  }

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;

      // Record the purchase
      await prisma.purchase.create({
        data: {
          stripeSessionId: session.id,
          stripeCustomerId: session.customer as string,
          userId: session.metadata?.userId!,
          amount: session.amount_total!,
          currency: session.currency!,
          status: 'completed',
        },
      });

      // Fulfill the order (e.g., grant access, send email)
      await fulfillOrder(session);
      break;
    }

    case 'payment_intent.payment_failed': {
      const paymentIntent = event.data.object as Stripe.PaymentIntent;
      console.error('Payment failed:', paymentIntent.id);
      break;
    }
  }

  return NextResponse.json({ received: true });
}

async function fulfillOrder(session: Stripe.Checkout.Session) {
  const userId = session.metadata?.userId;
  if (!userId) return;

  // Example: Grant product access
  await prisma.user.update({
    where: { clerkId: userId },
    data: {
      purchasedProducts: {
        push: session.metadata?.productId,
      },
    },
  });

  // Send confirmation email
  // await sendPurchaseConfirmationEmail(userId, session);
}

Success Page#

// app/checkout/success/page.tsx
import { stripe } from '@/lib/stripe';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { CheckCircle } from 'lucide-react';

export default async function SuccessPage({
  searchParams,
}: {
  searchParams: { session_id?: string };
}) {
  if (!searchParams.session_id) {
    redirect('/');
  }

  const session = await stripe.checkout.sessions.retrieve(
    searchParams.session_id
  );

  if (session.payment_status !== 'paid') {
    redirect('/checkout/cancel');
  }

  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-4" />
        <h1 className="text-3xl font-bold mb-2">Payment Successful!</h1>
        <p className="text-gray-600 mb-6">
          Thank you for your purchase. You will receive a confirmation email shortly.
        </p>
        <Link
          href="/dashboard"
          className="px-6 py-3 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
        >
          Go to Dashboard
        </Link>
      </div>
    </div>
  );
}

Cancel Page#

// app/checkout/cancel/page.tsx
import Link from 'next/link';
import { XCircle } from 'lucide-react';

export default function CancelPage() {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="text-center">
        <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
        <h1 className="text-3xl font-bold mb-2">Payment Cancelled</h1>
        <p className="text-gray-600 mb-6">
          Your payment was cancelled. No charges were made.
        </p>
        <Link
          href="/pricing"
          className="px-6 py-3 bg-brand-600 text-white rounded-lg hover:bg-brand-700"
        >
          Return to Pricing
        </Link>
      </div>
    </div>
  );
}

Database Schema#

// prisma/schema.prisma
model User {
  id               String     @id @default(cuid())
  clerkId          String     @unique
  email            String
  stripeCustomerId String?    @unique
  purchasedProducts String[]

  purchases        Purchase[]

  @@index([stripeCustomerId])
}

model Purchase {
  id               String   @id @default(cuid())
  stripeSessionId  String   @unique
  stripeCustomerId String
  userId           String
  user             User     @relation(fields: [userId], references: [clerkId])
  amount           Int
  currency         String
  status           String

  createdAt        DateTime @default(now())

  @@index([userId])
  @@index([stripeCustomerId])
}