Bankdaten aus einer iDEAL-Zahlung speichern

So speichern Sie die IBAN-Bankdaten aus einer iDEAL-Zahlung.

Vorsicht

Wir empfehlen Ihnen, den Leitfaden Zahlungsdaten bei Zahlung speichern zu befolgen. Wenn Sie Elements bereits integriert haben, lesen Sie den Migrationsleitfaden für Payment Element.

Bei iDEAL handelt es sich um eine beliebte Zahlungsmethode für die einmalige Nutzung in den Niederlanden, bei der Kundinnen/Kunden ihre Zahlungen authentifizieren müssen. Bei Zahlungen mit iDEAL werden Kundinnen/Kunden zur Autorisierung der Zahlung zu einer Webansicht weitergeleitet und dann wieder zur Ihrer App zurückgeleitet, wo Sie eine sofortige Benachrichtigung über den Erfolg oder das Fehlschlagen der Zahlung erhalten.

Sie können auch iDEAL verwenden, um die IBAN-Bankdaten Ihrer Kundinnen und Kunden in einer SEPA-Lastschrift-PaymentMethod zu speichern. Anschließend können Sie die PaymentMethod SEPA-Lastschrift verwenden, um Zahlungen anzunehmen oder um ein Abonnement einzurichten. Auf diese Weise wird der Bezahlvorgang für Ihre Kundinnen und Kunden unkomplizierter gestaltet, da sie die IBAN nicht erneut eingeben müssen. Außerdem erhalten Sie den verifizierten Namen Ihrer Kundinnen und Kunden und die validierte IBAN.

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.

Die Annahme von iDEAL-Zahlungen umfasst das Erstellen eines PaymentIntent-Objekts zur Nachverfolgung einer Zahlung, das Erfassen von Informationen zur Zahlungsmethode und der Mandatsbestätigung sowie das Übermitteln der Zahlung an Stripe zur Verarbeitung. Stripe verwendet den PaymentIntent, um alle Status der Zahlung zu verfolgen und zu verarbeiten, bis die Zahlung abgeschlossen ist. Verwenden Sie die ID der SEPA-Lastschrift-PaymentMethod, die von Ihrem ersten iDEAL-PaymentIntent erfasst wurde, um zukünftige Zahlungen zu erstellen.

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:

Kundin/Kunden 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.

Erstellen Sie ein PaymentIntent
Serverseitig

Erstellen Sie einen PaymentIntent auf Ihrem Server und geben Sie den einzuziehenden amount, die Währung eur, die Kunden-ID und off_session als Argument für die Einrichtung der zukünftigen Verwendung an. Es gibt keinen Mindestzahlungsbetrag, und iDEAL unterstützt keine anderen Währungen. Wenn Sie über eine bestehende Payment Intents API-Integration verfügen, fügen Sie ideal der Liste der Arten der Zahlungsmethoden hinzu.

Client-Geheimnis abrufen

Im PaymentIntent ist ein Client-Geheimnis enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client.

Rufen Sie das Client-Geheimnis von einem Endpoint auf Ihrem Server ab, indem Sie die Browser-Funktion fetch verwenden. Diese Vorgehensweise funktioniert am besten, wenn es sich bei Ihrer Client-Seite um eine einseitige Anwendung handelt, insbesondere wenn sie mit einem modernen Frontend-Framework wie React erstellt wurde. Erstellen Sie den Server-Endpoint, der das Client-Geheimnis bereitstellt:

Und dann rufen Sie das Client-Geheimnis mit JavaScript auf der Client-Seite ab:

(async () => {
  const response = await fetch('/secret');
  const {client_secret: clientSecret} = await response.json();
  // Render the form using the clientSecret
})();

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:

