Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden

Zahlung annehmen

Nehmen Sie Zahlungen sicher online an.

Erstellen Sie ein Zahlungsformular oder verwenden Sie eine vorgefertigte Bezahlseite, um mit der Annahme von Online-Zahlungen zu beginnen.

Erstellen Sie eine Bezahlseite auf Ihrer Website mit Stripe Elements und Checkout Sessions, einer Integration, die Steuern, Rabatte, Versandgebühren und mehr verwaltet.

Kundenstandort
Größe
Design
Layout
Diese Demo zeigt Google Pay oder Apple Pay nur dann an, wenn Sie über eine aktive Karte mit einer der beiden Wallets verfügen.

Server einrichten
Serverseitig

Bevor Sie beginnen, müssen Sie sich für ein Stripe-Konto registrieren.

Verwenden Sie die offiziellen Bibliotheken von Stripe, um von Ihrer Anwendung aus auf die API zuzugreifen.

Command Line
npm install stripe@18.0.0 --save

Legen Sie im SDK fest, dass mindestens die API-Version 2025-03-31.basil verwendet wird.

// Set your secret key. Remember to switch to your live secret key in production.
// See your keys here: https://dashboard.stripe.com/apikeys
import Stripe from 'stripe';
const stripe = new Stripe(
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'
, {
  apiVersion: '2025-03-31.basil' as any,
});

Checkout-Sitzung erstellen
Serverseitig

Fügen Sie einen Endpoint auf Ihrem Server hinzu, der eine Checkout-Sitzung erstellt und sein Client-Geheimnis an Ihr Frontend zurückgibt. Eine Checkout-Sitzung stellt die Sitzung Ihres Kunden/Ihrer Kundin dar, während er/sie per Checkout für einmalige Käufe oder Abonnements bezahlt. Checkout-Sitzungen laufen 24 Stunden nach Erstellung ab.

server.ts
import express, {Express} from 'express';

const app: Express = express();

app.post('/create-checkout-session', async (req: Express.Request, res: Express.Response) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        price_data: {
          currency: 'usd',
          product_data: {
            name: 'T-shirt',
          },
          unit_amount: 2000,
        },
        quantity: 1,
      },
    ],
    mode: 'payment',
    ui_mode: 'custom',
    // The URL of your payment completion page
    return_url: 'https://example.com/return?session_id={CHECKOUT_SESSION_ID}'
  });

  res.json({checkoutSessionClientSecret: session.client_secret});
});

app.listen(3000, () => {
  console.log('Running on port 3000');
});

Frontend einrichten
Clientseitig

Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es zum head der HTML-Datei hinzufügen. Laden Sie Stripe.js immer direkt von js.stripe.com, um PCI-konform zu bleiben. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

Sie müssen Stripe.js von v3 auf basil aktualisieren, indem Sie das folgende Skript-Tag einfügen: <script src="https://js.stripe.com/basil/stripe.js"></script>. Erfahren Sie mehr über die Versionierung von Stripe.js.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>

Notiz

Stripe stellt ein npm-Paket bereit, mit dem Sie Stripe.js als Modul laden können. Siehe das Projekt auf GitHub. Version 7.0.0 oder höher ist erforderlich.

Initialisieren Sie Stripe.js.

checkout.js
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/apikeys
const stripe = Stripe(
  
'pk_test_TYooMQauvdEDq54NiTphI7jx'
,
);

Bezahlvorgang initialisieren
Clientseitig

Erstellen Sie eine fetchClientSecret-Funktion. Diese Funktion ruft das Client-Geheimnis von Ihrem Server ab und gibt ein Promise zurück, das mit dem Client-Geheimnis aufgelöst wird. Rufen Sie initCheckout auf und übergeben Sie fetchClientSecret. initCheckout gibt ein aufgelöstes Promise an eine Checkout-Instanz zurück.

Das Checkout-Objekt fungiert als Grundlage Ihrer Bezahlseite und enthält die Daten der Checkout-Sitzung und Methoden zum Aktualisieren der Sitzung.

Das von checkout.session() zurückgegebene Objekt enthält Ihre Preisinformationen. Wir empfehlen, die Werte für total und lineItems der Sitzung in Ihrer Nutzeroberfläche zu lesen und anzuzeigen.

Auf diese Weise können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Wenn Sie beispielsweise manuelle Währungspreise hinzufügen, sind keine Änderungen an der Nutzeroberfläche erforderlich, wenn Sie die total anzeigen.

