Kartenzahlungen ohne Bankauthentifizierung

Erstellen Sie eine einfachere Integration mit regionalen Beschränkungen.

Diese Integration unterstützt Unternehmen, die nur Karten aus den USA und Kanada akzeptieren. Sie ist zwar zunächst einfacher, lässt sich aber nicht ausreichend skalieren, wenn der Kundenstamm international ist.

Wie funktioniert diese Integration?

In Regionen wie Europa und Indien verlangen Banken von ihren Kund/innen oft eine Zwei-Faktor-Authentifizierung, um ihre Einkäufe zu bestätigen. Wenn Sie hauptsächlich in den USA und Kanada tätig sind, können Sie die Kartenauthentifizierung ignorieren und so Ihre Integration einfach halten, zumal die Banken in diesen Regionen nur selten eine Authentifizierung verlangen.

Verlangt eine Bank dennoch eine Authentifizierung, wird die Zahlung mit dieser Basisintegration direkt abgelehnt (ähnlich wie eine abgelehnte Karte), anstatt die Zahlung asynchron mittels Authentifizierung abzuschließen. Der Vorteil liegt darin, dass die Zahlung sofort genehmigt oder abgelehnt wird und die Zahlungsbestätigung auf dem Server erfolgt, sodass Sie ohne Webhook umgehend mit der Bestellabwicklung fortfahren können.

Worin unterscheidet sie sich von der globalen Integration?

Funktion	Diese Integration	Globale Integration
Kunden-Zahlungsformular	✔	✔
Sensible Daten gelangen nicht auf Ihren Server	✔	✔
Funktioniert mit Kund/innen in den USA und Kanada	✔	✔
Zahlungen mit falschen Kartendaten oder unzureichender Deckung werden abgelehnt	✔	✔
Zahlungen mit Bankauthentifizierung werden abgelehnt	✔
Funktioniert mit internationalen Kund/innen		✔
Kartenzahlungen mit Bankauthentifizierung werden automatisch abgewickelt		✔
Für die Bestellabwicklung werden Webhooks empfohlen		✔
Einfache Skalierung auf weitere Zahlungsmethoden (beispielsweise Lastschriften)		✔

Wachsende oder international tätige Unternehmen sollten die globale Integration von Stripe nutzen, um Bankanfragen zur Zwei-Faktor-Authentifizierung unterstützen und Kundinnen/Kunden weitere Zahlungsmethoden anbieten zu können.

Ein Bezahlformular erstellen
Clientseitig

Elements, ein Teil von Stripe.js, bietet Drop-In-Komponenten der Nutzeroberfläche zur Erfassung von Kartendaten von Kundinnen und Kunden. Stripe hostet diese und bindet sie in Ihrem Zahlungsformular als iFrame ein, sodass die Kartendaten Ihrer Kundinnen/Kunden nie in Kontakt mit Ihrem Code kommen.

Binden Sie zunächst das Stripe.js-Skript in den Header jeder Seite auf Ihrer Website ein.

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

Indem Sie das Skript auf jeder Seite Ihrer Website einbinden, profitieren Sie vom hochentwickeltem Betrugspräventionssystem von Stripe und der Möglichkeit, ungewöhnliches Browserverhalten zu erkennen.

Sicherheitsanforderungen

Dieses Skript muss immer direkt von js.stripe.com geladen werden, damit die PCI-Konformität gewahrt bleibt. Sie dürfen das Skript nicht in ein Paket einfügen oder selbst eine Kopie davon hosten.

Wenn Sie Elements nutzen, werden alle Zahlungsdaten über eine sichere HTTPS-Verbindung gesendet.

Die Adresse der Seite, die Elements enthält, muss ebenfalls mit https:// beginnen, nicht mit http://. Weitere Informationen darüber, wie Sie SSL-Zertifikate erhalten und in Ihren Server integrieren und eine HTTPS-Verbindung ermöglichen können, finden Sie in der Dokumentation zum Thema Sicherheit.

Elements zu Ihrer Seite hinzufügen

Als Nächstes benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

Erstellen Sie leere DOM-Elemente (Container) mit eindeutigen IDs innerhalb Ihres Bezahlformulars.

payment.html
<form id="payment-form">
  <div id="card-element"><!-- placeholder for Elements --></div>
  <button id="card-button">Submit Payment</button>
  <p id="payment-result"><!-- we'll pass the response from the server here --></p>
</form>

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 Kartenelement im leeren DOM-Element-Container auf der Seite.

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

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

Nutzen Sie stripe.createPaymentMethod auf Ihrem Client, um die Kartenangaben zu erfassen und eine PaymentMethod zu erstellen, wenn die Kundin/der Kunde das Zahlungsformular absendet. Übermitteln Sie die ID der PaymentMethod an Ihren Server.

client.js
const form = document.getElementById("payment-form");

var resultContainer = document.getElementById('payment-result');

// cardElement is defined in the previous step
cardElement.on('change', function(event) {
  if (event.error) {
    resultContainer.textContent = event.error.message;
  } else {
    resultContainer.textContent = '';
  }
});

