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.

Betten Sie mit Stripe Checkout ein vorgefertigtes Zahlungsformular auf Ihrer Website ein. Sehen Sie sich diese Integration im Vergleich zu anderen Integrationstypen von Stripe an.

Eingebetteter Bezahlvorgang – VorschauEingebetteter Bezahlvorgang – Vorschau
powdur.me

Integrationsaufwand

Kaum Code

Integration

Vorgefertigtes Zahlungsformular auf Ihrer Website einbetten

Anpassung der Nutzeroberfläche

Begrenzte Anpassung

Verwenden Sie die Branding-Einstellungen im Stripe-Dashboard, um Checkout an Ihr Website-Design anzupassen.

Registrieren Sie sich zunächst für ein Stripe-Konto.

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

Command Line
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

Checkout-Sitzung erstellen
Serverseitig

Erstellen Sie von Ihrem Server aus eine Checkout-Sitzung und setzen Sie den ui_mode-Endpoint auf embedded. Sie können die Checkout-Sitzung mit den Posten so konfigurieren, dass auch Optionen wie die Währung enthalten sind.

Sie können auch eine Checkout-Sitzung für einen bestehenden Kunden/eine bestehende Kundin erstellen. Dadurch können Sie Checkout-Felder mit bekannten Kontaktinformationen vorab ausfüllen und Ihre Kaufhistorie für diesen Kunden/diese Kundin vereinheitlichen.

Um Kundinnen/Kunden zu einer nutzerdefinierten Seite zurückzuleiten, die Sie auf Ihrer Website hosten, geben Sie die URL dieser Seite im Parameter return_url an. Fügen Sie die Vorlagenvariable {CHECKOUT_SESSION_ID} in die URL ein, um den Status der Sitzung auf der Rückgabeseite abzurufen. Checkout ersetzt die Variable vor der Weiterleitung automatisch durch die Checkout-Sitzungs-ID.

Erfahren Sie mehr über das Konfigurieren der Rückgabeseite und andere Optionen zum Anpassen des Weiterleitungsverhaltens.

Nachdem Sie die Checkout-Sitzung erstellt haben, verwenden Sie das client_secret, das in der Antwort auf Checkout verbinden zurückgegeben wurde.

Ruby
Python
PHP
Java
Node
Go
.NET
No results
# This example sets up an endpoint using the Sinatra framework.
# To learn more about Sinatra, watch this video: https://youtu.be/8aA9Enb8NVc.
require 'json'
require 'sinatra'
require 'stripe'

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
Stripe.api_key = 
'sk_test_BQokikJOvBiI2HlWgH4olfQ2'


post '/create-checkout-session' do
  session = Stripe::Checkout::Session.create({
    line_items: [{
      price_data: {
        currency: 'usd',
        product_data: {
          name: 'T-shirt',
        },
        unit_amount: 2000,
      },
      quantity: 1,
    }],
    mode: 'payment',
    ui_mode: 'embedded',
    return_url: 'https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}'
  })

  {clientSecret: session.client_secret}.to_json
end

Checkout verbinden
Clientseitig

Checkout ist als Teil von Stripe.js verfügbar. Nehmen Sie das Stripe.js-Skript in Ihre Seite auf, indem Sie es zum Header Ihrer HTML-Datei hinzufügen. Als Nächstes erstellen Sie einen leeren DOM-Knoten (Container), der zum Verbinden verwendet wird.

index.html
<head>
  <script src="https://js.stripe.com/basil/stripe.js"></script>
</head>
<body>
  <div id="checkout">
    <!-- Checkout will insert the payment form here -->
  </div>
</body>

Initialisieren Sie Stripe.js mit Ihrem veröffentlichbaren API-Schlüssel.

Erstellen Sie eine asynchrone fetchClientSecret-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an options, wenn Sie die Checkout-Instanz erstellen:

index.js
// Initialize Stripe.js
const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);

initialize();

// Fetch Checkout Session and retrieve the client secret
async function initialize() {
  const fetchClientSecret = async () => {
    const response = await fetch("/create-checkout-session", {
      method: "POST",
    });
    const { clientSecret } = await response.json();
    return clientSecret;
  };

  // Initialize Checkout
  const checkout = await stripe.initEmbeddedCheckout({
    fetchClientSecret,
  });

  // Mount Checkout
  checkout.mount('#checkout');
}

Checkout wird in einem iFrame gerendert, der Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe sendet.

Häufiger Fehler

Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da bei einigen Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung erforderlich ist.

Erscheinungsbild anpassen

Passen Sie Checkout an das Design Ihrer Website an, indem Sie Hintergrundfarbe, Schaltflächenfarbe, Rahmenradius und Schriftarten in den Branding-Einstellungen Ihres Kontos festlegen.

Checkout wird standardmäßig ohne externes Padding oder Ränder gerendert. Um Ihren gewünschten Rand hinzuzufügen (z. B. 16px auf allen Seiten), empfehlen wir, ein Container-Element zu verwenden.

