Tutorials

Tutorial: Stripe Integration (Stripe Checkout)

Melden

Dieses Tutorial führt dich Schritt für Schritt durch die Integration von Stripe in deine Website oder Anwendung. Wir konzentrieren uns hier auf die modernste und einfachste Methode: Stripe Checkout.

Stripe Checkout ist eine vorgefertigte, von Stripe gehostete Zahlungsseite, die optimiert ist für Desktop, Tablet und Mobilgeräte.

1. Voraussetzungen

  • Ein Stripe-Konto (kostenlos registrieren unter stripe.com).
  • Eine Entwicklungsumgebung (z. B. Node.js, PHP oder Python). In diesem Beispiel nutzen wir Node.js.
  • Grundkenntnisse in HTML und JavaScript.

Schritt 2: API-Keys finden

Logge dich in dein Stripe-Dashboard ein und aktiviere den "Test-Modus" (oben rechts).

  1. Gehe zu Entwickler -> API-Schlüssel.
  2. Du benötigst zwei Schlüssel:
    • Veröffentlichbarer Schlüssel (Publishable Key): Für das Frontend (beginnt mit pk_test_).
    • Geheimer Schlüssel (Secret Key): Für das Backend (beginnt mit sk_test_). Niemals öffentlich teilen!

Schritt 3: Backend-Setup (Server)

Der Server erstellt eine "Checkout-Session" und sendet die URL an den Client.

  1. Erstelle einen Ordner und installiere Stripe:

    mkdir stripe-integration && cd stripe-integration
npm init -y
npm install stripe express

  2. Erstelle eine Datei namens server.js:

    const stripe = require('stripe')('DEIN_SECRET_KEY_HIER');
const express = require('express');
const app = express();
app.use(express.static('public')); // Ordner für HTML-Dateien

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

app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        // Preis-ID aus dem Stripe-Dashboard oder Ad-hoc-Daten
        price_data: {
          currency: 'eur',
          product_data: { name: 'T-Shirt' },
          unit_amount: 2000, // 20,00 € (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: Frontend-Setup (Client)

Erstelle einen Ordner namens public und darin eine index.html.

  1. index.html:

    <!DOCTYPE html>
<html>
<head>
  <title>Stripe Kauf</title>
</head>
<body>
  <section>
    <div class="product">
      <h3>T-Shirt</h3>
      <h5>20,00 €</h5>
    </div>
    <form action="/create-checkout-session" method="POST">
      <button type="submit">Jetzt kaufen</button>
    </form>
  </section>
</body>
</html>

  2. Erstelle zusätzlich eine success.html ("Danke für den Kauf!") und eine cancel.html ("Vorgang abgebrochen").

Schritt 5: Testen

  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 zum Testen die Test-Kreditkartennummer von Stripe:
    • Karte: 4242 4242 4242 4242
    • Ablaufdatum: beliebig in der Zukunft
    • CVC: beliebige 3 Ziffern

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

Wenn eine Zahlung erfolgreich ist, muss dein Server darüber informiert werden (z. B. um eine E-Mail zu senden oder den Status in der Datenbank zu ändern).

  • Gehe im Dashboard zu Entwickler -> Webhooks.
  • Erstelle einen Endpunkt, der auf das Event checkout.session.completed hört.
  • Stripe sendet dann eine POST-Anfrage an deinen Server.

Schritt 7: Live gehen

Wenn alles funktioniert:

  1. Deaktiviere den "Test-Modus" im Stripe Dashboard.
  2. Schließe die Konto-Aktivierung ab (Bankdaten hinterlegen).
  3. Tausche die API-Keys (pk_test_... und sk_test_...) gegen die Live-Keys (pk_live_... und sk_live_...) aus.
  4. Ändere die YOUR_DOMAIN im Code auf deine echte URL (z. B. https://deineseite.de).

Hilfreiche Tools:

  • Stripe CLI: Super zum Testen von Webhooks auf dem lokalen Rechner.
  • Stripe Dokumentation: stripe.com/docs – Die wahrscheinlich beste Entwickler-Dokumentation der Welt.

Sicherheitshinweis: Nutze für den Live-Betrieb immer HTTPS, um die Daten deiner Kunden zu schützen!

0