Zahlung mit Mondu annehmenPrivate Vorschau

So richten Sie Ihre Integration mit Mondu ein.

Web

Verwenden Sie das Payment Element, um ein nutzerdefiniertes Stripe-Zahlungsformular in Ihre Website oder Anwendung einzubetten und Kundinnen und Kunden Zahlungsmethoden anzubieten. Erweiterte Konfigurationen und Anpassungen finden Sie im Integrationsleitfaden für die Zahlungsannahme

Stripe einrichten
Serverseitig

Erstellen Sie ein Stripe-Konto, um zu beginnen.

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

Zahlungsdaten erfassen
Clientseitig

Sie können nun mit dem Payment Element Zahlungsdetails auf dem Client erfassen. Das Payment Element ist eine vorgefertigte UI-Komponente, die die Erfassung von Zahlungsdaten für eine Vielzahl von Zahlungsmethoden vereinfacht.

Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung 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 voraussetzen.

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

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 Zahlungsseite 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 zu Ihrer Checkout-Seite hinzufügen

Das Payment Element benötigt einen Platz auf Ihrer Checkout-Seite. 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>

Nachdem das obige Formular geladen wurde, erstellen Sie eine Elements-Instanz mit einem Wert für mode, amount und currency. Diese Werte bestimmen, welche Zahlungsmethoden Ihren Kundinnen/Kunden angezeigt werden. Um eine neue Zahlungsmethode in Ihrem Fomular anzugeben, müssen Sie sie unbedingt im Dashboard aktivieren.

checkout.js
const options = {
  mode: 'payment',
  amount: 1000,
  currency: 'eur',
  // Fully customizable with appearance API.
  appearance: {/*...*/},
};

// Set up Stripe.js and Elements to use in checkout form
const elements = stripe.elements(options);

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

Sie können das Payment Element an das Design Ihrer Website anpassen, indem Sie beim Erstellen des Elements-Anbieters das Erscheinungs-Objekt an options übergeben.

Adressen einholen

Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Verwenden Sie das Address Element, um die vollständige Rechnungsadresse (z. B. zur Berechnung der Steuer für digitale Waren und Dienstleistungen) oder die Versandadresse einer Kundin/eines Kunden zu erfassen.

PaymentIntent erstellen
Serverseitig

Benutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung ausführen

Navigieren Sie zu Schritt 5 im Leitfaden zum Abschließen von Zahlungen, um Ihre nutzerdefinierte Geschäftslogik unmittelbar vor der Zahlungsbestätigung auszuführen. Führen Sie andernfalls die folgenden Schritte für eine einfachere Integration aus, die stripe.confirmPayment auf dem Client verwendet, um die Zahlung zu bestätigen und alle nächsten Aktionen abzuwickeln.

Wenn der Kunde/die Kundin Ihr Zahlungsformular absendet, verwenden Sie einen PaymentIntent, um den Bestätigungs- und Zahlungsvorgang zu vereinfachen. Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem amount und einer currency. Um zu verhindern, dass böswillige Kundinnen/Kunden ihre eigenen Preise wählen, entscheiden Sie, wie viel Sie berechnen möchten, immer auf der Serverseite (einer vertrauenswürdigen Umgebung) und nicht auf dem Client.

Zu einem PaymentIntent gehört ein Client-Geheimnis. Geben Sie diesen Wert an Ihren Client zurück, damit Stripe.js den Zahlungsvorgang sicher abschließen kann.

Zahlung an Stripe senden
Clientseitig

Verwenden Sie stripe.confirmPayment, um die Zahlung mit den Angaben aus dem Payment Element abzuschließen.

Geben Sie eine return_url für diese Funktion an, um anzugeben, wohin Stripe den/die Nutzer/in nach Abschluss der Zahlung weiterleitet. Ihre Nutzer/innen werden möglicherweise zunächst an eine Zwischenwebsite, z. B. eine Bankautorisierungsseite, weitergeleitet, bevor sie zur return_url weitergeleitet werden. Bei Kartenzahlungen erfolgt die Weiterleitung zur return_url sofort, wenn eine Zahlung erfolgreich ist.

Wenn Sie bei Kartenzahlungen nach Abschluss der Zahlung keine Weiterleitung wünschen, können Sie redirect auf if_required festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit auf Weiterleitung basierenden Zahlungsmethoden bezahlen.

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

const handleError = (error) => {
  const messageContainer = document.querySelector('#error-message');
  messageContainer.textContent = error.message;
  submitBtn.disabled = false;
}

form.addEventListener('submit', async (event) => {
  // We don't want to let default form submission happen here,
  // which would refresh the page.
  event.preventDefault();

  // Prevent multiple form submissions
  if (submitBtn.disabled) {
    return;
  }

  // Disable form submission while loading
  submitBtn.disabled = true;

  // Trigger form validation and wallet collection
  const {error: submitError} = await elements.submit();
  if (submitError) {
    handleError(submitError);
    return;
  }

  // Create the PaymentIntent and obtain clientSecret
  const res = await fetch("/create-intent", {
    method: "POST",
  });

  const {client_secret: clientSecret} = await res.json();

  // Confirm the PaymentIntent using the details collected by the Payment Element
  const {error} = await stripe.confirmPayment({
    elements,
    clientSecret,
    confirmParams: {
      return_url: 'https://example.com/order/123/complete',
    },
  });

  if (error) {
    // This point is only reached if there's an immediate error when
    // confirming the payment. Show the error to your customer (for example, payment details incomplete)
    handleError(error);
  } else {
    // Your customer is redirected to your `return_url`. For some payment
    // methods like iDEAL, your customer is redirected to an intermediate
    // site first to authorize the payment, then redirected to the `return_url`.
  }
});

OptionalEreignisse nach Zahlung verarbeiten

OptionalSeparate Autorisierung und Erfassung

Integration testen

Um Ihre Integration zu testen, wählen Sie die Zahlungsmethode aus und tippen Sie auf Bezahlen. In einer Sandbox werden Sie auf eine Test-Zahlungsseite weitergeleitet, auf der Sie die Zahlung genehmigen oder ablehnen können.

Wenn Sie im Live-Modus auf Bezahlen tippen, werden Sie zur Website von Mondu weitergeleitet. Mit Mondu haben Sie keine Möglichkeit, die Zahlung zu genehmigen oder abzulehnen.

Fehlercodes

In der folgenden Tabelle finden Sie häufige Fehlercodes und die empfohlenen Maßnahmen:

Fehlercode	Empfohlene Maßnahme
`payment_intent_invalid_currency`	Geben Sie eine unterstützte Währung ein.
`missing_required_parameter`	In der Fehlermeldung erhalten Sie weitere Informationen zum erforderlichen Parameter.
`payment_intent_payment_attempt_failed`	Dieser Code kann im Feld last_payment_error.code eines PaymentIntent angezeigt werden. Eine genauere Fehlerursache und Vorschläge zur Fehlerbehebung finden Sie in der Fehlermeldung.
`payment_intent_redirect_confirmation_without_return_url`	Geben Sie eine `return_url` an, wenn Sie einen PaymentIntent bestätigen.