Künftige SEPA-Lastschriftzahlungen mit iDEAL einrichten

Erfahren Sie, wie Sie Bankdaten aus einer iDEAL-Zahlung speichern und wie Ihre Kund/innen spätere Zahlungen per SEPA-Lastschrift vornehmen können.

Vorsicht

Wir empfehlen Ihnen, den Leitfaden Künftige Zahlungen einrichten zu befolgen. Wenn Sie Elements bereits integriert haben, lesen Sie den Migrationsleitfaden für Payment Element.

iDEAL ist eine Zahlungsmethode für die einmalige Verwendung, bei der Kundinnen/Kunden jede Zahlung authentifizieren müssen. Bei dieser Integration berechnet Stripe Ihren Kundinnen/Kunden 0,01 EUR per iDEAL, um deren Bankdaten zu erfassen. Nachdem Ihre Kundin/Ihr Kunde die Zahlung autorisiert hat, erstattet Stripe die Zahlung und speichert die IBAN in der Zahlungsmethode SEPA-Lastschriftverfahren. Sie können dann die PaymentMethod der SEPA-Lastschrift verwenden, um Zahlungen anzunehmen oder ein Abonnement einzurichten.

Vorsicht

Um iDEAL für die Einrichtung von SEPA-Lastschriftzahlungen zu verwenden, müssen Sie die SEPA-Lastschrift im Dashboard aktivieren. Außerdem gelten die Nutzungsbedingungen für iDEAL und unsere Nutzungsbedingungen für SEPA-Lastschrift.

Für die Einrichtung künftiger SEPA-Lastschriftzahlungen mit iDEAL in Ihrer App müssen ein SetupIntent zum Überprüfen des Vorgangs erstellt, die Mandatsbestätigung erfasst und die Kundin/der Kunde zu iDEAL weitergeleitet werden. Stripe verwendet den SetupIntent zur Nachverfolgung und Verarbeitung aller Einrichtungszustände, bis die Einrichtung abgeschlossen ist.

Stripe einrichten
Serverseitig

Zunächst benötigen Sie ein Stripe-Konto. Registrieren Sie sich jetzt.

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

Kunde/Kundin erstellen
Serverseitig

Erstellen Sie Kund/innen, wenn diese ein Konto bei Ihrem Unternehmen anlegen, und verknüpfen Sie sie mit Ihrer internen Darstellung ihres Kontos. So können Sie zu einem späteren Zeitpunkt die gespeicherten Details zur Zahlungsmethode abrufen und verwenden.

SetupIntent erstellen
Serverseitig

Erstellen Sie einen SetupIntent mit der Kunden-ID und legen Sie payment_method_types auf ideal fest. Der SetupIntent verfolgt die Schritte des Einrichtungsvorgangs. Bei iDEAL beinhaltet dies das Erfassen eines SEPA-Lastschriftmandats von den Kundinnen/Kunden und die Nachverfolgung seiner Gültigkeit.

Angaben zur Zahlungsmethode erfassen
Clientseitig

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

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung verlangen.

Die Adresse der Bezahlseite muss mit https:// beginnen, nicht mit http://, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Denken Sie jedoch daran, dieses zu aktivieren, wenn Sie zur Annahme von Live-Zahlungen bereit sind.

Stripe.js einrichten

Das Payment Element ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Bezahlseite ein, indem Sie es in den head Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Konformität zu gewährleisten. Fügen Sie das Skript nicht in ein Paket ein und hosten Sie selbst keine Kopie davon.

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

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript:

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'
);

Payment Element Ihrer Bezahlseite hinzufügen

Das Payment Element benötigt einen festen Platz auf Ihrer Zahlungsseite. Erstellen Sie einen leeren DOM-Knoten (Container) mit einer eindeutigen ID in Ihrem Zahlungsformular:

checkout.html
<form id="payment-form">
  <div id="payment-element">
    <!-- Elements will create form elements here -->
  </div>
  <button id="submit">Submit</button>
  <div id="error-message">
    <!-- Display error message to your customers here -->
  </div>
</form>

Wenn das vorherige Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden es mit dem DOM-Knoten (Container). Übergeben Sie das Client-Geheimnis aus dem vorherigen Schritt an options, wenn Sie die Elements-Instanz erstellen:

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in a previous step
const elements = stripe.elements(options);
// Optional: Autofill user's saved payment methods. If the customer's
// email is known when the page is loaded, you can pass the email
// to the linkAuthenticationElement on mount:
//
//   linkAuthenticationElement.mount("#link-authentication-element",  {
//     defaultValues: {
//       email: 'jenny.rosen@example.com',
//     }
//   })

// Create and mount the Payment Element
const paymentElementOptions = { layout: 'accordion'};
const paymentElement = elements.create('payment', paymentElementOptions);
paymentElement.mount('#payment-element');

Angaben zur Zahlungsmethode an Stripe senden
Clientseitig

Statt das gesamte SetupIntent-Objekt an den Client zu senden, wird die Verwendung des Client-Geheimnisses empfohlen. Dies unterscheidet sich von Ihren API-Schlüsseln, die Stripe-API-Anfragen authentifizieren. Achten Sie auf einen vorsichtigen Umgang mit dem Client-Geheimnis, da mit ihm die Zahlung abgeschlossen werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer dem Kunden/der Kundin selbst zugänglich gemacht werden.

Verwenden Sie stripe.confirmSetup, um den Setup Intent mit den Angaben aus dem Payment Element abzuschließen. Geben Sie eine return_url für diese Funktion an, um anzugeben, wohin Stripe Nutzer/innen weiterleitet, nachdem sie den Setup Intent abgeschlossen haben. Ihr/e Nutzer/in wird möglicherweise zuerst auf eine Zwischenseite weitergeleitet, z. B. eine Seite zur Bankautorisierung, bevor er auf die Seite return_url weitergeleitet wird.

