Weiter zum Inhalt
Konto erstellen
 oder
anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellen
Anmelden
ÜbersichtAktualisieren Sie Ihre Integration
Integration starten
Payment scenarios
Persönliche Zahlungen
Other Stripe products

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:

Command Line
# Available as a gem
sudo gem install stripe
Gemfile
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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.

Command Line
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:"

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.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d amount=1099 \
  -d currency=eur \
  -d "payment_method_types[]"=ideal \
  -d customer={{CUSTOMER_ID}} \
  -d setup_future_usage=off_session

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:

main.rb
get '/secret' do
  intent = # ... Create or retrieve the PaymentIntent
  {client_secret: intent.client_secret}.to_json
end

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 und Mandatsbestätigung erfassen
Clientseitig

Erfassen Sie Zahlungsinformationen auf dem Client mit Stripe Elements. Bei Elements handelt es sich um einen Satz vorgefertigter Komponenten der Nutzeroberfläche zur Erfassung von Zahlungsdetails. Ein Stripe Element enthält einen iFrame, der Zahlungsinformationen über eine HTTPS-Verbindung sicher an Stripe sendet.

Die Adresse der Bezahlseite muss ebenfalls mit https:// beginnen und nicht mit http://, damit Ihre Integration funktioniert. Sie können Ihre Integration ohne HTTPS testen. Dann müssen Sie das Protokoll aber aktivieren, wenn Sie bereit sind, Live-Zahlungen anzunehmen.

Stripe Elements einrichten

Stripe Elements ist ein Feature von Stripe.js und steht damit automatisch zur Verfügung. Fügen Sie das Stripe.js-Skript auf Ihrer Zahlungsseite ein, indem Sie es in den head Ihrer HTML-Datei einbinden. Laden Sie Stripe.js immer direkt von js.stripe.com, um die PCI-Compliance zu gewährleisten. Fügen Sie das Skript nicht in ein Bundle 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 Checkout-Seite mit dem folgenden JavaScript eine Instanz von Elements:

const stripe = Stripe(
'pk_test_TYooMQauvdEDq54NiTphI7jx'
);
const elements = stripe.elements();

Add and configure an idealBank Element

Weisen Sie Elements in Ihrem Zahlungsformular einen festen Platz zu. Erstellen Sie in Ihrem Zahlungsformular leere DOM-Nodes (Container) mit eindeutigen IDs und übergeben Sie diese IDs dann an Elements.

Wenn Sie Zahlungen per SEPA-Lastschrift abwickeln möchten, müssen Ihre Kund/innen dem Lastschriftmandat zustimmen. Zeigen Sie den folgenden Standard-Autorisierungstext an, damit Ihre Kund/innen das Mandat implizit akzeptieren.

Ersetzen Sie Rocket Rides durch den Namen Ihres Unternehmens.

Authorization text template
By providing your payment information and confirming this payment, you authorise (A)
Ersetzen Sie dies durch Ihren Firmennamen
 and Stripe, our payment service provider, to send instructions to your bank to debit your account and (B) your bank to debit your account in accordance with those instructions. As part of your rights, you are entitled to a refund from your bank under the terms and conditions of your agreement with your bank. A refund must be claimed within 8 weeks starting from the date on which your account was debited. Your rights are explained in a statement that you can obtain from your bank. You agree to receive notifications for future debits up to 2 days before they occur.
Kopieren

Beim Einrichten einer Zahlungsmethode oder Bestätigen einer PaymentIntent wird das akzeptierte Mandat erstellt. Da die Kund/innen das Mandat implizit akzeptiert haben, müssen Sie diese Bedingungen in Ihrem Formular oder per E-Mail mitteilen.

checkout.html
<form id="payment-form">
  <div class="form-row">
    <label for="accountholder-name">
      Name
    </label>
    <input id="accountholder-name"  name="accountholder-name">
  </div>

  <div class="form-row">
    <label for="accountholder-email">
      Email
    </label>
    <input id="accountholder-email"  name="accountholder-email">
  </div>

  <div class="form-row">
    <!--
      Using a label with a for attribute that matches the ID of the
      Element container enables the Element to automatically gain focus
      when the customer clicks on the label.
    -->
    <label for="ideal-bank-element">
      iDEAL Bank
    </label>
    <div id="ideal-bank-element">
      <!-- A Stripe Element will be inserted here. -->
    </div>
  </div>

  <button id="submit-button" data-secret="{CLIENT_SECRET}">Submit</button>

  <!-- Display mandate acceptance text. -->
  <div id="mandate-acceptance">
    By providing your payment information and confirming this payment, you
    authorise (A) Rocket Rides and Stripe, our payment service provider, to
    send instructions to your bank to debit your account and (B) your bank to
    debit your account in accordance with those instructions. As part of your
    rights, you are entitled to a refund from your bank under the terms and
    conditions of your agreement with your bank. A refund must be claimed
    within 8 weeks starting from the date on which your account was debited.
    Your rights are explained in a statement that you can obtain from your
    bank. You agree to receive notifications for future debits up to 2 days
    before they occur.
  </div>
  <!-- Used to display form errors. -->
  <div id="error-message" role="alert"></div>
</form>

Wenn das obige Formular geladen wurde, erstellen Sie eine Instanz einesidealBank-Elements und verbinden diese mit dem oben erstellten Element-Container:

const options = {
  // Custom styling can be passed to options when creating an Element
  style: {
    base: {
      padding: '10px 12px',
      color: '#32325d',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      },
    },
  },
};

// Create an instance of the idealBank Element
const idealBank = elements.create('idealBank', options);

