Direct Charges erstellen

Erstellen Sie Zahlungen direkt auf dem verbundenen Konto und erheben Sie Gebühren.

Erstellen Sie Direct Charges, wenn Kunden/Kundinnen direkt mit einem verbundenen Konto interagieren, während Ihre Plattform dabei im Hintergrund bleibt. Bei Direct Charges:

Die Zahlung wird auf dem verbundenen Konto als Abbuchung ausgewiesen, nicht auf dem Konto Ihrer Plattform.
Das Guthaben des verbundenen Kontos erhöht sich mit jeder Zahlung.
Ihr Kontoguthaben erhöht sich mit jeder Zahlung um die Plattformgebühren.

Dieser Zahlungstyp eignet sich am besten für Plattformen, die Software as a Service anbieten. Shopify bietet beispielsweise Tools zum Erstellen von Online-Shops und Thinkific ermöglicht es Lehrkräften, Online-Kurse zu geben.

Notiz

Wir empfehlen, Direct Charges für verbundene Konten zu verwenden, die Zugriff auf das vollständige Stripe haben.

Web

iOS

Android

React Native

Erstellen Sie eine nutzerdefinierte Zahlungsintegration, indem Sie Komponenten der Nutzeroberfläche auf Ihrer Website mit Stripe Elements einbetten. Der clientseitige und der serverseitige Code erstellen ein Checkout-Formular, das verschiedene Zahlungsmethoden akzptiert. Sehen Sie sich diese Integration im Vergleich zu anderen Integrationstypen von Stripe an.

Um zu erfahren, wie Link für einen wiederkehrenden Nutzer funktioniert, geben Sie die E-Mail-Adresse demo@stripe.com ein. Um zu erfahren, wie Link bei einer Neuanmeldung funktioniert, geben Sie eine beliebige andere E-Mail-Adresse ein und füllen Sie das Formular aus. Diese Demo zeigt Google Pay oder Apple Pay nur dann an, wenn Sie über eine aktive Karte mit einer der beiden Wallets verfügen.

Integrationsaufwand

Ein wenig Code

Integrationstyp

Komponenten der Nutzeroberfläche in einem nutzerdefinierten Zahlungsablauf kombinieren

Anpassung der Nutzeroberfläche

Anpassung auf CSS-Ebene mit der Appearance API

Registrieren Sie sich zunächst für ein Stripe-Konto.

Verwenden Sie unsere offiziellen Bibliotheken, um von Ihrer Anwendung aus auf die Stripe API zuzugreifen:

PaymentIntent erstellen
Serverseitig

Stripe verwendet ein PaymentIntent-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert.

Die Zahlungsmethoden, die Kundinnen/Kunden während des Bezahlvorgangs angezeigt werden, sind ebenfalls im PaymentIntent enthalten. Sie können Zahlungsmethoden durch Stripe automatisch aus Ihren Dashboard-Einstellungen abrufen lassen oder sie manuell auflisten.

Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden erfordert, listen Sie Zahlungsmethoden nicht manuell auf. Stripe wertet die Währung, die Einschränkungen für Zahlungsmethoden und andere Parameter aus, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Stripe priorisiert Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort des Kunden/der Kundin am relevantesten sind. Stripe verbirgt Zahlungsmethoden mit niedrigerer Priorität in einem Überlaufmenü.

Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag und einer Währung. In der neuesten Version der API ist die Angabe des Parameters automatic_payment_methods optional, da Stripe die Funktionalität standardmäßig aktiviert. Sie können Zahlungsmethoden über das Dashboard verwalten. Stripe handhabt die Rückgabe der in Frage kommenden Zahlungsmethoden anhand von Faktoren wie Transaktionsbetrag, Währung und Zahlungsablauf.

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
})();

Zahlungsdaten 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 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. Wenn Sie sich für die Verwendung eines Iframes entscheiden und Apple Pay oder Google Pay akzeptieren möchten, muss das Zulassungs-Attribut des iFrames gleich "payment *" festgelegt sein.

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 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/basil/stripe.js"></script>
</head>

Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripemit dem folgenden JavaScript:

checkout.js
// Initialize Stripe.js with the same connected account ID used when creating
// the PaymentIntent.
const stripe = Stripe('pk_test_TYooMQauvdEDq54NiTphI7jx'
, {
  stripeAccount: '{{CONNECTED_ACCOUNT_ID}}'

});

Stripe Elements und das Payment Element zu Ihrer Zahlungsseite 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">Pay</button>
</form>

Wenn das Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden Sie es zusammen mit dem Client-Geheimnis aus dem vorherigen Schritt mit dem Container-DOM-Knoten. Übergeben Sie diesen Wert als Option, wenn Sie die Instanz von Elements erstellen.

Gehen Sie vorsichtig mit dem Client-Geheimnis um, da mit ihm die Zahlung abgeschlossen werden kann. Es darf nicht protokolliert, in URLs eingebettet oder Personen außer dem Kunden/der Kundin selbst zugänglich gemacht werden.