Gehen Sie sorgfältig mit dem Client-Geheimnis um, denn es kann die Zahlung abschließen. Protokollieren Sie es nicht, betten Sie es nicht in URLs ein und geben Sie es nur dem/der Kund/in preis.

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

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine return_url an, um anzugeben, wohin Stripe die Nutzer/innen nach Durchführung der Zahlung weiterleiten soll. Ihre Nutzer/innen werden möglicherweise zunächst an eine zwischengeschaltete Seite weitergeleitet, wie z. B. eine Bankautorisierungsseite, bevor sie zur return_url weitergeleitet werden. Kartenzahlungen werden sofort zur return_url weitergeleitet, wenn eine Zahlung erfolgreich war.

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

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

  const {error} = await stripe.confirmPayment({
    //`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 payment. 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`.
  }
});

Notiz

Für die Durchführung von stripe.confirmPayment werden möglicherweise einige Sekunden benötigt. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Zeigen Sie stattdessen ein Wartesymbol an, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, teilen Sie dies dem Kunden/der Kundin mit, reaktivieren Sie das Formular und blenden Sie das Wartesymbol aus. Falls der Kunde/die Kundin weitere Schritte (z. B. eine Authentifizierung) für den Abschluss der Zahlung durchführen muss, begleitet sie Stripe.js bei diesem Vorgang.

Wurde die Zahlung erfolgreich abgeschlossen, wird die Karte, die für die Zahlung verwendet wurde, im Kundenobjekt gespeichert. Dies wird über das Feld Kundin/Kunde der PaymentMethod angezeigt. Verknüpfen Sie anschließend die ID des Kundenobjekts mit Ihrer eigenen Instanz der Kundin/des Kunden, falls eine vorliegt. Sie können nun das gespeicherte PaymentMethod-Objekt nutzen, um zukünftig Zahlungen von Ihren Kundinnen/Kunden zu erfassen, ohne sie erneut nach den Zahlungsdaten zu fragen.

Achten Sie darauf, dass die return_url auf eine Seite Ihrer Website verweist, die den Status der Zahlung angibt. Wenn Stripe den/die Kund/in an die return_url weiterleitet, stellen wir die folgenden URL-Abfrageparameter bereit:

Parameter	Beschreibung
`payment_intent`	Die eindeutige ID für die `PaymentIntent`.
`payment_intent_client_secret`	Das Client-Geheimnis des `PaymentIntent`-Objekts.

Vorsicht

Wenn Sie über Tools verfügen, die die Browser-Sitzung der Kund/innen verfolgen, müssen Sie möglicherweise die Domain stripe.com zur Referenz-Ausschlussliste hinzufügen. Weiterleitungen haben zur Folge, dass einige Tools neue Sitzungen erstellen. Dies wiederum hindert Sie daran, die gesamte Sitzung zu verfolgen.

Verwenden Sie einen der Abfrageparameter, um den PaymentIntent abzurufen. Überprüfen Sie den Status des PaymentIntent, um zu entscheiden, was Ihren Kundinnen/Kunden angezeigt werden soll. Sie können bei der Angabe der return_url auch Ihre eigenen Abfrageparameter anhängen, die während des Weiterleitungsvorgangs erhalten bleiben.

status.js
// Initialize Stripe.js using your publishable key
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
);

// Retrieve the "payment_intent_client_secret" query parameter appended to
// your return_url by Stripe.js
const clientSecret = new URLSearchParams(window.location.search).get(
  'payment_intent_client_secret'
);

// Retrieve the PaymentIntent
stripe.retrievePaymentIntent(clientSecret).then(({paymentIntent}) => {
  const message = document.querySelector('#message')

  // Inspect the PaymentIntent `status` to indicate the status of the payment
  // to your customer.
  //
  // Some payment methods will [immediately succeed or fail][0] upon
  // confirmation, while others will first enter a `processing` state.
  //
  // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
  switch (paymentIntent.status) {
    case 'succeeded':
      message.innerText = 'Success! Payment received.';
      break;

    case 'processing':
      message.innerText = "Payment processing. We'll update you when payment is received.";
      break;

    case 'requires_payment_method':
      message.innerText = 'Payment failed. Please try another payment method.';
      // Redirect your user back to your payment page to attempt collecting
      // payment again
      break;

    default:
      message.innerText = 'Something went wrong.';
      break;
  }
});

