Stripe Checkout

Stripe Checkout

Environment Variables

# .env.local
STRIPE_SECRET_KEY=sk_test_... # or sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...

Environment Validation

// lib/env.ts
import { z } from 'zod';

const stripeEnvSchema = z.object({
  STRIPE_SECRET_KEY: z.string().startsWith('sk_'),
  STRIPE_WEBHOOK_SECRET: z.string().startsWith('whsec_'),
});

export const stripeEnv = stripeEnvSchema.safeParse(process.env);

export function hasStripe(): boolean {
  return stripeEnv.success;
}

Stripe Client

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

if (!process.env.STRIPE_SECRET_KEY) {
  throw new Error('STRIPE_SECRET_KEY is not set');
}

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

Create Checkout Session (Server Action)

// lib/actions/stripe.ts
'use server';

import { redirect } from 'next/navigation';
import { stripe } from '@/lib/stripe';
import { getProgrammeBySlug } from '@/lib/data';
import type { Locale } from '@/i18n.config';

interface CreateCheckoutParams {
  programmeSlug: string;
  locale: Locale;
}

export async function createCheckoutSession({
  programmeSlug,
  locale,
}: CreateCheckoutParams) {
  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL!;
  const programme = await getProgrammeBySlug(locale, programmeSlug);

  if (!programme || !programme.stripePriceId) {
    throw new Error('Programme not found or not available for purchase');
  }

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: [
      {
        price: programme.stripePriceId,
        quantity: 1,
      },
    ],
    success_url: `${siteUrl}/${locale}/checkout/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${siteUrl}/${locale}/checkout/cancel`,
    metadata: {
      programmeSlug,
      locale,
    },
    locale: getStripeLocale(locale),
  });

  if (session.url) {
    redirect(session.url);
  }

  throw new Error('Failed to create checkout session');
}

function getStripeLocale(locale: Locale): Stripe.Checkout.SessionCreateParams.Locale {
  const map: Record<Locale, Stripe.Checkout.SessionCreateParams.Locale> = {
    'pt-PT': 'pt',
    'en': 'en',
    'tr': 'tr',
    'es': 'es',
    'fr': 'fr',
    'de': 'de',
  };
  return map[locale] || 'auto';
}

Buy Button Component

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

import { useTransition } from 'react';
import { useLocale, useTranslations } from 'next-intl';
import { createCheckoutSession } from '@/lib/actions/stripe';
import { Button } from '@/components/ui/button';
import type { Locale } from '@/i18n.config';

interface BuyButtonProps {
  programmeSlug: string;
  price: number;
  disabled?: boolean;
}

export function BuyButton({ programmeSlug, price, disabled }: BuyButtonProps) {
  const [isPending, startTransition] = useTransition();
  const locale = useLocale() as Locale;
  const t = useTranslations('checkout');

  const handleBuy = () => {
    startTransition(async () => {
      await createCheckoutSession({ programmeSlug, locale });
    });
  };

  return (
    <Button
     
      disabled={disabled || isPending}
      size="lg"
      className="w-full"
    >
      {isPending ? t('processing') : `${t('buy')} - €${price}`}
    </Button>
  );
}

Webhook Handler (Critical Security)

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

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

  if (!signature) {
    return NextResponse.json({ error: 'Missing signature' }, { status: 400 });
  }

  let event: Stripe.Event;

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

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;
      await handleSuccessfulPayment(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 handleSuccessfulPayment(session: Stripe.Checkout.Session) {
  const { programmeSlug, locale } = session.metadata || {};
  const customerEmail = session.customer_details?.email;

  // Grant access to programme
  // - Save to database
  // - Send confirmation email
  // - Generate access credentials

  console.log('Payment successful:', {
    sessionId: session.id,
    programmeSlug,
    customerEmail,
    locale,
  });
}

Success Page

// app/[locale]/checkout/success/page.tsx
import { stripe } from '@/lib/stripe';
import { getTranslations } from 'next-intl/server';
import { redirect } from 'next/navigation';

type Props = {
  params: Promise<{ locale: string }>;
  searchParams: Promise<{ session_id?: string }>;
};

export default async function CheckoutSuccessPage({
  params,
  searchParams,
}: Props) {
  const { locale } = await params;
  const { session_id } = await searchParams;
  const t = await getTranslations('checkout');

  if (!session_id) {
    redirect(`/${locale}`);
  }

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

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

  return (
    <div className="container mx-auto px-4 py-16 text-center">
      <h1 className="text-3xl font-bold mb-4">{t('success.title')}</h1>
      <p className="text-muted-foreground mb-8">{t('success.message')}</p>
      <p className="text-sm">
        {t('success.emailSent', { email: session.customer_details?.email })}
      </p>
    </div>
  );
}

Cancel Page

// app/[locale]/checkout/cancel/page.tsx
import { getTranslations } from 'next-intl/server';
import Link from 'next/link';
import { Button } from '@/components/ui/button';

export default async function CheckoutCancelPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const t = await getTranslations('checkout');

  return (
    <div className="container mx-auto px-4 py-16 text-center">
      <h1 className="text-3xl font-bold mb-4">{t('cancel.title')}</h1>
      <p className="text-muted-foreground mb-8">{t('cancel.message')}</p>
      <Button asChild>
        <Link href={`/${locale}/programmes`}>{t('cancel.backToProgrammes')}</Link>
      </Button>
    </div>
  );
}

Conditional Rendering (No Stripe)

// components/ProgrammeCard.tsx
import { hasStripe } from '@/lib/env';
import { BuyButton } from './BuyButton';
import { Button } from '@/components/ui/button';
import Link from 'next/link';

export function ProgrammeCard({ programme, locale }) {
  return (
    <div>
      {/* Programme details */}
      
      {hasStripe() ? (
        <BuyButton programmeSlug={programme.slug} price={programme.price} />
      ) : (
        <Button asChild variant="outline">
          <Link href={`/${locale}/contact`}>Contact to Purchase</Link>
        </Button>
      )}
    </div>
  );
}

Testing Webhooks Locally

# Install Stripe CLI
stripe listen --forward-to localhost:3000/api/webhooks/stripe

# Use the webhook signing secret from CLI output