Tutorials

Stripe Payment Integration: Der ultimative Guide für deine Website

Melden

Hier ist ein umfassendes Tutorial, wie du das Stripe Payment Gateway in deine Website integrierst. Dieser Guide konzentriert sich auf die modernste und einfachste Methode: Stripe Checkout.

Stripe ist einer der weltweit führenden Zahlungsanbieter. Mit Stripe Checkout kannst du eine vorkonfigurierte, sichere Bezahlseite nutzen, die PCI-konform ist und fast alle gängigen Zahlungsmethoden (Kreditkarte, Apple Pay, Google Pay, SEPA, etc.) unterstützt.

Schritt 1: Stripe Account erstellen & API-Keys finden

Bevor du mit dem Code startest, benötigst du ein Stripe-Konto.

  1. Registriere dich auf stripe.com.
  2. Gehe im Dashboard in den Testmodus (oben rechts aktivieren).
  3. Navigiere zu Entwickler > API-Schlüssel.
  4. Hier findest du zwei wichtige Schlüssel:
    • Veröffentlichbarer Schlüssel (Publishable Key): Wird im Frontend (Client) verwendet.
    • Geheimer Schlüssel (Secret Key): Wird auf dem Server (Backend) verwendet. Niemals öffentlich teilen!

Schritt 2: Die Logik verstehen

Eine sichere Integration besteht immer aus zwei Teilen:

  1. Frontend: Ein Button, der eine Anfrage an deinen Server sendet.
  2. Backend: Dein Server erstellt eine „Checkout Session“ bei Stripe und sendet die URL zurück. Der Nutzer wird dann dorthin weitergeleitet.

Schritt 3: Das Backend (Node.js Beispiel)

Stripe benötigt eine serverseitige Umgebung, um den geheimen Schlüssel sicher zu nutzen. Hier verwenden wir Node.js mit Express.

Installation der Bibliotheken:

npm install stripe express

Server-Code (server.js):

const stripe = require('stripe')('DEIN_GEHEIMER_SCHLÜSSEL_HIER');
const express = require('express');
const app = express();
app.use(express.static('public')); // Ordner für dein Frontend

const YOUR_DOMAIN = 'http://localhost:4242';

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        // Ersetze dies durch eine echte Preis-ID aus deinem Stripe-Dashboard
        price_data: {
          currency: 'eur',
          product_data: { name: 'T-Shirt' },
          unit_amount: 2000, // 20,00 EUR in Cents
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
  });

  res.redirect(303, session.url);
});

app.listen(4242, () => console.log('Server läuft auf Port 4242'));

Schritt 4: Das Frontend (HTML)

Erstelle eine einfache index.html in deinem public-Ordner.

<!DOCTYPE html>
<html lang="de">
<head>
    <title>Stripe Kauf</title>
</head>
<body>
    <h1>Produkt kaufen</h1>
    <p>T-Shirt - 20,00 €</p>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Jetzt bezahlen</button>
    </form>
</body>
</html>

Schritt 5: Testen der Integration

Stripe bietet Test-Kreditkartennummern an, damit du den Prozess ohne echtes Geld prüfen kannst.

  1. Starte deinen Server: node server.js.
  2. Öffne http://localhost:4242 im Browser.
  3. Klicke auf den Button. Du wirst zu Stripe weitergeleitet.
  4. Nutze die Testkarte: 4242 4242 4242 4242.
  5. Nach der Zahlung solltest du auf deine success.html weitergeleitet werden.

Schritt 6: Webhooks (Wichtig für die Produktion)

Wenn ein Kunde bezahlt, sendet Stripe ein Event an deine Website. Das ist wichtig, um z.B. eine Bestätigungs-E-Mail zu senden oder den Versand im System zu markieren.

  • Gehe im Dashboard auf Entwickler > Webhooks.
  • Erstelle einen Endpunkt, der auf checkout.session.completed hört.
  • In deinem Backend verarbeitest du diese Daten, um die Bestellung abzuschließen.

Schritt 7: Live gehen

Sobald alles im Testmodus funktioniert:

  1. Deaktiviere den Testmodus im Stripe-Dashboard.
  2. Hinterlege deine Bankdaten für Auszahlungen.
  3. Tausche den Test-Secret-Key und den Test-Publishable-Key in deinem Code gegen die Live-Keys aus.
  4. Stelle sicher, dass deine Website über HTTPS läuft (zwingend erforderlich).

Zusammenfassung der Vorteile:

  • Kein PCI-Aufwand: Stripe hostet das Zahlungsformular.
  • Mobile Optimiert: Apple Pay und Google Pay sind automatisch integriert.
  • Sicherheit: Sensible Daten berühren nie direkt deinen Server.

Viel Erfolg bei deiner Integration!

0