Zahlungsmethode SEPA-Lastschrift später belasten

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 vorherigen PaymentIntent abrufen und das Feld latest_charge erweitern, in dem Sie die generated_sepa_debit-ID innerhalb der payment_method_details finden.

Die ID der Zahlungsmethode SEPA-Direktlastschrift finden Sie als generated_sepa_debit-ID unter payment_method_details in der Antwort.

{
  "latest_charge": {
    "payment_method_details": {
      "ideal": {
        "bank": "ing",
        "bic": "INGBNL2A",
        "iban_last4": "****",
        "generated_sepa_debit": "pm_1GrddXGf98efjktuBIi3ag7aJQ",
        "verified_name": "JENNY ROSEN"
      },
      "type": "ideal"
    },
  },
  "payment_method_options": {
    "ideal": {}

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

Ihre Integration testen

Use your test API keys to confirm the PaymentIntent. After confirming, you’re redirected to a test page with options to authorize or fail the payment.

Klicken Sie auf Authorize test payment (Testzahlung autorisieren), um den Fall zu testen, wenn die Zahlung erfolgreich durchgeführt wird. Die PaymentIntent 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 PaymentIntent 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`	The PaymentIntent status transitions from `processing` to `succeeded` after at least three minutes.
`generatedSepaDebitIntentsFail@example.com`	Der Status der PaymentIntent wechselt von `processing` zu `requires_payment_method`.
`generatedSepaDebitIntentsFailDelayed@example.com`	The PaymentIntent status transitions from `processing` to `requires_payment_method` after at least three minutes.
`generatedSepaDebitIntentsSucceedDisputed@example.com`	Der Status der PaymentIntent wechselt von `processing` zu `succeeded`, es wird jedoch sofort eine Zahlungsanfechtung erstellt.

Bankdaten aus einer iDEAL-Zahlung speichern

So speichern Sie die IBAN-Bankdaten aus einer iDEAL-Zahlung.

Vorsicht

Vorsicht

Stripe einrichten
Serverseitig

Kundin/Kunden erstellen
Serverseitig

Erstellen Sie ein PaymentIntent
Serverseitig

Client-Geheimnis abrufen

Angaben zur Zahlungsmethode erfassen
Clientseitig

Stripe.js einrichten

Payment Element Ihrer Bezahlseite hinzufügen

Zahlung an Stripe senden
Clientseitig

Notiz

Vorsicht

Zahlungsmethode SEPA-Lastschrift später belasten

Ihre Integration testen

Ihre Integration von SEPA-Lastschrift testen

OptionalEreignisse nach Zahlung verarbeiten

OptionaliDEAL-Weiterleitung manuell verarbeiten

Siehe auch

Bankdaten aus einer iDEAL-Zahlung speichern

So speichern Sie die IBAN-Bankdaten aus einer iDEAL-Zahlung.

Vorsicht

Vorsicht

Stripe einrichtenServerseitig

Kundin/Kunden erstellenServerseitig

Erstellen Sie ein PaymentIntentServerseitig

Client-Geheimnis abrufen

Angaben zur Zahlungsmethode erfassenClientseitig

Stripe.js einrichten

Payment Element Ihrer Bezahlseite hinzufügen

Zahlung an Stripe sendenClientseitig

Notiz

Vorsicht

Zahlungsmethode SEPA-Lastschrift später belasten

Ihre Integration testen

Ihre Integration von SEPA-Lastschrift testen

OptionalEreignisse nach Zahlung verarbeiten

OptionaliDEAL-Weiterleitung manuell verarbeiten

Siehe auch

Stripe einrichten
Serverseitig

Kundin/Kunden erstellen
Serverseitig

Erstellen Sie ein PaymentIntent
Serverseitig

Angaben zur Zahlungsmethode erfassen
Clientseitig

Zahlung an Stripe senden
Clientseitig