checkout.js
const form = document.getElementById('payment-form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {error} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the setup intent. Show error to your customer (for example, payment
    // details incomplete)
    const messageContainer = document.querySelector('#error-message');
    messageContainer.textContent = error.message;
  } else {
    // Your customer will be redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer will be redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

Stellen Sie sicher, dass return_url einer Seite auf Ihrer Website entspricht, die den Status der Setup Intent angibt. Wenn Stripe den Kunden/die Kundin an return_url weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:

Parameter	Beschreibung
`setup_intent`	Die eindeutige ID für die `SetupIntent`
`setup_intent_client_secret`	Das Client-Geheimnis `des` SetupIntent`-Objekts.

Zahlungsmethode SEPA-Lastschrift später belasten
Serverseitig

Wenn Sie das Konto Ihrer Kundin/Ihres Kunden erneut belasten müssen, erstellen Sie einen neuen PaymentIntent. Suchen Sie nach der ID der SEPA-Lastschrift-Zahlungsmethode, indem Sie den SetupIntent abrufen und das Feld latest_attempt erweitern, in dem Sie die ID generated_sepa_debit im Innern von payment_method_details finden.

Erstellen Sie eine PaymentIntent mit der SEPA-Lastschrift und Kunden-IDs.

Integration testen

Bestätigen Sie den SetupIntent mit Ihren Test-API-Schlüsseln. Nach der Bestätigung werden Sie an eine Testseite mit Optionen zur Autorisierung oder Ablehnung der Einrichtung der Zahlungsmethode weitergeleitet.

Klicken Sie auf Authorize test payment (Testzahlung autorisieren), um den Fall zu testen, wenn die Einrichtung erfolgreich durchgeführt wird. Die SetupIntent wechselt von requires_action zu succeeded.
Klicken Sie auf Fail test payment (Testzahlung ablehnen), um den Fall zu testen, wenn der/die Kund/in nicht authentifiziert werden kann. Die SetupIntent wechselt von requires_action zu requires_payment_method.

Ihre Integration von SEPA-Lastschrift testen

Setzen Sie payment_method.billing_details.email auf einen der folgenden Werte, um die PaymentIntent-Statusübergänge zu testen. Sie können Ihren eigenen benutzerdefinierten Text am Anfang der E-Mail-Adresse, gefolgt von einem Unterstrich, einfügen. Beispielsweise ergibt sich aus test_1_generatedSepaDebitIntentsFail@example.com eine SEPA-Lastschrift-PaymentMethod, die immer fehlschlägt, wenn sie mit einem PaymentIntent verwendet wird.

E-Mail-Adresse	Beschreibung
`generatedSepaDebitIntentsSucceed@example.com`	Der Status der PaymentIntent wechselt von `processing` zu `succeeded`.
`generatedSepaDebitIntentsSucceedDelayed@example.com`	Der Status des PaymentIntent wechselt nach mindestens drei Minuten von `processing` zu `succeeded`.
`generatedSepaDebitIntentsFail@example.com`	Der Status der PaymentIntent wechselt von `processing` zu `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	Der Status der PaymentIntent wechselt nach mindestens drei Minuten von `processing` zu `requires_payment_method`.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	Der Status der PaymentIntent wechselt von `processing` zu `succeeded`, es wird jedoch sofort eine Zahlungsanfechtung erstellt.

Künftige SEPA-Lastschriftzahlungen mit iDEAL einrichten

Erfahren Sie, wie Sie Bankdaten aus einer iDEAL-Zahlung speichern und wie Ihre Kund/innen spätere Zahlungen per SEPA-Lastschrift vornehmen können.

Vorsicht

Vorsicht

Stripe einrichten
Serverseitig

Kunde/Kundin erstellen
Serverseitig

SetupIntent erstellen
Serverseitig

Angaben zur Zahlungsmethode erfassen
Clientseitig

Stripe.js einrichten

Payment Element Ihrer Bezahlseite hinzufügen

Angaben zur Zahlungsmethode an Stripe senden
Clientseitig

Zahlungsmethode SEPA-Lastschrift später belasten
Serverseitig

Integration testen

Ihre Integration von SEPA-Lastschrift testen

OptionalEreignisse nach Einrichtung verarbeiten

Siehe auch

Künftige SEPA-Lastschriftzahlungen mit iDEAL einrichten

Erfahren Sie, wie Sie Bankdaten aus einer iDEAL-Zahlung speichern und wie Ihre Kund/innen spätere Zahlungen per SEPA-Lastschrift vornehmen können.

Vorsicht

Vorsicht

Stripe einrichtenServerseitig

Kunde/Kundin erstellenServerseitig

SetupIntent erstellenServerseitig

Angaben zur Zahlungsmethode erfassenClientseitig

Stripe.js einrichten

Payment Element Ihrer Bezahlseite hinzufügen

Angaben zur Zahlungsmethode an Stripe sendenClientseitig

Zahlungsmethode SEPA-Lastschrift später belastenServerseitig

Integration testen

Ihre Integration von SEPA-Lastschrift testen

OptionalEreignisse nach Einrichtung verarbeiten

Siehe auch

Stripe einrichten
Serverseitig

Kunde/Kundin erstellen
Serverseitig

SetupIntent erstellen
Serverseitig

Angaben zur Zahlungsmethode erfassen
Clientseitig

Angaben zur Zahlungsmethode an Stripe senden
Clientseitig

Zahlungsmethode SEPA-Lastschrift später belasten
Serverseitig