Künftige PayTo-Zahlungen einrichtenNur auf Einladung

So richten Sie zukünftige PayTo-Zahlungen ein.

Mit PayTo können Kundinnen/Kunden in Australien PayTo-Vereinbarungen für einmalige und wiederkehrende Zahlungen in ihren Banking-Apps authentifizieren. Kundinnen/Kunden zahlen mit PayTo, indem sie eine Benachrichtigung über eine ausstehende Vereinbarungsanfrage erhalten, die Bedingungen der Vereinbarung autorisieren und dann wieder zu Ihrer App wechseln.

Durch die Einrichtung einer PayTo-Vereinbarung für zukünftige Zahlungen können Sie jetzt bereits vorsorglich die kundenseitige Zustimmung für künftige Zahlungen einholen. Kundinnen/Kunden können ihre PayTo-Vereinbarungen in ihren Banking-Apps einsehen, verwalten, pausieren und widerrufen.

Vorsicht

Stripe unterstützt keine Änderung oder Unterbrechung von PayTo-Vereinbarungen durch Kundinnen/Kunden. Wenn ein Kunde/eine Kundin versucht, eine Vereinbarung zu pausieren oder zu ändern, kündigen wir die Vereinbarung und senden Ihnen einen mandate.updated-Webhook. Nachdem Sie den Webhook erhalten haben, können Sie sich an Ihren Kunden/Ihre Kundin wenden, um herauszufinden, warum er/sie seine/ihre Vereinbarung angepasst hat, und eine neue Vereinbarung einrichten.

Vorsicht

Stripe passt die den Kundinnen/Kunden angezeigten Zahlungsmethoden automatisch an Währung, geltende Einschränkungen und andere Parameter an. Wir empfehlen Ihnen, Ihre Zahlungsmethoden im Dashboard zu konfigurieren und sich dabei an dem Artikel Zahlungen annehmen zu orientieren.

Wenn Sie weiterhin manuell konfigurieren möchten, welche Zahlungsmethoden Ihren Kundinnen/Kunden mit Checkout angezeigt werden sollen, können Sie sich an diesem Leitfaden orientieren. Aktualisieren Sie andernfalls Ihre Integration, um Zahlungsmethoden im Dashboard zu konfigurieren.

Stripe einrichten
Serverseitig

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

Um von Ihrer Anwendung auf die Stripe API zuzugreifen, verwenden Sie unsere offiziellen Bibliotheken:

Kundin/Kunden erstellen
Serverseitig

Erstellen Sie Kundinnen/Kunden, nachdem diese ein Konto bei Ihrem Unternehmen angelegt haben, und verknüpfen Sie es 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

Ein SetupIntent ist ein Objekt, das Ihre Absicht darstellt, eine künftige Kundenzahlung einzuziehen, und den Autorisierungsvorgang dokumentiert. Um einen SetupIntent zu erstellen, der eine PayTo-Zahlungsmethode akzeptiert, geben Sie die Bedingungen der Vereinbarung und payto in der Liste der payment_method_types an. Wenn Sie eine Liste mit Zahlungsmethodentypen pflegen, die Sie beim Erstellen eines SetupIntent übergeben, fügen Sie dieser Liste payto hinzu.

Geben Sie die Bedingungen der Vereinbarung an, denen Ihre Kundinnen und Kunden unter Verwendung der Zahlungsmethodenoptionen zustimmen sollen.

Stripe unterstützt verschiedene Arten von Vereinbarungen, wobei Betrag, Dauer, Frequenz und der Zweck der Vereinbarung gesteuert werden können. Gestalten Sie Ihre Vertragsbedingungen so, dass sie am besten zu Ihren Anforderungen passen. Kundinnen und Kunden sehen diese Bedingungen zum Zeitpunkt der Autorisierung, unmissverständliche Formulierungen können daher Ihre Konversionsrate verbessern.

Der Parameter purpose ist standardmäßig auf retail. festgelegt. Überschreiben Sie dieses Feld mit einem der gültigen Werte, wenn retail den Zweck der Vereinbarung nicht genau wiedergibt.

Client-Geheimnis abrufen

Im SetupIntent 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 und die Autorisierungsanfrage übermitteln
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'
, {
  betas: 'payto_pm_beta_1',
});

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

Verwenden Sie stripe.confirmSetup, um die Einrichtung mit den Angaben aus dem Payment Element abzuschließen. Dadurch wird eine Autorisierungsanfrage an die Käufer/innen gesendet.

Notiz

