Weiter zum Inhalt
Konto erstellen oder anmelden
Das Logo der Stripe-Dokumentation
/
Konto erstellenAnmelden
ÜbersichtAktualisieren Sie Ihre Integration
Online-Zahlungen
ÜbersichtIhren Use case findenVerwenden Sie Managed Payments
Präsenzzahlungen
Zahlungsmethoden
Zahlungsszenarien
Mehr als Zahlungen

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
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# Available as a gem
sudo gem install stripe
Gemfile
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
# If you use bundler, you can add this line to your Gemfile
gem 'stripe'

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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -X POST https://api.stripe.com/v1/customers \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:"

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
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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 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/clover/stripe.js"></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:

ParameterBeschreibung
payment_intentDie eindeutige ID für die PaymentIntent.
payment_intent_client_secretDas 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.

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl -G https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}} \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
curl https://api.stripe.com/v1/payment_intents \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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

Ihre Integration testen

Verwenden Sie Ihre Test-API-Schlüssel, um den PaymentIntent zu bestätigen. Nach der Bestätigung 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.comDer Status des PaymentIntent wechselt nach mindestens drei Minuten von processing zu succeeded.
generatedSepaDebitIntentsFail@example.comDer Status der PaymentIntent wechselt von processing zu requires_payment_method.
generatedSepaDebitIntentsFailDelayed@example.comDer Status der PaymentIntent wechselt nach mindestens drei Minuten von processing zu requires_payment_method.
generatedSepaDebitIntentsSucceedDisputed@example.comDer Status der PaymentIntent wechselt von processing zu succeeded, es wird jedoch sofort eine Zahlungsanfechtung erstellt.

OptionalEreignisse nach Zahlung verarbeiten

Stripe übermittelt ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie im Dashboard einen Webhook oder eine Partnerlösung, um diese Ereignisse zu empfangen und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kund/innen, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs).

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnte der Kunde/die Kundin das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist und böswillige Clients könnten die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass asynchrone Ereignisse überwacht werden, hilft Ihnen dies auch dabei, in Zukunft mehr Zahlungsmethoden zu akzeptieren. Hier erhalten Sie Informationen zu den Unterschieden zwischen allen unterstützten Zahlungsmethoden.

Ereignisse empfangen und Geschäftsaktionen ausführen

Es gibt mehrere Möglichkeiten, Geschäftsaktionen zu empfangen und auszuführen.

Manuell

Verwenden Sie das Stripe-Dashboard, um alle Stripe-Zahlungen anzuzeigen, Zahlungsbelege per E-Mail zu senden, Auszahlungen abzuwickeln oder fehlgeschlagene Zahlungen erneut durchzuführen.

Benutzerdefinierter Code

Erstellen Sie einen Webhook-Handler, um Ereignisse zu überwachen und benutzerdefinierte asynchrone Zahlungsabläufe zu erstellen. Mit der Stripe-CLI können Sie Ihre Webhook-Integration lokal testen und Fehler beheben.

Vorgefertigte Apps

Verarbeiten Sie häufige Geschäftsereignisse, wie Automatisierung oder Marketing und Vertrieb durch Integration einer Partneranwendung.

OptionaliDEAL-Weiterleitung manuell verarbeiten

Wir empfehlen, die Verarbeitung von iDEAL-Weiterleitungen und -Zahlungen mit confirmIdealPayment Stripe.js zu überlassen. Sie können die Zahlung jedoch auch auf Ihrem Server abschließen und Ihren Kunden/Ihre Kundin manuell weiterleiten.

  1. Rufen Sie nach dem Erfassen der Zahlungsmethodendetails stripe.createPaymentMethod auf, um eine PaymentMethod zu erstellen:
    const paymentMethod = await stripe.createPaymentMethod({
  type: 'ideal',
  billing_details: {
    name: accountholderName.value,
  },
});
  2. Bestätigen Sie auf Ihrem Server den PaymentIntent mit der PaymentMethod-ID und stellen Sie eine return_url zur Verfügung für die Weiterleitung Ihres Kunden/Ihrer Kundin nach Abschluss der Zahlung zur Verfügung.
    Command Line
    cURL
    Stripe CLI
    Ruby
    Python
    PHP
    Java
    Node.js
    Go
    .NET
    No results
    curl https://api.stripe.com/v1/payment_intents/{{PAYMENT_INTENT_ID}}/confirm \
  -u "
    sk_test_BQokikJOvBiI2HlWgH4olfQ2
    :"     \
  -d payment_method=
    "{{PAYMENT_METHOD_ID}}"
     \
  --data-urlencode return_url="https://example.com/checkout/complete"
    Bestätigen, dass der PaymentIntent den Status requires_action mit der next_action redirect_to_url hat.
    {
  "next_action": {
    "type": "redirect_to_url",
    "redirect_to_url": {
      "url": "https://hooks.stripe.com/...",
      "return_url": "https://example.com/checkout/complete"
    }
  },
  "charges": {
    "data": [
      {
        "payment_method_details": {
          "ideal": {
          "bank": "ing",
          "bic": "INGBNL2A",
  3. Leiten Sie Ihre Kundinnen/Kunden an die URL in der Eigenschaft next_action weiter, damit sie die Zahlung authentifizieren und abschließen können.
    const action = intent.next_action;
if (action && action.type === 'redirect_to_url') {
  window.location = action.redirect_to_url.url;
}
    Ihr Kunde/Ihre Kundin wird nach Abschluss der Zahlung an die return_url weitergeleitet. Die URL enthält die Abfrageparameter payment_intent und payment_intent_client_secret. Sie können auch Ihre eigenen Abfrageparameter anhängen, wie oben beschrieben.

Siehe auch

War diese Seite hilfreich?
JaNein