Eine Rückgabeseite anzeigen

Nachdem Ihre Kundinnen/Kunden einen Zahlungsversuch unternommen haben, leitet Stripe sie zu einer Rückgabeseite weiter, die Sie auf Ihrer Website hosten. Beim Erstellen der Checkout-Sitzung haben Sie die URL der Rückgabeseite im Parameter return_url angegeben. Erfahren Sie mehr über andere Optionen zum Anpassen des Weiterleitungsverhaltens.

Rufen Sie beim Rendern Ihrer Rückgabeseite den Status der Checkout-Sitzung mithilfe der ID der Checkout-Sitzung in der URL ab. Gehen Sie je nach Sitzungsstatus wie folgt mit dem Ergebnis um:

  • complete: Die Zahlung war erfolgreich. Verwenden Sie die Informationen aus der Checkout-Sitzung, um eine Bestätigungsseite zu rendern.
  • open: Die Zahlung ist fehlgeschlagen oder wurde storniert. Stellen Sie erneut eine Verbindung zu Checkout her, damit Ihre Kundinnen/Kunden es nochmals versuchen können.
Rubin
Python
PHP
Java
Node
Go
.NET
No results
get '/session-status' do
  session = Stripe::Checkout::Session.retrieve(params[:session_id])

  {status: session.status, customer_email:  session.customer_details.email}.to_json
end
client.js
const session = await fetch(`/session_status?session_id=${session_id}`)
if (session.status == 'open') {
  // Remount embedded Checkout
} else if (session.status == 'complete') {
  // Show success page
  // Optionally use session.payment_status or session.customer_email
  // to customize the success page
}

Auf Weiterleitung basierende Zahlungsmethoden

Während der Zahlung leiten einige Zahlungsmethoden die Kundin/den Kunden auf eine Zwischenseite weiter, zum Beispiel eine Bankautorisierungsseite. Wenn sie diese Seite ausgefüllt haben, leitet Stripe sie zu Ihrer Rückgabeseite weiter.

Erfahren Sie mehr über auf Weiterleitung basierende Zahlungsmethoden und das Weiterleitungsverhalten.

Ereignisse nach der Zahlung verarbeiten

Stripe sendet das Ereignis checkout.session.completed, wenn ein Kunde/eine Kundin eine Zahlung in der Checkout-Sitzung abschließt. Verwenden Sie das Webhook-Tool des Dashboards oder befolgen Sie die Webhook-Anleitung, um diese Ereignisse zu empfangen und zu verarbeiten. Dies kann zu Folgendem führen:

  • Senden Sie eine Bestellbestätigung per E-Mail an Ihre Kundinnen/Kunden.
  • Protokollieren Sie den Verkauf in einer Datenbank.
  • Starten Sie einen Versand-Workflow.

Überwachen Sie diese Ereignisse, anstatt darauf zu warten, dass Ihre Kundinnen/Kunden auf Ihre Website zurückgeleitet werden. Es ist unzuverlässig, die Ausführung nur über die Landingpage Ihrer Zahlungsseite auszulösen. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Weitere Informationen finden Sie in unserem Fulfillment-Leitfaden für Checkout.

Verarbeiten Sie die folgenden Ereignisse, wenn Sie Zahlungen mit Checkout einziehen:

EreignisBeschreibungAktion
checkout.session.completedWird gesendet, wenn ein Kunde/eine Kundin eine Checkout-Sitzung erfolgreich abschließt.Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
checkout.session.async_payment_succeededWird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, erfolgreich ausgeführt wird.Senden Sie den Kundinnen/Kunden eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
checkout.session.async_payment_failedWird gesendet, wenn eine Zahlung mit einer Zahlungsmethode mit Verzögerung, wie z. B. ACH-Lastschriftverfahren, fehlschlägt.Benachrichtigen Sie die Kundin/den Kunden über den Fehler und bitten Sie ihn/sie, für einen erneuten Zahlungsversuch zur Sitzung zurückzukehren.

Integration testen

So testen Sie die Integration Ihres eingebetteten Zahlungsformulars:

  1. Erstellen Sie eine eingebettete Checkout-Sitzung und verbinden Sie Checkout auf Ihrer Seite.
  2. Geben Sie die Zahlungsdetails mit einer Methode aus der folgenden Tabelle ein.
    • 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. Klicken Sie auf Bezahlen. Sie werden zu Ihrer return_url weitergeleitet.
  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 anzuzeigen, wie beispielsweise eine Checkout-Zusammenfassung mit Rechnungsinformationen und die Liste der gekauften Artikel. Sie können diese Informationen zur Abwicklung der Bestellung verwenden.

Erfahren Sie mehr über das Testen Ihrer Integration.

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
Code quickstart
Ähnliche Leitfäden
Elements Appearance API
Weitere Zahlungsszenarien
So funktionieren Karten
Verwendete Produkte
Payments
Elements
Checkout