// Add an instance of the idealBank Element into
// the `ideal-bank-element` <div>
idealBank.mount('#ideal-bank-element');

Die Elements sind vollständig anpassbar. Sie können Elements so konfigurieren, dass sie zum Erscheinungsbild Ihrer Website passen und den Bezahlvorgang für Ihre Kundinnen/Kunden weiter optimieren. Außerdem lassen sich verschiedene Eingabestatus konfigurieren, sodass z. B. sichtbar wird, wann der Fokus auf dem Element liegt.

Zahlung an Stripe senden
Clientseitig

Anstatt das gesamte PaymentIntent-Objekt an den Client zu senden, verwenden Sie dessen Client-Geheimnis aus Schritt 3. Dieses unterscheidet sich von Ihren API-Schlüsseln, mit denen Anfragen der Stripe-API authentifiziert werden.

Achten Sie aber 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 der Kundin/dem Kunden selbst zugänglich gemacht werden.

Verwenden Sie stripe.confirmIdealPayment, um die Weiterleitung von Ihrer Seite zu verarbeiten und die Zahlung zu ermöglichen. Fügen Sie dieser Funktion eine return_url hinzu, um das Ziel anzugeben, an das Nutzer/innen weitergeleitet werden, nachdem sie die Zahlung auf der Website oder in der App ihrer Bank durchgeführt haben.

Geben Sie in payment_method[billing_details]den Namen und die E-Mail-Adresse der Kundin/des Kunden an. Diese Angaben werden zum Generieren der PaymentMethod SEPA-Lastschrift verwendet.

Vorsicht

Um den Parameter setup_future_usage wie unten dargestellt zu übergeben, müssen Sie die bei der Erstellung Ihrer Instanz von Elements übergebene API-Version anpassen. Lesen Sie die Anweisungen für die Einrichtung von Stripe Elements oben, wenn Sie setup_future_usage in diesem Schritt nicht übergeben können.

client.js
const form = document.getElementById('payment-form');
const accountholderName = document.getElementById('accountholder-name');

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

  // Redirects away from the client
  const {error} = await stripe.confirmIdealPayment(
    '{{PAYMENT_INTENT_CLIENT_SECRET}}',
    {
      payment_method: {
        ideal: idealBank,
        billing_details: {
          name: accountholderName.value,
        },
      },
      return_url: 'https://example.com/checkout/complete',
    }
  );
});

Wenn Ihr Kunde/Ihre Kundin eine Zahlung übermittelt, leitet Stripe ihn an die return_url weiter und fügt die folgenden URL-Abfrageparameter ein. Die Rückgabeseite kann diese nutzen, um den Status des PaymentIntent abzurufen, damit der Kunde/die Kundin den Zahlungsstatus anzeigen kann.

Wenn Sie die return_url angeben, können Sie auch Ihre eigenen Abfrageparameter für die Verwendung auf der Rückgabeseite anhängen.

ParameterBeschreibung
payment_intentDie eindeutige ID für den PaymentIntent.
payment_intent_client_secretDas Client-Geheimnis des PaymentIntent-Objekts.

Wenn Kundinnen und Kunden auf Ihre Seite weitergeleitet werden, können Sie payment_intent_client_secret nutzen, um den PaymentIntent abzufragen und Ihren Kundinnen und Kunden den Transaktionsstatus anzuzeigen.

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.

Command Line
curl -G https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}} \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "expand[]"=latest_charge

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.

Command Line
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
  -d "payment_method_types[]"=sepa_debit \
  -d amount=1099 \
  -d currency=eur \
  -d customer=
{{CUSTOMER_ID}}
 \
  -d payment_method={{SEPA_DEBIT_PAYMENT_METHOD_ID}} \
  -d confirm=true

Integration testen

Wählen Sie mit Ihren Test-API-Schlüsseln eine beliebige Bank in der Liste aus. Nachdem Sie den PaymentIntent bestätigt haben, werden Sie an eine Testseite mit Optionen zur Autorisierung oder Ablehnung der Zahlung weitergeleitet.

  • 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-AdresseBeschreibung
generatedSepaDebitIntentsSucceed@example.comDer Status der PaymentIntent wechselt von processing zu succeeded.
generatedSepaDebitIntentsSucceedDelayed@example.comThe PaymentIntent status transitions from processing to succeeded after at least three minutes.
generatedSepaDebitIntentsFail@example.comDer Status der PaymentIntent wechselt von processing zu requires_payment_method.
generatedSepaDebitIntentsFailDelayed@example.comThe PaymentIntent status transitions from processing to requires_payment_method after at least three minutes.
generatedSepaDebitIntentsSucceedDisputed@example.comDer Status der PaymentIntent wechselt von processing zu succeeded, es wird jedoch sofort eine Zahlungsanfechtung erstellt.

Siehe auch

War diese Seite hilfreich?
JaNein
Benötigen Sie Hilfe? Kontaktieren Sie den Kundensupport.
Nehmen Sie an unserem Programm für frühzeitigen Zugriff teil.
Schauen Sie sich unseren Produkt-Changelog an.
Fragen? Sales-Team kontaktieren.
Unterstützt von Markdoc
Auf dieser Seite
Stripe einrichten
Kunde/Kundin erstellen
Erstellen Sie ein PaymentIntent
Client-Geheimnis abrufen
Angaben zur Zahlungsmethode und Mandatsbestätigung erfassen
Stripe Elements einrichten
Zahlung an Stripe senden
Zahlungsmethode SEPA-Lastschrift später belasten
Integration testen
Ihre Integration von SEPA-Lastschrift testen
Siehe auch
Verwendete Produkte
Payments
Elements