checkout.js
const options = {
  clientSecret: '{{CLIENT_SECRET}}',
  // Fully customizable with the Appearance API
  appearance: {/*...*/},
};
// Set up Stripe.js and Elements to use in checkout form using the client secret
const elements = stripe.elements(options);
// Create and mount the Payment Element
const paymentElement = elements.create("payment");
paymentElement.mount("#payment-element");

Das Payment Element stellt ein dynamisches Formular dar, mit dem Ihre Kundinnen und Kunden eine Zahlungsmethode auswählen können. Das Formular erfasst automatisch alle erforderlichen Zahlungsdetails für die vom Kunden/der Kundin ausgewählte Zahlungsmethode. Sie können die Darstellung des Payment Element an das Design Ihrer Website anpassen, wenn Sie das Objekt Elements einrichten.

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.

Wenn Sie Kartenzahlungen nach Abschluss der Zahlung nicht weiterleiten möchten, können Sie redirect auf if_required festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen.

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`.
  }
});

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

Ereignisse nach Zahlung verarbeiten
Serverseitig

Stripe sendet ein payment_intent.succeeded-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie Webhook-Tool im Dashboard oder folgen Sie der Webhook-Anleitung, um diese Ereignisse zu empfangen und führen Sie Aktionen aus, wie beispielsweise das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in der Datenbank oder das Starten eines Versand-Workflows.

Überwachen Sie diese Ereignisse, statt auf einen Callback vom Client zu warten. Auf dem Client könnten die Kund/innen das Browserfenster schließen oder die App beenden, bevor der Callback erfolgt ist. Bösartige Clients könnten dann die Antwort manipulieren. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie verschiedene Arten von Zahlungsmethoden mit einer einzelnen Integration akzeptieren.

Neben der Abwicklung des payment_intent.succeeded-Ereignisses empfehlen wir die Abwicklung von diesen weiteren Ereignissen, wenn Sie Zahlungen mit dem Payment Element erfassen:

Ereignis	Beschreibung	Aktion
payment_intent.succeeded	Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben.	Senden Sie den Kund/innen eine Auftragsbestätigung und wickeln Sie die Bestellung ab.
payment_intent.processing	Wird gesendet, wenn eine/e Kund/in eine Zahlung erfolgreich veranlasst hat, die Zahlung aber noch nicht abgeschlossen ist. Dieses Ereignis wird am häufigsten gesendet, wenn der Kunde/die Kundin eine Bankabbuchung veranlasst. In Zukunft folgt darauf entweder ein `payment_intent.succeeded`- oder ein `payment_intent.payment_failed`-Ereignis.	Senden Sie eine Bestellbestätigung an die Kund/innen, in der angegeben ist, dass die Zahlung noch aussteht. Bei digitalen Waren können Sie die Bestellung abwickeln, bevor Sie darauf warten, dass die Zahlung erfolgt.
payment_intent.payment_failed	Wird gesendet, wenn ein Kunde/eine Kundin einen Zahlungsversuch durchführt, die Zahlung jedoch fehlschlägt.	Wenn eine Zahlung von `processing` zu `payment_failed` übergeht, bieten Sie der Kundin/dem Kunden einen weiteren Zahlungsversuch an.

Integration testen

Kartennummer	Szenario	So führen Sie den Test durch
	Die Kartenzahlung ist erfolgreich und es ist keine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Für die Kartenzahlung ist eine Authentifizierung erforderlich.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Die Karte wird mit einem Ablehnungscode wie `insufficient_funds` abgelehnt.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.
	Die UnionPay-Karte hat eine variable Länge von 13 bis 19 Ziffern.	Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an.

Hier finden Sie weitere Informationen zum Testen Ihrer Integration.

OptionalWeitere Zahlungsmethoden aktivieren

Gebühren einziehen

Wenn eine Zahlung verarbeitet wird, kann Ihre Plattform einen Teil der Transaktion in Form von Plattformgebühren übernehmen. Sie können die Preise für die Plattformgebühr auf zwei Arten festlegen:

Mit dem Plattform-Preistool können Sie Preisregeln festlegen und testen. Diese No-Code-Funktion im Stripe-Dashboard ist derzeit nur für Plattformen verfügbar, die für die Zahlung von Stripe-Gebühren verantwortlich sind.
Legen Sie Ihre Preisregeln intern fest und geben Sie die Plattformgebühren direkt in einem PaymentIntent an. Die mit dieser Methode festgelegten Gebühren überschreiben die im Plattform-Preistool angegebene Preislogik.

Ihre Plattform kann eine Plattformgebühr unter Berücksichtigung der folgenden Einschränkungen erheben:

Der Wert von application_fee_amount muss positiv und kleiner als der Betrag der Zahlung sein. Die erhobene Plattformgebühr wird auf den erfassten Zahlungsbetrag begrenzt.
Es fallen keine zusätzlichen Stripe-Gebühren für die Plattformgebühr selbst an.
In Übereinstimmung mit gesetzlich vorgeschriebenen und Compliance-Anforderungen in Brasilien können Plattformen mit Sitz außerhalb Brasiliens und mit brasilianischen verbundenen Konten keine Plattformgebühren über Stripe einziehen.
Die Währung des application_fee_amount hängt von einigen Faktoren für mehrere Währungen ab.

Die Saldo-Transaktion der sich ergebenden Zahlung beinhaltet eine detaillierte Gebührenaufschlüsselung sowohl der Stripe-Gebühren als auch der Plattformgebühren. Um eine bessere Berichterstellung zu ermöglichen, wird ein Plattformgebühr-Objekt erstellt, sobald die Gebühr eingezogen wurde. Verwenden Sie die Eigenschaft amount des Plattformgebühren-Objekts für die Berichterstellung. Anschließend können Sie mit dem Endpoint für Plattformgebühren auf diese Objekte zugreifen.

Erhaltene Plattformgebühren werden Ihrem verfügbaren Kontosaldo nach demselben Zeitplan hinzugefügt wie Gelder aus regulären Stripe-Zahlungen. Plattformgebühren können im Abschnitt Erhobene Gebühren des Dashboards angezeigt werden.

Vorsicht

Plattformgebühren für Direct Charges werden standardmäßig asynchron erstellt. Wenn Sie das application_fee-Objekt in einer Zahlungserstellungsanfrage erweitern, wird die Plattformgebühr synchron als Teil dieser Anfrage erstellt. Erweitern Sie das application_fee-Objekt nur bei Bedarf, da dies die Latenz der Anfrage erhöht.

Um auf die Plattformgebührenobjekte für Plattformgebühren, die asynchron erstellt werden, zuzugreifen, überwachen Sie das Webhook-Ereignis application_fee.created.

Geldbewegungen mit Gebühren

Wenn Sie eine Plattformgebühr für eine Zahlung angeben, wird der Gebührenbetrag auf das Stripe-Konto Ihrer Plattform übertragen. Wird eine Zahlung direkt über das verbundene Konto abgewickelt, wird der Zahlungsbetrag – abzüglich der Stripe-Gebühren und der Plattformgebühr – in das verbundene Konto eingezahlt.

Wenn Sie beispielsweise eine Zahlung in Höhe von 10 USD mit einer Plattformgebühr von 1,23 USD vornehmen (wie im vorherigen Beispiel), werden 1,23 USD auf Ihr Plattformkonto überwiesen. 8,18 USD (10 USD – 0,59 USD – 1,23 USD) werden im verbundenen Konto verrechnet (wobei standardmäßig US-Stripe-Gebühren angenommen werden).

Geldbewegungen bei einer Zahlung mit Plattformgebühr

Wenn Sie Zahlungen in mehreren Währungen abwickeln, lesen Sie die Informationen zur Handhabung von Währungen in Connect.

Rückerstattungen ausstellen

Ebenso wie Plattformen Zahlungen für verbundene Konten erstellen können, können sie auch Rückerstattungen von Zahlungen für verbundene Konten erstellen. Erstellen Sie eine Rückerstattung mit dem Geheimschlüssel Ihrer Plattform, während Sie als das verbundene Konto authentifiziert sind.

Plattformgebühren werden bei Ausstellung einer Rückerstattung nicht automatisch zurückerstattet. Ihre Plattform muss die Plattformgebühr explizit zurückerstatten. Andernfalls büßt das verbundene Konto, d. h. das Konto, auf dem die Zahlung erstellt wurde, diesen Betrag ein. Sie können eine Plattformgebühr zurückerstatten, indem Sie in der Erstattungsanfrage für den Wert refund_application_fee true angeben:

Standardmäßig wird die gesamte Zahlung zurückerstattet. Sie können jedoch auch eine Teilerstattung erstellen, indem Sie den Wert amount als positive ganze Zahl festlegen. Wenn die Erstattung zu einer Rückerstattung der gesamten Zahlung führt, wird die gesamte Plattformgebühr zurückerstattet. Andernfalls wird ein anteiliger Betrag der Plattformgebühr zurückerstattet. Alternativ können Sie den Wert refund_application_fee als false angeben und die Plattformgebühr getrennt erstatten.

Direct Charges erstellen

Erstellen Sie Zahlungen direkt auf dem verbundenen Konto und erheben Sie Gebühren.

Notiz

Integrationsaufwand

Integrationstyp

Anpassung der Nutzeroberfläche

PaymentIntent erstellenServerseitig

Client-Geheimnis abrufen

Zahlungsdaten erfassenClientseitig

Stripe.js einrichten

Stripe Elements und das Payment Element zu Ihrer Zahlungsseite hinzufügen

Zahlung an Stripe sendenClientseitig

Vorsicht

Ereignisse nach Zahlung verarbeitenServerseitig

Integration testen

OptionalWeitere Zahlungsmethoden aktivieren

Gebühren einziehen

Vorsicht

Geldbewegungen mit Gebühren

Rückerstattungen ausstellen

Siehe auch

PaymentIntent erstellen
Serverseitig

Zahlungsdaten erfassen
Clientseitig

Zahlung an Stripe senden
Clientseitig

Ereignisse nach Zahlung verarbeiten
Serverseitig