checkout.js
const fetchClientSecret = () => {
  return fetch('/create-checkout-session', {method: 'POST'})
    .then((response) => response.json())
    .then((json) => json.checkoutSessionClientSecret);
};
stripe.initCheckout({fetchClientSecret})
  .then((checkout) => {
    const checkoutContainer = document.getElementById('checkout-container');
    checkoutContainer.append(JSON.stringify(checkout.lineItems, null, 2));
    checkoutContainer.append(document.createElement('br'));
    checkoutContainer.append(`Total: ${checkout.session().total.total.amount}`);
  });
index.html
<div id="checkout-container"></div>

E-Mail-Adressen von Kundinnen/Kunden erfassen
Clientseitig

Erstellen Sie eine E-Mail-Eingabe, um die E-Mail-Adresse Ihrer Kundinnen und Kunden zu erfassen. Rufen Sie updateEmail auf, wenn Ihre Kundin/Ihre Kunde die Eingabe abgeschlossen hat, um die E-Mail-Adresse zu validieren und zu speichern.

Je nach Design Ihres Bezahlformulars können Sie updateEmail folgendermaßen aufrufen:

  • Direkt vor dem Senden der Zahlung. Sie können auch updateEmail aufrufen, um die Validierung zu einem früheren Zeitpunkt durchzuführen, z. B. bei Eingabeunschärfe.
  • Vor dem Übergang zum nächsten Schritt, z. B. dem Klicken auf die Schaltfläche Speichern, wenn Ihr Formular mehrere Schritte umfasst.
index.html
<input type="text" id="email" />
<div id="email-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const emailInput = document.getElementById('email');
  const emailErrors = document.getElementById('email-errors');

  emailInput.addEventListener('input', () => {
    // Clear any validation errors
    emailErrors.textContent = '';
  });

  emailInput.addEventListener('blur', () => {
    const newEmail = emailInput.value;
    checkout.updateEmail(newEmail).then((result) => {
      if (result.error) {
        emailErrors.textContent = result.error.message;
      }
    });
  });
});

Zahlungsdetails erfassen
Clientseitig

Erfassen Sie Zahlungsdetails auf dem Client mit dem Payment Element. Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht.

Erstellen Sie zunächst ein Container-DOM-Element, um das Payment Element zu verbinden. Erstellen Sie dann eine Instanz des Payment Element mit checkout.createPaymentElement und verbinden Sie es durch Aufrufen von element.mount, wobei Sie entweder einen CSS-Selektor oder das Container-DOM-Element angeben.

index.html
<div id="payment-element"></div>
checkout.js
const paymentElement = checkout.createPaymentElement();
paymentElement.mount('#payment-element');

Welche Optionen unterstützt werden, erfahren Sie in der Dokumentation zu Stripe.js.

Sie können das Erscheinungsbild aller Elements anpassen, indem Sie elementsOptions.appearance übergeben, wenn Sie Checkout im Frontend initialisieren.

Zahlung übermitteln
Clientseitig

Rendern Sie eine Schaltfläche zum Bezahlen, die confirm über die checkout-Instanz aufruft, um die Zahlung zu übermitteln.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
stripe.initCheckout({fetchClientSecret}).then((checkout) => {
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    checkout.confirm().then((result) => {
      if (result.type === 'error') {
        errors.textContent = result.error.message;
      }
    });
  });
});

Ihre Integration testen

  1. Navigieren Sie zu Ihrer Bezahlseite.
  2. Geben Sie in den Zahlungsdetails eine Zahlungsmethode aus der folgenden Tabelle ein. Für Kartenzahlungen:
    • Geben Sie für die Karte ein beliebiges Ablaufdatum in der Zukunft ein.
    • Geben Sie als Prüfziffer/CVC eine 3-stellige Zahl ein.
    • Geben Sie eine beliebige Postleitzahl ein.
  3. Senden Sie die Zahlung an Stripe.
  4. Gehen Sie zum Dashboard und suchen Sie auf der Seite Transaktionen nach der Zahlung. Wenn Ihre Zahlung erfolgreich war, wird sie in dieser Liste angezeigt.
  5. Klicken Sie auf Ihre Zahlung, um weitere Details wie Rechnungsinformationen und die Liste der gekauften Artikel anzuzeigen. Sie können diese Informationen verwenden, um die Bestellung abzuwickeln.
KartennummerSzenarioSo führen Sie den Test durch
Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Für die Kartenzahlung ist eine Authentifizierung erforderlich.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die Karte wird mit einem Ablehnungscode wie insufficient_funds abgelehnt.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern.Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.

Siehe auch

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unser Änderungsprotokoll an.
Fragen? Sales-Team kontaktieren.
LLM? Lesen Sie llms.txt.
Unterstützt von Markdoc
Code quickstart
Ähnliche Leitfäden
Elements Appearance API
Weitere Zahlungsszenarien
So funktionieren Karten
Verwendete Produkte
Payments
Elements
Checkout