form.addEventListener('submit', async event => {
  event.preventDefault();
  resultContainer.textContent = '';
  const result = await stripe.createPaymentMethod({
    type: 'card',
    card: cardElement,
  });
  handlePaymentMethodResult(result);
});

const handlePaymentMethodResult = async ({ paymentMethod, error }) => {
  if (error) {
    // An error happened when collecting card details, show error in payment form
    resultContainer.textContent = result.error.message;
  } else {
    // Send paymentMethod.id to your server (see Step 3)
    const response = await fetch("/pay", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_method_id: paymentMethod.id })
    });

    const responseJson = await response.json();

    handleServerResponse(responseJson);
  }
};

const handleServerResponse = async responseJson => {
  if (responseJson.error) {
    // An error happened when charging the card, show it in the payment form
    resultContainer.textContent = responseJson.error;
  } else {
    // Show a success message
    resultContainer.textContent = 'Success!';
  }
};

Stripe einrichten
Serverseitig

Nutzen Sie eine offizielle Library für den Zugriff auf die Stripe-API über Ihre Anwendung:

Eine Zahlung tätigen
Serverseitig

Richten Sie auf Ihrem Server einen Endpoint zum Empfang der Anfrage vom Client ein.

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Entscheiden Sie immer auf dem Server, welcher Betrag abgebucht werden soll, nicht auf dem Client. So wird verhindert, dass böswillige Kunden ihre eigenen Preise festlegen können.

Erstellen Sie einen HTTP-Endpoint, um auf die AJAX-Anfrage aus Schritt 1 reagieren zu können. In diesem Endpoint sollten Sie entscheiden, welchen Betrag Sie dem Kunden in Rechnung stellen. Um eine Zahlung zu erstellen, legen Sie unter Verwendung der PaymentMethod-ID aus Schritt 1 einen PaymentIntent mit folgendem Code an:

Achtung

Wenn Sie error_on_requires_action bei der Bestätigung einer Zahlung auf true setzen, lässt Stripe die Zahlung automatisch fehlschlagen, wenn eine Zwei-Faktor-Authentifizierung des Nutzers/der Nutzerin erforderlich ist.

Antwort der Payment Intents API

Wenn eine Zahlung über die API erfolgt, enthält die Antwort einen PaymentIntent-Status. War die Zahlung erfolgreich, lautet der Status succeeded.

{
  "id": "pi_0FdpcX589O8KAxCGR6tGNyWj",
  "object": "payment_intent",
  "amount": 1099,
  "charges": {
    "object": "list",
    "data": [
      {
        "id": "ch_GA9w4aF29fYajT",
        "object": "charge",
        "amount": 1099,
        "refunded": false,
        "status": "succeeded",
      }
    ]
  },
  "client_secret": "pi_0FdpcX589O8KAxCGR6tGNyWj_secret_e00tjcVrSv2tjjufYqPNZBKZc",
  "currency": "usd",
  "last_payment_error": null,
  "status": "succeeded",
}

Wurde die Zahlung abgelehnt, enthält die Antwort den Fehlercode und eine Fehlermeldung. Hier ist ein Beispiel einer Zahlung, die fehlgeschlagen ist, weil für die Karte eine Zwei-Faktor-Authentifizierung erforderlich war.

{
  "error": {
    "code": "authentication_required",
    "decline_code": "authentication_not_handled",
    "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
    "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
    "payment_intent": {
      "id": "pi_1G8JtxDpqHItWkFAnB32FhtI",
      "object": "payment_intent",
      "amount": 1099,
      "status": "requires_payment_method",
      "last_payment_error": {
        "code": "authentication_required",
        "decline_code": "authentication_not_handled",
        "doc_url": "https://docs.stripe.com/error-codes#authentication-required",
        "message": "This payment required an authentication action to complete, but `error_on_requires_action` was set. When you're ready, you can upgrade your integration to handle actions at https://stripe.com/docs/payments/payment-intents/upgrade-to-handle-actions.",
        "type": "card_error"
      },
    },
    "type": "card_error"
  }
}

Integration testen

Stripe stellt mehrere Testkarten zur Verfügung, die Sie in einer Sandbox verwenden können, um sicherzustellen, dass diese Integration bereit ist. Verwenden Sie sie mit einer beliebigen Prüfziffer (CVC), einer Postleitzahl und einem Ablaufdatum 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 zu einem Fehler führt. Der Ablehnungscode lautet dann `authentication_not_handled`.

Siehe dazu die vollständige Liste der Testkarten.

Upgrade Ihrer Integration zur Authentifizierung von Karten

Glückwunsch! Sie haben eine Zahlungsintegration für grundlegende Kartenzahlungen erstellt. Bitte beachten Sie, dass diese Integration alle Karten ablehnt, die bei der Zahlung eine Authentifizierung erfordern.

Kommt es vermehrt zu Zahlungen, die im Dashboard als Failed aufgelistet werden, ist es an der Zeit für ein Upgrade Ihrer Integration. Die globale Integration von Stripe verarbeitet diese Zahlungen, statt sie automatisch abzulehnen.