Die Ausführung von stripe.confirmSetup kann einige Sekunden dauern, während Sie auf die Autorisierung der Zahlung auf Kundenseite warten. Während dieser Zeit sollten Sie Ihr Formular deaktivieren, damit keine erneute Absendung erfolgen kann. Lassen Sie stattdessen ein Wartesymbol einblenden, wie beispielsweise eine Sanduhr. Tritt ein Fehler auf, lassen Sie eine Fehlermeldung für die Kundin/den Kunden anzeigen, aktivieren Sie das Formular erneut und blenden Sie das Wartesymbol aus.

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

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

  const {error, setupIntent} = await stripe.confirmSetup({
    //`Elements` instance that was used to create the Payment Element
    elements,
    redirect: 'if_required',
    confirmParams: {
      mandate_data: {
      customer_acceptance: {
          type: 'online',
          online: {
            infer_from_client: true,
          },
        },
      }
    }
  });

  const message = document.querySelector('#message')
  if (error) {
    // This point will only be reached if there is an immediate error when
    // confirming the SetupIntent. Show error to your customer (for example, payment
    // details incomplete)
    message.innerText = error.message;
  } else {
    // This will execute if the confirm request is successful, or if the
    // setup fails asynchronously.
    switch (setupIntent.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 details again
        break;

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

PayTo PaymentMethod später belasten

Wenn Sie das Konto Ihrer Kundin/Ihres Kunden belasten müssen, erstellen Sie einen neuen PaymentIntent. Suchen Sie nach der Mandats-ID, der Kunden-ID und der ID der Zahlungsmethode, indem Sie den vorherigen SetupIntent abrufen.

Sehen Sie sich die erforderlichen IDs in der Antwort unten an.

{
  // ...
  "customer": "cus_PW6rQWRGAaBD7z",  // <---- Here is the customer
  "mandate": "mandate_1Ok6ZrA8DuEjWaGw2nrO9xeS", // <---- Here is the mandate
  "metadata": {},
  "next_action": null,
  "on_behalf_of": null,
  "payment_method": "pm_1Ok4l9A8DuEjWaGwhB4SGrWh", // <---- Here is the payment method
  "payment_method_configuration_details": null,
  "payment_method_options": {
    "payto": {
      "mandate_options": {
        "amount": 150000,
        "amount_type": "maximum",
        "start_date": "2026-12-25",
        "end_date": "2036-12-25",
        "payment_schedule": "annual",
        "payments_per_period": 13,
        "purpose": "mortgage",
      }
    }
  },
  "payment_method_types": [
    "payto"
  ],
  "single_use_mandate": null,
  "status": "succeeded",
  "usage": "off_session"
  // ...
}

Erstellen Sie einen PaymentIntent mit der PaymentMethod, dem Mandat und den Kunden-IDs.

Integration testen

Testen Sie Ihre PayTo-Integration mit Ihren Test-API-Schlüsseln, indem Sie die verschiedenen Test-PayIDs und Bankkontodaten unten verwenden. Jeder Datensatz hat ein anderes Szenario zufolge, mit dem Ihre Integration im Live-Modus häufig konfrontiert wird.

PayID	Beschreibung

`{any_prefix}+succeed@{any_domain}`	Der Status des PaymentIntent wechselt nach 60 Sekunden von `requires_action` zu `processing` und dann nach weiteren 2 Sekunden zu `succeeded`. Das Mandat geht in den Status `active` über.
`{any_prefix}+decline@{any_domain}`	Der Status des PaymentIntent wechselt nach 60 Sekunden von `requires_action` zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` und den Ablehnungscode `invalid_authorization` zurück. Das Mandat geht in den Status `inactive` über.
`{any_prefix}+expire@{any_domain}`	Der Status des PaymentIntent wechselt nach 5 Minuten von `requires_action` zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` und den Ablehnungscode `generic_decline` zurück. Das Mandat geht in den Status `inactive` über.
`{any_prefix}+insufficient_funds@{any_domain}`	Der Status des PaymentIntent wechselt nach 60 Sekunden von `requires_action` zu `processing` und dann nach weiteren 2 Sekunden zu `requires_payment_method`. Stripe gibt den Fehlercode `payment_method_provider_decline` und den Ablehnungscode `insufficient_funds` zurück. Das Mandat geht in den Status `inactive` über.
`{any_prefix}+revoke@{any_domain}`	Der Status des PaymentIntent wechselt nach 60 Sekunden von `requires_action` zu `processing` und dann nach weiteren 2 Sekunden zu `succeeded`. Das Mandat beginnt im Status `active` und wechselt nach 5 Minuten zu `inactive`.

Künftige PayTo-Zahlungen einrichtenNur auf Einladung

So richten Sie zukünftige PayTo-Zahlungen ein.

Vorsicht

Vorsicht

Stripe einrichtenServerseitig

Kundin/Kunden erstellenServerseitig

SetupIntent erstellenServerseitig

Client-Geheimnis abrufen

Angaben zur Zahlungsmethode erfassen und die Autorisierungsanfrage übermittelnClientseitig

Stripe.js einrichten

Payment Element Ihrer Bezahlseite hinzufügen

Notiz

PayTo PaymentMethod später belasten

Integration testen

OptionalEreignisse nach der Zahlung verarbeiten

Stripe einrichten
Serverseitig

Kundin/Kunden erstellen
Serverseitig

SetupIntent erstellen
Serverseitig

Angaben zur Zahlungsmethode erfassen und die Autorisierungsanfrage übermitteln
Clientseitig