⚡Backend

Stripe Payment einbauen

Zahlungen mit Stripe Checkout in Next.js integrieren

Zahlungen einbauen klingt komplex, aber Stripe Checkout macht es erstaunlich einfach. Du leitest den User zu Stripe weiter, Stripe macht den Rest.

Pro-Tip — Der schnelle Weg
Nutze Stripe Webhooks statt dich auf die Redirect-URL zu verlassen. Die Success-URL kann der User manipulieren -- der Webhook ist kryptographisch verifiziert.
Seite 1
1

Stripe installieren und Keys setzen

Installiere das Stripe SDK und speichere deine API-Keys sicher in der .env Datei.

npm install stripe


# .env.local
STRIPE_SECRET_KEY=sk_test_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
2

Checkout Session erstellen

Erstelle eine API-Route, die eine Stripe Checkout Session erzeugt.

// app/api/checkout/route.ts
import Stripe from "stripe";
import { NextResponse } from "next/server";


const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);


export async function POST(req: Request) {
 const { priceId } = await req.json();


 const session = await stripe.checkout.sessions.create({
 mode: "payment",
 payment_method_types: ["card"],
 line_items: [{ price: priceId, quantity: 1 }],
 success_url: `${process.env.NEXT_PUBLIC_URL}/success`,
 cancel_url: `${process.env.NEXT_PUBLIC_URL}/cancel`,
 });


 return NextResponse.json({ url: session.url });
}
3

Kaufen-Button einbauen

Erstelle einen Button, der die Checkout Session aufruft und weiterleitet.

"use client";


export default function BuyButton({ priceId }: { priceId: string }) {
 const handleCheckout = async () => {
 const res = await fetch("/api/checkout", {
 method: "POST",
 headers: { "Content-Type": "application/json" },
 body: JSON.stringify({ priceId }),
 });
 const { url } = await res.json();
 window.location.href = url;
 };


 return (
 <button onClick={handleCheckout} className="px-6 py-3 bg-blue-600 text-white rounded-lg">
 Jetzt kaufen
 </button>
 );
}
4

Webhook fuer Zahlungsbestaetigung

Empfange die Bestaetigung von Stripe per Webhook und schalte den Zugang frei.

// app/api/webhook/route.ts
import Stripe from "stripe";


const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);


export async function POST(req: Request) {
 const body = await req.text();
 const sig = req.headers.get("stripe-signature")!;


 const event = stripe.webhooks.constructEvent(body, sig, process.env.STRIPE_WEBHOOK_SECRET!);


 if (event.type === "checkout.session.completed") {
 const session = event.data.object;
 // Zugang freischalten, z.B. in Supabase
 console.log("Zahlung erfolgreich:", session.customer_email);
 }


 return new Response("OK");
}
Seite 2
Warum das funktioniert
  • Stripe Checkout ist PCI-compliant -- du musst keine Kreditkartendaten verarbeiten
  • Webhooks garantieren, dass du jede Zahlung mitbekommst, auch bei Netzwerk-Problemen
  • Von Test auf Live wechseln heisst nur: Keys austauschen
Tipps
  • Teste immer zuerst mit Stripe Test-Keys (sk_test, pk_test)
  • stripe listen --forward-to localhost:3000/api/webhook fuer lokales Webhook-Testing
  • Fuer Abos: Aendere mode von payment auf subscription
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen