Eine Karte ohne Bankauthentifizierung speichern

Erfassen Sie Kartenangaben und nehmen später Belastungen vor.

Mit Stripe haben Sie die Möglichkeit, Kartendaten Ihrer Kund/innen vorab zu erfassen und die Belastung zu einem späteren Zeitpunkt durchzuführen. In einigen Regionen erfordern Banken eine zweite Authentifizierungsmethode, z. B. die Eingabe eines Codes über ein Mobilgerät. Der zusätzliche Schritt wirkt sich negativ auf die Konversionsrate auf, wenn Kund/innen Ihre Website oder Anwendung nicht aktiv nutzen und den Kauf nicht direkt authentifizieren können.

Wenn Sie überwiegend in den USA und Kanada tätig sind, erfordern die Banken keine Authentifizierung und Sie können diese einfachere Integration verwenden. Diese Integration ist in Ländern, die eine Authentifizierung für das Speichern von Karten erfordern (z. B. Indien), nicht konform und hat zur Folge, dass für eine Expansion in andere Länder oder für zusätzliche Zahlungsmethoden grundlegende Änderungen an der Integration notwendig sind. Hier erfahren Sie, wie Sie Karten speichern, die eine Authentifizierung erfordern.

Konformität

Sie sind für die Einhaltung aller geltenden Gesetze, Vorschriften und Netzwerkregeln verantwortlich, wenn Sie die Zahlungsdaten eines Kunden/einer Kundin speichern. Zum Beispiel für den Fall, dass Sie seine/ihre Zahlungsmethode für die zukünftige Nutzung speichern möchten, wenn er/sie Ihre Website oder App nicht aktiv nutzt. Fügen Sie Ihrer Website oder App Bedingungen hinzu, die angeben, wie Sie die Details zur Zahlungsmethode speichern und Kund/innen die Möglichkeit geben, sich anzumelden. Wenn Sie Zahlungen offline vornehmen möchten, stellen Sie sicher, dass Ihre Bedingungen Folgendes enthalten:

Die kundenseitige Zustimmung, eine Zahlung oder mehrere Zahlungen für bestimmte Transaktionen in deren Namen einzuleiten.
Der erwartete Zeitpunkt und die voraussichtliche Häufigkeit von Zahlungen (z. B. Zahlungen für geplante Raten- oder Abonnementzahlungen oder für außerplanmäßige Aufstockungen).
Wie Sie den Zahlbetrag ermitteln.
Ihre Stornorichtlinie, wenn die Zahlungsmethode für einen Abonnementdienst ist.

Dokumentieren Sie unbedingt die schriftliche Zustimmung Ihrer Kundinnen und Kunden zu diesen Bedingungen.

Kartenangaben erfassen
Clientseitig

Bevor Sie mit diesem Leitfaden beginnen, benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Erstellen Sie eine Checkout-Seite, um die Kartendaten Ihrer Kundinnen/Kunden zu erfassen. Verwenden Sie Stripe Elements, eine UI-Bibliothek, mit der Sie nutzerdefinierte Zahlungsformulare erstellen können. Um mit Elements zu beginnen, binden Sie die Stripe.js-Bibliothek mit dem folgenden Skript in Ihre Checkout-Seite ein.

<script src="https://js.stripe.com/clover/stripe.js"></script>

Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Compliance einzuhalten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

Um die erweiterte Betrugserkennungsfunktion von Stripe optimal zu nutzen, binden Sie dieses Script auf jeder Seite Ihrer Website ein, nicht nur auf der Bezahlseite. Wenn Sie das Skript auf jeder Seite einbinden, kann Stripe verdächtiges Verhalten erkennen, das auf Betrug hinweisen könnte, wenn Nutzer/innen Ihre Website besuchen.

Elements zu Ihrer Seite hinzufügen

Um Kartendaten von Ihren Kund/innen sicher zu erfassen, erstellt Elements für Sie Komponenten der Nutzeroberfläche, die von Stripe gehostet werden. Sie werden dann Ihrem Zahlungsformular hinzugefügt, anstatt sie direkt zu erstellen. Um zu bestimmen, wo diese Komponenten eingefügt werden sollen, erstellen Sie leere DOM-Elemente (Container) mit eindeutigen IDs in Ihrem Zahlungsformular.

index.html
<input id="cardholder-name" type="text">
<!-- placeholder for Elements -->
<div id="card-element"></div>
<div id="card-result"></div>
<button id="card-button">Save Card</button>

Erstellen Sie anschließend eine Instanz des Stripe-Objekts und geben Sie dabei Ihren veröffentlichbaren API-Schlüssel als ersten Parameter an. Erstellen Sie dann eine Instanz des Elements-Objekts und verbinden Sie damit ein card-Element im DOM.

Das card-Element vereinfacht das Zahlungsformular und minimiert durch ein einziges, flexibles Eingabefeld, mit dem alle notwendigen Kartenangaben sicher erfasst werden können, die Anzahl der Pflichtfelder.

Alternativ können Sie die Elemente cardNumber, cardExpiry und cardCvc zu einem flexiblen Kartenformular mit Mehrfacheingabe kombinieren.

Hinweis

Erfassen Sie immer eine Postleitzahl, um die Kartenakzeptanzquote zu steigern und Betrug vorzubeugen.

Das einzeilige Card Element erfasst und sendet die Postleitzahl der Kundin/des Kunden an Stripe. Wenn Sie Ihr Zahlungsformular mit geteilten Elements erstellen (Kartennummer, Ablaufdatum, Prüfziffer) fügen Sie ein separates Eingabefeld für die Postleitzahl der Kundin/des Kunden hinzu.

client.js
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

const elements = stripe.elements();
const cardElement = elements.create('card');
cardElement.mount('#card-element');

Ein Stripe Element enthält einen iFrame, der die Zahlungsdaten sicher über eine HTTPS-Verbindung an Stripe übermittelt. Die Adresse der Zahlungsseite muss ebenfalls mit https:// beginnen (nicht mit http://), damit Ihre Integration funktioniert.

Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber aktivieren, bevor Sie Ihre ersten Live-Zahlungen empfangen.

client.js
Vollständiges Beispiel anzeigen
const cardholderName = document.getElementById('cardholder-name');
const cardButton = document.getElementById('card-button');
const resultContainer = document.getElementById('card-result');

cardButton.addEventListener('click', async (ev) => {
  const {paymentMethod, error} = await stripe.createPaymentMethod({
      type: 'card',
      card: cardElement,
      billing_details: {
        name: cardholderName.value,
      },
    }
  );

  if (error) {
    // Display error.message in your UI.
    resultContainer.textContent = error.message;
  } else {
    // You have successfully created a new PaymentMethod
    resultContainer.textContent = "Created payment method: " + paymentMethod.id;
  }
});

Senden Sie die resultierende PaymentMethod-ID an Ihren Server.

Stripe einrichten
Serverseitig

Nutzen Sie unsere offiziellen Bibliotheken für den Zugriff auf die Stripe-API über Ihre Anwendung:

Karte speichern
Serverseitig

Speichern Sie die Karte, indem Sie die PaymentMethod einem Kunden/einer Kundin zuordnen. Sie können das Kundenobjekt verwenden, um weitere Informationen über Ihre Kundinnen/Kunden zu speichern, z. B. Versanddaten und E-Mail-Adresse.

Wenn bereits ein Kunde besteht, können Sie die PaymentMethod stattdessen an dieses Objekt anhängen.

Verknüpfen Sie anschließend die ID des Kundenobjekts und die ID der PaymentMethod mit Ihrer eigenen Kundenrepräsentation, falls vorhanden.

Gespeicherte Karte belasten
Serverseitig

Wenn Sie bereit sind, rufen Sie die Kunden- und die PaymentMethod-ID ab, die Sie belasten möchten. Dies können Sie entweder durch Speichern der IDs beider Objekte in Ihrer Datenbank tun oder indem Sie mittels der Kunden-ID alle für das Kundenobjekt verfügbaren PaymentMethods suchen.

Verwenden Sie die PaymentMethod-ID und die Kunden-ID, um einen neuen PaymentIntent zu erstellen. Setzen Sie den Wert error_on_requires_action auf wahr, um Zahlungen abzulehnen, die weitere Aktionen seitens Ihrer Kundinnen und Kunden erfordern, wie beispielsweise eine Zwei-Faktor-Authentifizierung.

Schlägt ein Zahlungsversuch fehl, schlägt auch die Anfrage mit einem HTTP-Statuscode 402 fehl, und Stripe gibt eine Fehlermeldung aus. Sie müssen Ihre Kundinnen/Kunden dann auffordern, Ihre Anwendung erneut aufzurufen (zum Beispiel indem Sie eine E-Mail senden), um die Zahlung abzuschließen. Prüfen Sie den Code des von der Stripe-API-Bibliothek gemeldeten Fehlers oder prüfen Sie den last_payment_error.decline_code im PaymentIntent, um zu erfahren, warum der/die Kartenaussteller/in die Zahlung abgelehnt hat.

Umgang mit Kartenfehlern

Informieren Sie Ihre Kundinnen und Kunden darüber, dass die Zahlung fehlgeschlagen ist und leiten Sie sie zu dem in Schritt 1 erstellten Zahlungsformular weiter, wo sie neue Kartendaten eingeben können. Senden Sie die neue Zahlungsmethode-ID an Ihren Server, um sie dem Kundenobjekt hinzuzufügen und führen Sie die Zahlung erneut durch.

Alternativ können Sie einen PaymentIntent erstellen und eine Karte in einem API-Aufruf speichern, wenn Sie bereits eine Kundin bzw. einen Kunden angelegt haben.

Wenn Sie setup_future_usage auf on_session setzen, weist Stripe darauf hin, dass Sie die Karte für später speichern möchten, ohne eine unnötige Authentifizierung auszulösen.

Integration testen

Stripe stellt Testkarten bereit, die Sie im Sandbox-Modus verwenden können, um verschiedene Kartenverhaltensweisen zu simulieren. Verwenden Sie diese Karten mit beliebigen Prüfziffern, Postleitzahlen und Ablaufdaten in der Zukunft.

Nummer	Beschreibung
	Bei Erfolg sofortige Verarbeitung der Zahlung.
	Schlägt stets mit dem Ablehnungscode `insufficient_funds` fehl.
	Erfordert eine Authentifizierung, die in dieser Integration mit dem Code `authentication_required` abgelehnt wird.

OptionalCVC erneut erfassen

Wenn Sie für gespeicherte Karten künftige Zahlungen erstellen, sollten Sie als zusätzliche Betrugspräventionsmaßnahme erneut die Prüfziffer (CVC) der Karte erfassen, um den/die Nutzer/in zu verifizieren.

Beginnen Sie mit der Erstellung einer PaymentIntent von Ihrem Server aus mit dem Betrag und der Währungen der Zahlung und geben Sie als Kunde/Kundin die ID Ihrer Kundin bzw. Ihres Kunden an. Listen Sie anschließend die mit Ihrer Kundin oder Ihrem Kunden verbundenen Zahlungsmethoden auf, um zu bestimmen, welche Zahlungsmethoden Ihren Nutzer/innen für die erneute Erfassung der CVC angezeigt werden sollen.

Nachdem Sie das Client-Secret von PaymentIntent an den Browser übergeben haben, sind Sie bereit, CVC-Informationen mit Stripe Elements auf Ihrem Client erneut zu sammeln. Verwenden Sie das cardCvc-Element, um einen CVC-Wert von Ihrem Benutzer erneut zu sammeln, und bestätigen Sie dann die Zahlung von Ihrem Kunden mit stripe.confirmCardPayment. Setzen Sie payment_method auf Ihre PaymentMethod ID und payment_method_options[card][cvc] auf Ihr cardCvc Element.

client.js
const result = await stripe.confirmCardPayment(clientSecret, {
  payment_method: '{{PAYMENT_METHOD_ID}}',
  payment_method_options: {
    card: {
      cvc: cardCvcElement
    }
  },
});

if (result.error) {
  // Show error to your customer
  console.log(result.error.message);
} else {
  if (result.paymentIntent.status === 'succeeded') {
    // Show a success message to your customer
    // There's a risk of the customer closing the window before callback
    // execution. Set up a webhook or plugin to listen for the
    // payment_intent.succeeded event that handles any business critical
    // post-payment actions.
  }
}

Eine Zahlung kann auch dann erfolgreich sein, wenn die CVC-Prüfung fehlschlägt. Um dies zu verhindern, konfigurieren Sie Ihre Radar-Regeln so, dass die Zahlung bei einem Fehlschlagen der CVC-Verifizierung gesperrt wird.

Upgrade Ihrer Integration zur Authentifizierung von Karten

Diese Integration lehnt Karten ab, die während der Zahlung eine Authentifizierung erfordern. Sollten Sie im Dashboard eine erhöhte Anzahl von Zahlungen mit dem Status Fehlgeschlagen feststellen, ist es ratsam, Ihre Integration zu aktualisieren. Die globale Integration von Stripe verarbeitet diese Zahlungen, anstatt sie automatisch abzulehnen.