Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed Payments
Präsenzzahlungen
Zahlungsmethoden
Zahlungsszenarien
Mehr als Zahlungen

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
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
npm install stripe@18.0.0 --save

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

TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
// 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
TypeScript
Node.js
Ruby
PHP
Python
Go
.NET
Java
No results
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.

Ensure you’re on the latest Stripe.js version by including the following script tag <script src=“https://js.stripe.com/clover/stripe.js”></script>. Learn more about Stripe.js versioning.

checkout.html
<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/clover/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 entweder ein clientSecret-Promise, das mit dem Client-Geheimnis aufgelöst wird oder legen Sie es direkt als Geheimnis fest. Rufen Sie initCheckout auf und übergeben Sie clientSecret. initCheckout gibt ein Promise zurück, das in eine Checkout-Instanz aufgelöst wird.

Das Objekt checkout bildet die Grundlage Ihrer Bezahlseite und enthält Daten aus der Checkout-Sitzung sowie Methoden zum Aktualisieren der Sitzung.

Das von actions.getSession() zurückgegebene Objekt enthält Ihre Preisinformationen. Wir empfehlen, total und lineItems aus der Sitzung in Ihrer Nutzeroberfläche zu lesen und anzuzeigen.

Auf diese Weise können Sie neue Funktionen mit minimalen Codeänderungen aktivieren. Zum Beispiel erfordert das Hinzufügen von Preisen in manuellen Währungen keine Änderungen der Nutzeroberfläche, wenn Sie den Gesamtbetrag anzeigen.

checkout.js
const clientSecret = fetch('/create-checkout-session', {method: 'POST'})
  .then((response) => response.json())
  .then((json) => json.checkoutSessionClientSecret);
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();
if (loadActionsResult.type === 'success') {
  const session = loadActionsResult.actions.getSession();
  const checkoutContainer = document.getElementById('checkout-container');
  checkoutContainer.append(JSON.stringify(session.lineItems, null, 2));
  checkoutContainer.append(document.createElement('br'));
  checkoutContainer.append(`Total: ${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
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  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;
    actions.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');

Die unterstützten Optionen finden Sie in der Stripe.js-Dokumentation.

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 Bezahlen, die Bestätigen von der Instanz Checkout aufruft, um die Zahlung abzusenden.

index.html
<button id="pay-button">Pay</button>
<div id="confirm-errors"></div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const loadActionsResult = await checkout.loadActions();

if (loadActionsResult.type === 'success') {
  const {actions} = loadActionsResult;
  const button = document.getElementById('pay-button');
  const errors = document.getElementById('confirm-errors');
  button.addEventListener('click', () => {
    // Clear any validation errors
    errors.textContent = '';

    actions.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.

OptionalProdukte und Preise erstellen

Bevor Sie eine Checkout-Sitzung erstellen, können Sie im Voraus Produkte und Preise erstellen. Verwenden Sie Produkte, um verschiedene physische Waren oder Dienstleistungsebenen darzustellen, und Preise, um die Preise jedes Produkts darzustellen.

Sie können zum Beispiel ein T-Shirt als Produkt mit einem Preis von 20 USD erstellen. Auf diese Weise können Sie Preise aktualisieren und hinzufügen, ohne die Details der zugrunde liegenden Produkte ändern zu müssen. Sie können Produkte und Preise entweder mit dem Stripe-Dashboard oder über die API erstellen. Erfahren Sie mehr darüber, wie Produkte und Preise funktionieren.

Es ist nur ein name erforderlich, um ein Produkt mit der API zu erstellen. Checkout zeigt von Ihnen angegebene Informationen wie name des Produkts, description und images an.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/products \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d name=T-shirt

Erstellen Sie als Nächstes einen Preis, um zu definieren, wie viel Sie für ein Produkt berechnen möchten. Dazu gehört, wie viel das Produkt kostet und welche Währung verwendet werden soll.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/prices \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d product=
"{{PRODUCT_ID}}"
 \
  -d unit_amount=2000 \
  -d currency=usd

Jeder von Ihnen erstellte Preis hat eine ID. Wenn Sie eine Checkout-Sitzung erstellen, verweisen Sie auf die Preis-ID und die Menge. Wenn Sie in mehreren Währungen Verkäufe tätigen, legen Sie Ihren Preis in mehreren Währungen fest. Checkout erkennt die lokale Währung des/der Kund/in automatisch und gibt diese Währung an, wenn der Preis diese unterstützt.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

OptionalKundendaten vorab angeben
Serverseitig

Wenn Sie die E-Mail-Adresse Ihrer Kundin/Ihres Kunden bereits erfasst haben und sie in einer Checkout-Sitzung vorab angeben möchten, übergeben Sie customer_email beim Erstellen der Checkout-Sitzung.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  --data-urlencode customer_email="customer@example.com" \
  -d ui_mode=custom \
  -d mode=payment \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  --data-urlencode return_url="https://example.com/return?session_id={CHECKOUT_SESSION_ID}"

OptionalAngaben zur Zahlungsmethode speichern

Erfahren Sie, wie Sie eine Zahlung annehmen und die Zahlungsdaten Ihrer Kundinnen/Kunden für zukünftige Einkäufe speichern.

OptionalÄnderungen der Checkout-Sitzung überwachen

Änderungen der Checkout-Sitzung überwachen

Sie können Änderungen an der Checkout-Sitzung überwachen, indem Sie mit checkout.on einen Ereignis-Listener für das change-Ereignis hinzufügen.

checkout.js
checkout = stripe.initCheckout({
  clientSecret: promise,
  elementsOptions: { appearance },
});

checkout.on('change', (session) => {
  // Handle changes to the checkout session
});

OptionalRechnungs- und Versandadressen erfassen

Rechnungsadresse erfassen

Standardmäßig erfasst eine Checkout-Sitzung die minimalen Rechnungsdetails, die für die Zahlung über das Payment Element erforderlich sind.

Billing Address Element verwenden

Mit dem Billing Address Element können Sie vollständige Rechnungsadressen erfassen.

Übergeben Sie zunächst billing_address_collection=required, wenn Sie die Checkout-Sitzung erstellen.

Erstellen Sie ein Container-DOM-Element, um das Billing Address Element zu verbinden. Erstellen Sie dann eine Instanz des Billing Address Element mit checkout.createBillingAddressElement 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="billing-address"></div>
checkout.js
const billingAddressElement = checkout.createBillingAddressElement();
billingAddressElement.mount('#billing-address');

Das Billing Address Element unterstützt die folgenden Optionen:

Nutzerdefinierte Formulare verwenden

Sie können Ihr eigenes Formular erstellen, um Rechnungsadressen zu erfassen.

  • Wenn Ihre Bezahlseite einen speziellen Adresserfassungsschritt vor der Bestätigung enthält, rufen Sie updateBillingAddress auf, wenn Ihre Kundin/Ihre Kunde die Adresse übermittelt.
  • Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie billingAddress an „bestätigen“ übergeben.

Rechnungsadressen zu Teil erfassen

Um nur einen Teil der Rechnungsadressen zu erfassen, z. B. nur das Land und die Postleitzahl, übergeben Sie billing_address_collection=auto.

Wenn Sie nur einen Teil der Rechnungsadressen erfassen, müssen Sie die Adressen manuell erfassen. Standardmäßig erfasst das Payment Element automatisch die minimalen Rechnungsdetails, die für die Zahlung erforderlich sind. Um eine doppelte Erfassung von Rechnungsdetails zu vermeiden, übergeben Sie fields.billingDetails=never beim Erstellen des Payment Element. Wenn Sie nur einen Teil der Rechnungsdaten (z. B. den Namen der Kundin/des Kunden) erfassen möchten, übergeben Sie never nur für die Felder, die Sie selbst erfassen möchten.

Versandadresse erfassen

Um die Versandadresse eines Kunden/einer Kundin zu erfassen, übergeben Sie beim Erstellen der Checkout-Sitzung den Parameter shipping_address_collection.

Wenn Sie eine Versandadresse erfassen, müssen Sie auch angeben, in welche Länder der Versand zulässig ist. Konfigurieren Sie die Eigenschaft allowed_countries mit einem Array aus zweistelligen ISO-Ländercodes.

So verwenden Sie das Shipping Address Element

Mit dem Shipping Address Element können Sie komplette Versandadressen erfassen.

Erstellen Sie ein Container-DOM-Element, um das Shipping Address Element zu verbinden. Erstellen Sie dann eine Instanz des Shipping Address Element mit checkout.createShippingAddressElement 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="shipping-address"></div>
checkout.js
const shippingAddressElement = checkout.createShippingAddressElement();
shippingAddressElement.mount('#shipping-address');

Das Shipping Address Element unterstützt die folgenden Optionen:

Änderungen der Checkout-Sitzung überwachen

Sie können Änderungen an der Checkout-Sitzung überwachen, indem Sie einen Ereignis-Listener hinzufügen, um adressbezogene Änderungen zu verarbeiten.

Verwenden Sie das Session-Objekt, um den Versandbetrag in Ihrem Bezahlformular darzustellen.

index.html
<div>
  <h3> Totals </h3>
  <div id="subtotal" ></div>
  <div id="shipping" ></div>
  <div id="total" ></div>
</div>
checkout.js
const checkout = stripe.initCheckout({clientSecret});
const subtotal = document.getElementById('subtotal');
const shipping = document.getElementById('shipping');
const total = document.getElementById('total');

checkout.on('change', (session) => {
  subtotal.textContent = `Subtotal: ${session.total.subtotal.amount}`;
  shipping.textContent = `Shipping: ${session.total.shippingRate.amount}`;
  total.textContent = `Total: ${session.total.total.amount}`;
});

Ein nutzerdefiniertes Formular verwenden

Sie können Ihr eigenes Formular erstellen, um Versandadressen zu erfassen.

  • Wenn es auf Ihrer Zahlungsseite einen speziellen Schritt zur Adresserfassung vor der Bestätigung gibt, rufen Sie updateShippingAddress auf, wenn Ihre Kundin/Ihr Kunde die Adresse übermittelt.
  • Andernfalls können Sie die Adresse übermitteln, wenn Ihre Kundin/Ihr Kunde auf die Schaltfläche „Bezahlen“ klickt, indem Sie shippingAddress an „bestätigen“ übergeben.

OptionalGetrennte Autorisierung und Erfassung
Serverseitig

Stripe unterstützt Kartenzahlungen in zwei Schritten. Sie können also Karten autorisieren und die Gelder erst später erfassen. Wenn Stripe eine Zahlung autorisiert, garantiert der Kartenaussteller die Gelder und stellt den Zahlungsbetrag auf der Kundenkarte zurück. Sie müssen die Gelder dann in einem bestimmten Zeitraum erfassen – wie lange Sie Zeit haben, hängt von der Karte ab). Wenn Sie die Zahlung nicht vor Ablauf der Autorisierung erfassen, wird die Zahlung storniert und der Kartenaussteller gibt die zurückgestellten Gelder wieder frei.

Die zeitliche Trennung von Autorisierung und Erfassung ist hilfreich, wenn Sie zwischen dem Bestätigen der Zahlungsfähigkeit einer Kundin/eines Kunden und dem Einziehen der Zahlung zusätzliche Schritte ausführen möchten. Wenn Sie beispielsweise Artikel mit begrenztem Bestand verkaufen, müssen Sie gegebenenfalls überprüfen, ob der bestellte Artikel überhaupt verfügbar ist, bevor Sie die Zahlung erfassen und den Kauf abwickeln. Nutzen Sie dafür den folgenden Ablauf:

  1. Überprüfen Sie, ob Stripe die Zahlungsmethode der Kundin/des Kunden autorisiert hat.
  2. Kontrollieren Sie in Ihrem Bestandsverwaltungssystem, ob der Artikel verfügbar ist.
  3. Geben Sie in Ihrem Bestandsverwaltungssystem an, dass der Kunde/die Kundin den Artikel gekauft hat.
  4. Erfassen Sie die Zahlung der Kundin/des Kunden.
  5. Informieren Sie die Kundin/den Kunden auf Ihrer Bestätigungsseite darüber, ob der Kauf erfolgreich war.

Um anzugeben, dass Sie Autorisierung und Erfassung trennen möchten, müssen Sie beim Erstellen der Checkout-Sitzung den Wert von payment_intent_data.capture_method auf manual festlegen. Dadurch wird Stripe angewiesen, nur den Betrag auf der Karte der Kundin/des Kunden zu autorisieren.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/checkout/sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d "line_items[0][price]"={{PRICE_ID}} \
  -d "line_items[0][quantity]"=1 \
  -d mode=payment \
  -d "payment_intent_data[capture_method]"=manual \
  -d return_url={{RETURN_URL}} \
  -d ui_mode=custom

Eine nicht erfasste Zahlung können Sie entweder über den Endpoint Dashboard oder Erfassung erfassen. Um Zahlungen programmgesteuert zu erfassen, ist der Zugriff auf den PaymentIntent erforderlich, der während der Checkout-Sitzung erstellt wurde. Diesen können Sie über das Session-Objekt abrufen.

OptionalVerwaltung von Kundenkonten
Kein Code

Lassen Sie Ihre Kundinnen/Kunden ihre eigenen Konten verwalten und senden sie ihnen einen Link zu Ihrem Kundenportal. Über das Kundenportal können sich Kundinnen/Kunden mit ihrer E-Mail-Adresse anmelden, um Abonnements zu verwalten, Zahlungsmethoden zu aktualisieren und vieles mehr.

OptionalBestellabwicklung

Erfahren Sie, wie Sie programmgesteuert benachrichtigt werden, wenn ein Kunde/eine Kundin bezahlt.

Siehe auch

War diese Seite hilfreich?
JaNein
Code quickstart
Ähnliche Leitfäden
Elements Appearance API
Weitere Zahlungsszenarien
So funktionieren Karten