# Einen Marktplatz aufbauen Erstellen Sie verbundene Konten mit Accounts v1, ziehen Sie Zahlungen von Kundinnen und Kunden ein und zahlen Sie anschließend an Verkäufer/innen oder Dienstleister/innen auf Ihrem Marktplatz aus. > #### Integrationen der Accounts v2 API > > Dieser Leitfaden gilt nur für bestehende Connect-Plattformen, die die Accounts v1 API verwenden. Wenn Sie neue/r Nutzer/in von Connect sind oder die Accounts v2 API verwenden, lesen Sie den [Leitfaden zum v2-Marktplatz](https://docs.stripe.com/connect/marketplace.md). # Web > This is a Web for when platform is web. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=web. In diesem Leitfaden wird beschrieben, wie Sie Zahlungen annehmen und Gelder auf die Bankkonten Ihrer Verkäufer oder Dienstleister überweisen. Zur Veranschaulichung entwickeln wir einen Marktplatz für Wohnungsvermittlung, auf dem Wohnungseigentümer/innen und potenzielle Mieter/innen zusammenfinden. Wir zeigen Ihnen auch, wie Sie Zahlungen von Mieterinnen/Mietern (Kundinnen/Kunden) annehmen und Wohnungseigentümer/innen (die Nutzer/innen Ihrer Plattform) ausbezahlen können. ## Voraussetzungen 1. [Registrieren Sie Ihre Plattform](https://dashboard.stripe.com/connect). 1. [Verify and add business details in Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Vervollständigen Sie Ihr Plattform-Profil](https://dashboard.stripe.com/connect/settings/profile). 1. [Passen Sie Ihre Markeneinstellungen an](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Fügen Sie einen Firmennamen, ein Symbol und eine Markenfarbe hinzu. ## Stripe einrichten [Serverseitig] Installieren Sie die offiziellen Bibliotheken von Stripe für den Zugriff auf die Stripe-API über Ihre Anwendung: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ## Verbundenes Konto erstellen #### Accounts v2 Wenn sich Verkäufer/innen oder Dienstleister/innen auf Ihrer Plattform registrieren, erstellen Sie ein [verbundenes Konto](https://docs.stripe.com/api/v2/core/accounts.md) für sie. Mit dem verbundenen Konto können Sie ihre Identifikationsdaten erfassen, für sie Zahlungen akzeptieren und Gelder auf ihr Bankkonto überweisen. In unserem Beispiel für die Wohnungsvermietung gehört das verbundene Konto dem/der Wohnungseigentümer/in. #### Accounts v1 Wenn sich Verkäufer/innen oder Dienstleister/innen auf Ihrer Plattform registrieren, erstellen Sie ein [verbundenes Konto](https://docs.stripe.com/api/accounts.md) für sie. Mit dem verbundenen Konto können Sie ihre Identifikationsdaten erfassen, für sie Zahlungen akzeptieren und Gelder auf ihr Bankkonto überweisen. In unserem Beispiel für die Wohnungsvermietung gehört das verbundene Konto dem/der Wohnungseigentümer/in. ### Erstellen Sie ein verbundenes Konto mit vorausgefüllten Informationen #### Accounts v2 Nutzen Sie die API `/v2/core/accounts`, um ein verbundenes Konto zu [erstellen](https://docs.stripe.com/api/v2/core/accounts/create.md), indem Sie [das Dashboard und die Zuständigkeiten des verbundenen Kontos](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md) angeben. ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Falls Sie bereits Informationen für Ihre verbundenen Konten erfasst haben, können Sie diese im `Account`-Objekt vorab angeben. Sie können alle Kontoinformationen vorab ausfüllen, einschließlich persönlicher und geschäftlicher Informationen, externer Kontoinformationen usw. Nachdem Sie das `Account` erstellt haben, erstellen Sie eine [Person](https://docs.stripe.com/api/v2/core/persons/create.md), die die für die Kontoeröffnung verantwortliche Person repräsentiert, wobei Sie `relationship.representative` auf „true“ setzen und alle Kontoinformationen, die Sie vorab ausfüllen möchten (z. B. Vor- und Nachname), eingeben. ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` Connect Onboarding fragt keine vorab ausgefüllten Informationen ab. Kontoinhaber/innen müssen vorausgefüllte Informationen jedoch bestätigen, bevor sie den [Connect-Rahmenvertrag](https://docs.stripe.com/connect/service-agreement-types.md) akzeptieren können. Füllen Sie beim Testen Ihrer Integration die Kontoinformationen vorab mit [Testdaten](https://docs.stripe.com/connect/testing.md) aus. ### Konto-Link erstellen Sie können einen Konto-Link erstellen, indem Sie die API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) mit den folgenden Parametern aufrufen: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` und `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Nutzer/innen an die Konto-Link-URL weiterleiten Die Antwort zum Erstellen eines Konto-Links enthält einen Wert`url`. Nachdem Sie die Nutzerin oder den Nutzer Ihrer Anwendung authentifiziert haben, leiten Sie sie/ihn zu dieser URL weiter, um sie/ihn an das Verfahren zu übergeben. Konto-Link-URLs sind temporär und können nur einmal verwendet werden, da sie Zugang zu den persönlichen Daten der Inhaber/innen der verbundenen Konten gewähren. Wenn Sie Informationen vorab angeben möchten, müssen Sie dies vor der Erstellung des Konto-Links tun. Nach der Erstellung des Konto-Links können Informationen für das verbundene Konto weder angezeigt noch geändert werden. > Versenden Sie keine Konto-Link-URLs per E-Mail, Textnachricht oder anderweitig außerhalb Ihrer Plattformanwendung. Stellen Sie die URLs Ihren authentifizierten Kontoinhaberinnen und Kontoinhabern stattdessen in Ihrer Anwendung zur Verfügung. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml ``` Führen Sie auf Ihrem Server den folgenden Aufruf der Stripe API durch. Leiten Sie Ihre Kundinnen/Kunden nach dem Erstellen einer Checkout-Sitzung zu der in der Antwort zurückgegebenen [URL](https://docs.stripe.com/api/checkout/sessions/object.md#checkout_session_object-url) weiter. ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items` - Dieses Argument steht für Artikel, die Kundinnen/Kunden kaufen. Die Artikel werden in der von Stripe gehosteten Nutzeroberfläche angezeigt. - `success_url` - Dieses Argument leitet Nutzer/innen weiter, nachdem sie eine Zahlung abgeschlossen haben. - `payment_intent_data[application_fee_amount]` - Dieses Argument bestimmt den Betrag, den Ihre Plattform von der Transaktion abziehen will. Der vollständige Zahlungsbetrag wird sofort von der Plattform auf das mit `transfer_data[destination]` angegebene Konto übertragen, nachdem die Zahlung erfasst wurde. Anschließend wird der `application_fee_amount` zurück auf die Plattform übertragen und die Stripe-Gebühr wird vom Guthaben der Plattform abgezogen. - `payment_intent_data[transfer_data][destination]`: Dieses Argument gibt an, dass es sich um eine [Destination Charge](https://docs.stripe.com/connect/destination-charges.md) handelt. Bei einer Destination Charge wird die Zahlung über die Plattform abgewickelt und alle Gelder werden sofort und automatisch in das ausstehende Guthaben des verbundenen Kontos übertragen. In unserem Beispiel für Wohnungsvermittlung sollen Kundinnen/Kunden über die Plattform bezahlen. Anschließend erhalten die Wohnungseigentümer entsprechende Auszahlungen von der Plattform. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout verwendet die Markeneinstellungen Ihres Plattformkontos für Destination Charges. Weitere Informationen finden Sie unter [Branding anpassen](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Diese Sitzung erstellt eine Destination Charge. Wenn Sie Übertragungen terminieren oder Geldmittel aus einer Zahlung an mehrere Parteien senden möchten, nutzen Sie stattdessen [separate Zahlungen und Überweisungen](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Mit Ereignissen nach der Zahlung umgehen (Serverseitig) Stripe übermittelt ein [checkout.session.completed-Ereignis](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed), wenn die Zahlung abgeschlossen ist. [Verwenden Sie einen Webhook, um diese Ereignisse zu empfangen](https://docs.stripe.com/webhooks/quickstart.md) und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, anstatt 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. Einige Zahlungsmethoden benötigen auch 2 bis 14 Tage bis zur Zahlungsbestätigung. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie mehrere [Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des Ereignisses `checkout.session.completed` empfehlen wir die Abwicklung von zwei weiteren Ereignissen, wenn Sie Zahlungen mit Checkout erfassen: | Ereignis | Beschreibung | Nächste Schritte | | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Der/die Kund/in hat die Zahlung nach der Übermittlung des Checkout-Formulars erfolgreich autorisiert. | Warten Sie, bis die Zahlung erfolgt ist oder fehlschlägt. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Die Kundenzahlung war erfolgreich. | Führen Sie die Bestellung der gekauften Waren oder Dienstleistungen aus. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Die Zahlung wurde abgelehnt oder ist aus einem anderen Grund fehlgeschlagen. | Kontaktieren Sie den/die Kund/in per E-Mail und fordern Sie eine neue Bestellung von ihm/ihr an. | Diese Ereignisse beinhalten das [Checkout-Sitzungsobjekt](https://docs.stripe.com/api/checkout/sessions.md). Nach erfolgreicher Zahlung ändert sich der Status des zugrunde liegenden *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) von `processing` zu `succeeded`. #### Eingebettetes Formular ### Eine Checkout-Sitzung erstellen (Server-side) Über eine Checkout-Sitzung wird gesteuert, was die Kundinnen/Kunden auf dem integrierten Zahlungsformular sehen, z. B. Positionen, Bestellbetrag und Währung sowie die akzeptierten Zahlungsmethoden. Führen Sie auf Ihrem Server den folgenden Aufruf an die API von Stripe durch: ```curl curl https://api.stripe.com/v1/checkout/sessions \ -u "<>:" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ -d "payment_intent_data[transfer_data][destination]={{CONNECTEDACCOUNT_ID}}" \ -d ui_mode=embedded_page \ --data-urlencode "return_url=https://example.com/checkout/return?session_id={CHECKOUT_SESSION_ID}" ``` - `line_items` - Die Artikel, die die Kundin/der Kunde kauft. Wird in der von Stripe gehosteten Nutzeroberfläche angezeigt. - `return_url` - Dieses Argument leitet Nutzer/innen weiter, nachdem sie einen Zahlungsversuch abgeschlossen haben. - `payment_intent_data[application_fee_amount]` - Dieses Argument bestimmt den Betrag, den Ihre Plattform von der Transaktion abziehen will. Der vollständige Zahlungsbetrag wird sofort von der Plattform auf das mit `transfer_data[destination]` angegebene Konto übertragen, nachdem die Zahlung erfasst wurde. Anschließend wird der `application_fee_amount` zurück auf die Plattform übertragen und die Stripe-Gebühr wird vom Guthaben der Plattform abgezogen. - `payment_intent_data[transfer_data][destination]` – gibt an, dass es sich um eine [Destination Charge](https://docs.stripe.com/connect/destination-charges.md) handelt. Bei einer Destination Charge wird die Zahlung über die Plattform abgewickelt. Anschließend werden die Gelder sofort und automatisch in das ausstehende Guthaben des verbundenen Kontos übertragen. In unserem Beispiel für Wohnungsvermittlung erhalten die Wohnungseigentümer/innen Auszahlungen von der Plattform, wenn Kundinnen/Kunden bezahlen. ### Checkout verbinden (Clientseitig) #### HTML + JS Checkout ist als Teil von [Stripe.js](https://docs.stripe.com/js.md) verfügbar. Nehmen Sie das Stripe.js-Skript in Ihre Seite auf, indem Sie es zum Header Ihrer HTML-Datei hinzufügen. Als Nächstes erstellen Sie einen leeren DOM-Knoten (Container), der zum Verbinden verwendet wird. ```html
``` Initialisieren Sie Stripe.js mit Ihrem veröffentlichbaren API-Schlüssel. Erstellen Sie eine asynchrone `fetchClientSecret`-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an `options`, wenn Sie die Checkout-Instanz erstellen: ```javascript // Initialize Stripe.js const stripe = Stripe('<>'); initialize(); // Fetch Checkout Session and retrieve the client secret async function initialize() { const fetchClientSecret = async () => { const response = await fetch("/create-checkout-session", { method: "POST", }); const { clientSecret } = await response.json(); return clientSecret; }; // Initialize Checkout const checkout = await stripe.createEmbeddedCheckoutPage({ fetchClientSecret, }); // Mount Checkout checkout.mount('#checkout'); } ``` #### React Installieren Sie Bibliotheken von Connect.js und die React Connect.js aus der [öffentlichen Registry von npm](https://www.npmjs.com/package/@stripe/react-connect-js). ```bash npm install --save @stripe/connect-js @stripe/react-connect-js ``` Um die eingebettete Checkout-Komponente zu verwenden, erstellen Sie einen `EmbeddedCheckoutProvider`. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren API-Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den Anbieter. Erstellen Sie eine asynchrone `fetchClientSecret`-Funktion, die eine Anfrage an Ihren Server stellt, um eine Checkout-Sitzung zu erstellen und das Client-Geheimnis abzurufen. Übergeben Sie diese Funktion an die vom Anbieter akzeptierte Eigenschaft `options`. ```jsx import * as React from 'react'; import {loadStripe} from '@stripe/stripe-js'; import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('pk_test_123'); const App = ({fetchClientSecret}) => { const options = {fetchClientSecret}; return ( ) } ``` Checkout wird in einem iFrame gerendert, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, Checkout in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine gesonderte Seite zur Zahlungsbestätigung voraussetzen. ![](https://b.stripecdn.com/docs-statics-srv/assets/application_fee_amount.837aa2339469b3c1a4319672971c1367.svg) Checkout verwendet die Markeneinstellungen Ihres Plattformkontos für Destination Charges. Weitere Informationen finden Sie unter [Branding anpassen](https://docs.stripe.com/connect/destination-charges.md?platform=web&ui=stripe-hosted#branding). Diese Sitzung erstellt eine Destination Charge. Wenn Sie Übertragungen terminieren oder Geldmittel aus einer Zahlung an mehrere Parteien senden möchten, nutzen Sie stattdessen [separate Zahlungen und Überweisungen](https://docs.stripe.com/connect/separate-charges-and-transfers.md). ### Mit Ereignissen nach der Zahlung umgehen (Serverseitig) Stripe übermittelt ein [checkout.session.completed-Ereignis](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed), wenn die Zahlung abgeschlossen ist. [Verwenden Sie einen Webhook, um diese Ereignisse zu empfangen](https://docs.stripe.com/webhooks/quickstart.md) und Aktionen auszuführen (Versenden einer Bestellbestätigung per E-Mail an die Kundinnen/Kunden, Erfassen des Verkaufs in einer Datenbank oder Einleiten des Versandablaufs). Überwachen Sie diese Ereignisse, anstatt 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. Einige Zahlungsmethoden benötigen auch 2 bis 14 Tage bis zur Zahlungsbestätigung. Wenn Sie Ihre Integration so einrichten, dass sie asynchrone Ereignisse überwacht, können Sie mehrere [Zahlungsmethoden](https://stripe.com/payments/payment-methods-guide) mit einer einzelnen Integration akzeptieren. Neben der Abwicklung des Ereignisses `checkout.session.completed` empfehlen wir die Abwicklung von zwei weiteren Ereignissen, wenn Sie Zahlungen mit Checkout erfassen: | Ereignis | Beschreibung | Nächste Schritte | | -------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | [checkout.session.completed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.completed) | Der/die Kund/in hat die Zahlung nach der Übermittlung des Checkout-Formulars erfolgreich autorisiert. | Warten Sie, bis die Zahlung erfolgt ist oder fehlschlägt. | | [checkout.session.async_payment_succeeded](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_succeeded) | Die Kundenzahlung war erfolgreich. | Führen Sie die Bestellung der gekauften Waren oder Dienstleistungen aus. | | [checkout.session.async_payment_failed](https://docs.stripe.com/api/events/types.md#event_types-checkout.session.async_payment_failed) | Die Zahlung wurde abgelehnt oder ist aus einem anderen Grund fehlgeschlagen. | Kontaktieren Sie den/die Kund/in per E-Mail und fordern Sie eine neue Bestellung von ihm/ihr an. | Diese Ereignisse beinhalten das [Checkout-Sitzungsobjekt](https://docs.stripe.com/api/checkout/sessions.md). Nach erfolgreicher Zahlung ändert sich der Status des zugrunde liegenden *PaymentIntent* (The Payment Intents API tracks the lifecycle of a customer checkout flow and triggers additional authentication steps when required by regulatory mandates, custom Radar fraud rules, or redirect-based payment methods) von `processing` zu `succeeded`. #### Benutzerdefinierter Ablauf ### PaymentIntent erstellen (Serverseitig) Stripe verwendet ein [PaymentIntent](https://docs.stripe.com/api/payment_intents.md)-Objekt, um Ihre Absicht darzustellen, eine Kundenzahlung einzuziehen. Dabei werden die Abbuchungsversuche und Zahlungsstatusänderungen während des gesamten Vorgangs dokumentiert. > Wenn Sie das Payment Element vor dem Erstellen eines PaymentIntent rendern möchten, finden Sie weitere Informationen unter [Erfassen von Zahlungsdetails vor dem Erstellen eines Intent](https://docs.stripe.com/payments/accept-a-payment-deferred.md?type=payment). ![Ein Diagramm mit einer Übersicht über den gesamten Zahlungsablauf](https://b.stripecdn.com/docs-statics-srv/assets/accept-a-payment-payment-element.5cf6795a02f864923f9953611493d735.svg) 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 verlangt, empfiehlt Stripe die automatisierte Option. Grund hierfür ist, dass Stripe die Währung, Einschränkungen für Zahlungsmethoden und weitere Parameter auswertet, um die Liste der unterstützten Zahlungsmethoden zu ermitteln. Zahlungsmethoden, die die Konversion steigern und die für die Währung und den Standort der Kundin/des Kunden am relevantesten sind, erhalten Priorität. Zahlungsmethoden mit niedrigerer Priorität sind in einem Überlaufmenü verborgen. #### Zahlungsmethoden über das Dashboard verwalten Erstellen Sie einen PaymentIntent auf Ihrem Server und aktivieren den gewünschten Betrag und die Währung. In der neuesten API-Version ist die Angabe des Parameters `automatic_payment_methods` optional, da Stripe diese Funktionalität standardmäßig aktiviert. Zahlungsmethoden können Sie über das [Dashboard](https://dashboard.stripe.com/settings/payment_methods) verwalten. Stripe handhabt die Rückgabe geeigneter Zahlungsmethoden basierend auf Faktoren wie Betrag, Währung und Zahlungsablauf der Transaktion. Der PaymentIntent wird erstellt, um die von Ihnen im Dashboard konfigurierten Zahlungsmethoden zu unterstützen. Entscheiden Sie immer auf Server-Seite, die im Gegensatz zur Client-Seite vertrauenswürdig ist, wie viel berechnet werden soll. Dies verhindert, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 \ -d "transfer_data[destination]={{CONNECTEDACCOUNT_ID}}" ``` #### Zahlungsmethoden manuell auflisten Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem Betrag, einer Währung und einer Liste der Arten der Zahlungsmethoden. Entscheiden Sie immer auf der Server-Seite, einer vertrauenswürdigen Umgebung, im Gegensatz zum Client, wie viel berechnet werden soll. Dadurch wird verhindert, dass böswillige Kund/innen ihre eigenen Preise wählen können. ```curl curl https://api.stripe.com/v1/payment_intents \ -u "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "payment_method_types[]=bancontact" \ -d "payment_method_types[]=card" \ -d "payment_method_types[]=eps" \ -d "payment_method_types[]=ideal" \ -d "payment_method_types[]=p24" \ -d "payment_method_types[]=sepa_debit" \ -d "payment_method_types[]=sofort" \ -d application_fee_amount=123 ``` Wählen Sie die Währung anhand der Zahlungsmethoden aus, die Sie anbieten möchten. Einige Zahlungsmethoden unterstützen mehrere Währungen und Länder. In diesem Leitfaden werden Bancontact, Kreditkarten, EPS, iDEAL, Przelewy24, SEPA-Lastschriften und Sofort verwendet. > Jede Zahlungsmethode muss die im PaymentIntent übergebene Währung unterstützen, und Ihr Unternehmen muss in einem der Länder niedergelassen sein, das von jeder Zahlungsmethode unterstützt wird. Auf der Seite [Integrationsoptionen für Zahlungsmethoden](https://docs.stripe.com/payments/payment-methods/integration-options.md) finden Sie weitere Informationen zu den unterstützten Optionen. ### Client-Geheimnis abrufen Im PaymentIntent ist ein *Client-Geheimnis* (The client secret is a unique key returned from Stripe as part of a PaymentIntent. This key lets the client access important fields from the PaymentIntent (status, amount, currency) while hiding sensitive ones (metadata, customer)) enthalten, das auf dem Client verwendet wird, um Zahlungen sicher abzuschließen. Es gibt verschiedene Verfahren zum Übergeben des Client-Geheimnisses an den Client. #### Einseitige Anwendung 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: #### Ruby ```ruby 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: ```javascript (async () => { const response = await fetch('/secret'); const {client_secret: clientSecret} = await response.json(); // Render the form using the clientSecret })(); ``` #### Serverseitiges Rendering Übergeben Sie das Client-Geheimnis von Ihrem Server an den Client. Diese Vorgehensweise funktioniert am besten, wenn Ihre Anwendung statische Inhalte auf dem Server generiert, bevor sie an den Browser gesendet werden. Fügen Sie das [client_secret](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) in Ihr Bezahlformular ein. Rufen Sie in Ihrem serverseitigen Code das Client-Geheimnis aus dem PaymentIntent ab: #### Ruby ```erb
``` ```ruby get '/checkout' do @intent = # ... Fetch or create the PaymentIntent erb :checkout end ``` ### Zahlungsdetails erfassen (Clientseitig) Erfassen Sie Zahlungsdetails auf dem Client mit dem [Payment Element](https://docs.stripe.com/payments/payment-element.md). 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 Attribut [Zulassen](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowpaymentrequest) des Iframes auf `"payment*"` gesetzt 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](https://docs.stripe.com/security/guide.md#tls), wenn Sie bereit sind, Live-Zahlungen zu akzeptieren. #### HTML + JS ### 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. ```html Checkout ``` Erstellen Sie auf Ihrer Bezahlseite eine Instanz von Stripe mit dem folgenden JavaScript: ```javascript // 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('<>'); ``` ### 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: ```html
``` 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](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt an `options`, wenn Sie die [Elements](https://docs.stripe.com/js/elements_object/create)-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. ```javascript 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 stepconst elements = stripe.elements(options); // Create and mount the Payment Element const paymentElementOptions = { layout: 'accordion'}; const paymentElement = elements.create('payment', paymentElementOptions); paymentElement.mount('#payment-element'); ``` #### React ### Stripe.js einrichten Installieren Sie [React Stripe.js](https://www.npmjs.com/package/@stripe/react-stripe-js) und den [Stripe.js-Loader](https://www.npmjs.com/package/@stripe/stripe-js) aus dem öffentlichen npm-Register: ```bash npm install --save @stripe/react-stripe-js @stripe/stripe-js ``` ### Den Elements-Anbieter zu Ihrer Zahlungsseite hinzufügen und konfigurieren Um die Payment Element-Komponente zu verwenden, schließen Sie die Komponente Ihrer Bezahlseite in einen [Elements-Anbieter](https://docs.stripe.com/sdks/stripejs-react.md#elements-provider) ein. Rufen Sie `loadStripe` mit Ihrem veröffentlichbaren Schlüssel auf und übergeben Sie das zurückgegebene `Promise` an den `Elements`-Anbieter. Übergeben Sie auch das [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt als `options` an den `Elements`-Anbieter. ```jsx import React from 'react'; import ReactDOM from 'react-dom'; import {Elements} from '@stripe/react-stripe-js'; import {loadStripe} from '@stripe/stripe-js'; import CheckoutForm from './CheckoutForm'; // Make sure to call `loadStripe` outside of a component’s render to avoid // recreating the `Stripe` object on every render. const stripePromise = loadStripe('<>'); function App() { const options = { // passing the client secret obtained in step 3 clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with appearance API. appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Payment Element hinzufügen Verwenden Sie die Komponente `PaymentElement`, um Ihr Formular zu erstellen: ```jsx import React from 'react'; import {PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { return (
); }; export default CheckoutForm; ``` Stripe Elements ist eine Sammlung von Drop-In-Komponenten der Nutzeroberfläche. Um Ihr Formular weiter anzupassen oder andere Kundeninformationen zu erfassen, durchsuchen Sie die [Elements-Dokumentation](https://docs.stripe.com/payments/elements.md). Das Payment Element rendert ein dynamisches Formular, mit dem Kund/innen ihre gewünschte Zahlungsmethode auswählen können. Für jede Zahlungsmethode fordert das Formular die Kund/innen automatisch auf, alle erforderlichen Zahlungsdaten einzugeben. ### Erscheinungsbild anpassen Passen Sie das Payment Element an das Design Ihrer Website an, indem Sie beim Erstellen des `Elements`-Anbieters das [Erscheinungsbild-Objekt](https://docs.stripe.com/js/elements_object/create#stripe_elements-options-appearance) an `options` übergeben. ### Adressen einholen Standardmäßig erfasst das Payment Element nur die erforderlichen Angaben zur Rechnungsadresse. Einige Verhaltensweisen, wie z. B. die [Berechnung der Steuer](https://docs.stripe.com/api/tax/calculations/create.md) oder die Eingabe der Versanddaten, erfordern die vollständige Adresse Ihrer Kundin/Ihres Kunden. Sie können Folgendes tun: - Verwenden Sie das [Address Element](https://docs.stripe.com/elements/address-element.md), um die Vorteile der Funktionen der automatischen Vervollständigung und Lokalisierung zu nutzen, um die vollständige Adresse Ihrer Kundin oder Ihres Kunden zu erfassen. Dies trägt dazu bei, eine möglichst genaue Steuerberechnung zu gewährleisten. - Erfassen Sie Adressdaten mit Ihrem eigenen benutzerdefinierten Formular. ### Apple Pay-Händler-Token anfordern Wenn Sie Ihre Integration für die [Annahme von Zahlungen per Apple Pay](https://docs.stripe.com/payments/accept-a-payment.md?payment-ui=elements&api-integration=checkout) konfiguriert haben, empfehlen wir die Konfiguration der Apple Pay-Schnittstelle, um ein Händler-Token zurückzugeben und von Händlern/Händlerinnen initiierte Transaktionen zu ermöglichen. [Fordern Sie den entsprechenden Händler-Token-Typ](https://docs.stripe.com/apple-pay/merchant-tokens.md?pay-element=web-pe) im Payment Element an. ### Zahlung an Stripe senden (Clientseitig) Verwenden Sie [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment), um die Zahlung mit Details aus dem Payment Element vorzunehmen. Geben Sie für diese Funktion eine [return_url](https://docs.stripe.com/api/payment_intents/create.md#create_payment_intent-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](https://docs.stripe.com/js/payment_intents/confirm_payment#confirm_payment_intent-options-redirect) auf `if_required` festlegen. Dadurch werden nur Kundinnen/Kunden weitergeleitet, die mit weiterleitungsbasierten Zahlungsmethoden bezahlen. #### HTML + JS ```javascript 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`. } }); ``` #### React Verwenden Sie die Hooks [useStripe](https://docs.stripe.com/sdks/stripejs-react.md#usestripe-hook) und [useElements](https://docs.stripe.com/sdks/stripejs-react.md#useelements-hook), um [stripe.confirmPayment](https://docs.stripe.com/js/payment_intents/confirm_payment) über die Komponente Ihres Zahlungsformulars aufzurufen. Wenn Sie herkömmliche Klassenkomponenten gegenüber Hooks bevorzugen, können Sie stattdessen einen [ElementsConsumer](https://docs.stripe.com/sdks/stripejs-react.md#elements-consumer) verwenden. ```jsx import React, {useState} from 'react'; import {useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js'; const CheckoutForm = () => { const stripe = useStripe(); const elements = useElements(); const [errorMessage, setErrorMessage] = useState(null); const handleSubmit = async (event) => { // We don't want to let default form submission happen here, // which would refresh the page. event.preventDefault(); if (!stripe || !elements) { // Stripe.js hasn't yet loaded. // Make sure to disable form submission until Stripe.js has loaded. return; } 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) setErrorMessage(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`. } }; return (
{/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; export default CheckoutForm; ``` 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](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) des `PaymentIntent`-Objekts. | > 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](https://docs.stripe.com/payments/paymentintents/lifecycle.md), 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. #### HTML + JS ```javascript // Initialize Stripe.js using your publishable key const stripe = Stripe('<>'); // 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; } }); ``` #### React ```jsx import React, {useState, useEffect} from 'react'; import {useStripe} from '@stripe/react-stripe-js'; const PaymentStatus = () => { const stripe = useStripe(); const [message, setMessage] = useState(null); useEffect(() => { if (!stripe) { return; } // 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}) => { // 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': setMessage('Success! Payment received.'); break; case 'processing': setMessage("Payment processing. We'll update you when payment is received."); break; case 'requires_payment_method': // Redirect your user back to your payment page to attempt collecting // payment again setMessage('Payment failed. Please try another payment method.'); break; default: setMessage('Something went wrong.'); break; } }); }, [stripe]); return message; }; export default PaymentStatus; ``` ### Mit Ereignissen nach der Zahlung umgehen (Serverseitig) Stripe sendet ein [payment_intent.succeeded](https://docs.stripe.com/api/events/types.md#event_types-payment_intent.succeeded)-Ereignis, wenn die Zahlung abgeschlossen ist. Verwenden Sie [Webhook-Tool im Dashboard](https://dashboard.stripe.com/webhooks) oder folgen Sie der [Webhook-Anleitung](https://docs.stripe.com/webhooks/quickstart.md), 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](https://stripe.com/payments/payment-methods-guide) 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](https://docs.stripe.com/api/events/types.md?lang=php#event_types-payment_intent.succeeded) | Wird gesendet, wenn Kundinnen und Kunden eine Zahlung erfolgreich abgeschlossen haben. | Senden Sie den Kund/innen eine Auftragsbestätigung und *wickeln* (Fulfillment is the process of providing the goods or services purchased by a customer, typically after payment is collected) Sie die Bestellung ab. | | [payment_intent.processing](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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](https://docs.stripe.com/api/events/types.md?lang=php#event_types-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. | ## Testen Testen Sie Ihren Ablauf zur Kontoerstellung, indem Sie [Konten erstellen](https://docs.stripe.com/connect/testing.md#creating-accounts) und [OAuth verwenden](https://docs.stripe.com/connect/testing.md#using-oauth). #### Karten | Kartennummer | Szenario | So führen Sie den Test durch | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | 4242424242424242 | 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. | | 4000002500003155 | Für die Kartenzahlung ist eine *Authentifizierung* (Strong Customer Authentication (SCA) is a regulatory requirement in effect as of September 14, 2019, that impacts many European online payments. It requires customers to use two-factor authentication like 3D Secure to verify their purchase) erforderlich. | Füllen Sie das Kreditkartenformular aus und geben Sie die Kreditkartennummer mit beliebiger Gültigkeitsdauer, CVC und Postleitzahl an. | | 4000000000009995 | 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. | | 6205500000000000004 | 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. | #### Digitale Geldbörsen (Wallets) | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Alipay | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [sofortiger Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | #### Bankumleitungen | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | BECS-Lastschriftverfahren | Ihr/e Kund/in zahlt erfolgreich mit dem BECS-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `900123456` und BSB `000000` aus. Der bestätigte PaymentIntent geht zunächst in den Status `processing` über und dann 3 Minuten später in den Status `succeeded`. | | BECS-Lastschriftverfahren | Die Zahlung Ihres/Ihrer Kund/in schlägt fehl mit Code `account_closed` fehl. | Füllen Sie das Formular mit der Kontonummer `111111113` und BSB `000000` aus. | | Bancontact, EPS, iDEAL und Przelewy24 | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit sofortiger Benachrichtigung nicht authentifizieren. | Wählen Sie eine beliebige, auf Weiterleitung basierende Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | Pay by Bank | Ihr Kunde/Ihre Kundin zahlt erfolgreich mit einer auf Weiterleitung basierenden Zahlungsmethode mit [verzögerter Benachrichtigung](https://docs.stripe.com/payments/payment-methods.md#payment-notification). | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung abschließen**. | | Pay by Bank | Ihr/e Kund/in konnte sich auf der iDEAL-Weiterleitungsseite für eine auf Weiterleitung basierende Zahlungsmethode mit verzögerter Benachrichtigung nicht authentifizieren. | Wählen Sie die Zahlungsmethode aus, füllen Sie die erforderlichen Informationen aus und bestätigen Sie die Zahlung. Klicken Sie dann auf der Weiterleitungsseite auf **Testzahlung fehlgeschlagen**. | | BLIK | BLIK-Zahlungen können aus verschiedenen Gründen fehlschlagen. Es gibt sofortige Fehler (der Code ist abgelaufen oder ungültig), verzögerte Fehler (die Bank lehnt ab) oder Zeitüberschreitungen (der/die Kund/in hat nicht rechtzeitig reagiert). | Verwenden Sie E-Mail-Muster, um [die verschiedenen Fehler zu simulieren](https://docs.stripe.com/payments/blik/accept-a-payment.md#simulate-failures) | #### Banklastschriften | Zahlungsmethode | Szenario | So führen Sie den Test durch | | ---------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | SEPA-Lastschrift | Ihr/e Kund/in zahlt erfolgreich mit dem SEPA-Lastschriftverfahren. | Füllen Sie das Formular mit der Kontonummer `AT321904300235473204` aus. Die bestätigte PaymentIntent geht zunächst in den Status „wird verarbeitet“ und dann drei Minuten später in den Status „erfolgreich“ über. | | SEPA-Lastschrift | Der Status der PaymentIntent Ihres/Ihrer Kund/in wechselt von `processing` zu `requires_payment_method`. | Füllen Sie das Formular mit der Kontonummer `AT861904300235473202` aus. | #### Gutscheine | Zahlungsmethode | Szenario | So führen Sie den Test durch | | --------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | | Boleto, OXXO | Ihr/e Kund/in bezahlt mit einem Boleto- oder OXXO-Gutschein. | Wählen Sie als Zahlungsmethode Boleto oder OXXO aus und übermitteln Sie die Zahlung. Schließen Sie das OXXO-Dialogfeld, nachdem es angezeigt wurde. | Hier finden Sie weitere Informationen zum [Testen](https://docs.stripe.com/testing.md) Ihrer Integration. # Zahlungsformular > This is a Zahlungsformular for when platform is ios and mobile-ui is payment-element. View the full page at https://docs.stripe.com/connect/end-to-end-marketplace?platform=ios&mobile-ui=payment-element. ![](https://b.stripecdn.com/docs-statics-srv/assets/ios-overview.9e0d68d009dc005f73a6f5df69e00458.png) Integrieren Sie die vorgefertigte Zahlungs-UI von Stripe in den Bezahlvorgang Ihrer iOS app mit der [PaymentSheet](https://stripe.dev/stripe-ios/stripe-paymentsheet/Classes/PaymentSheet.html)-Klasse. Sehen Sie sich unsere Beispielintegration [auf GitHub](https://github.com/stripe/stripe-ios/tree/master/Example/PaymentSheet%20Example) an. In diesem Leitfaden wird beschrieben, wie Sie Zahlungen annehmen und Gelder auf die Bankkonten Ihrer Verkäufer oder Dienstleister überweisen. Zur Veranschaulichung entwickeln wir einen Marktplatz für Wohnungsvermittlung, auf dem Wohnungseigentümer/innen und potenzielle Mieter/innen zusammenfinden. Selbstverständlich lassen sich die in diesem Leitfaden behandelten Konzepte auch auf andere Anwendungen übertragen. ## Voraussetzungen 1. [Registrieren Sie Ihre Plattform](https://dashboard.stripe.com/connect). 1. [Verify and add business details in Dashboard](https://dashboard.stripe.com/account/onboarding). 1. [Vervollständigen Sie Ihr Plattform-Profil](https://dashboard.stripe.com/connect/settings/profile). 1. [Passen Sie Ihre Markeneinstellungen an](https://dashboard.stripe.com/settings/connect/stripe-dashboard/branding). Fügen Sie einen Firmennamen, ein Symbol und eine Markenfarbe hinzu. ## Stripe einrichten [Serverseitig] [Clientseitig] Zunächst benötigen Sie ein Stripe-Konto. [Registrieren Sie sich jetzt](https://dashboard.stripe.com/register). ### Serverseitig Diese Integration erfordert Endpoints auf Ihrem Server, die mit der Stripe-API kommunizieren können. Nutzen Sie die offiziellen Bibliotheken für den Zugriff auf die Stripe-API von Ihrem Server aus: #### Ruby ```bash # Available as a gem sudo gem install stripe ``` ```ruby # If you use bundler, you can add this line to your Gemfile gem 'stripe' ``` ### Clientseitig Das [Stripe iOS SDK](https://github.com/stripe/stripe-ios) ist Open Source, [vollständig dokumentiert](https://stripe.dev/stripe-ios/index.html) und kompatibel mit Apps, die iOS 13 oder höher unterstützen. #### Swift Package Manager Führen Sie zur Installation des SDK die folgenden Schritte aus: 1. Wählen Sie in Xcode **Datei** > **Add Package Dependencies** (Paketabhängigkeiten hinzufügen) aus und geben Sie als Repository-URL `https://github.com/stripe/stripe-ios-spm` ein. 1. Wählen auf unserer [Veröffentlichungsseite](https://github.com/stripe/stripe-ios/releases) die neueste Version aus. 1. Fügen Sie das Produkt **StripePaymentsUI** zum [Ziel Ihrer App](https://developer.apple.com/documentation/swift_packages/adding_package_dependencies_to_your_app) hinzu. #### CocoaPods 1. Falls noch nicht geschehen, installieren Sie bitte die aktuellste Version von [CocoaPods](https://guides.cocoapods.org/using/getting-started.html). 1. Wenn Sie keine bestehende [Podfile](https://guides.cocoapods.org/syntax/podfile.html) haben, führen Sie folgenden Befehl aus, um eine zu erstellen: ```bash pod init ``` 1. Fügen Sie folgende Zeile in Ihre `Podfile` ein: ```podfile pod 'StripePaymentsUI' ``` 1. Führen Sie folgenden Befehl aus: ```bash pod install ``` 1. Vergessen Sie nicht, ab jetzt in Zukunft anstelle der Datei `.xcodeproj` die Datei `.xcworkspace` zum Öffnen Ihres Projekts in Xcode zu verwenden. 1. Führen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK Folgendes aus: ```bash pod update StripePaymentsUI ``` #### Carthage 1. Falls noch nicht geschehen, installieren Sie bitte die aktuelle Version von [Carthage](https://github.com/Carthage/Carthage#installing-carthage). 1. Fügen Sie folgende Zeile in Ihre `Cartfile` ein: ```cartfile github "stripe/stripe-ios" ``` 1. Befolgen Sie die [Carthage-Installationsanweisungen](https://github.com/Carthage/Carthage#if-youre-building-for-ios-tvos-or-watchos). Vergewissern Sie sich, dass Sie alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks einbetten. 1. Führen Sie für zukünftige Updates auf die aktuelle Version unseres SDK einfach folgenden Befehl aus: ```bash carthage update stripe-ios --platform ios ``` #### Manuelles Framework 1. Gehen Sie auf unsere [GitHub-Release-Seite](https://github.com/stripe/stripe-ios/releases/latest), laden Sie **Stripe.xcframework.zip** herunter und entpacken Sie die Datei. 1. Ziehen Sie **StripePaymentsUI.xcframework** in den Abschnitt **Embedded Binaries** (Eingebettete Binärdateien) der Einstellungen unter **General** (Allgemeines) Ihres Xcode-Projekts. Aktivieren Sie dabei die Option **Copy items if needed** (Elemente kopieren, falls nötig). 1. Wiederholen Sie Schritt 2 für alle [hier](https://github.com/stripe/stripe-ios/tree/master/StripePaymentsUI/README.md#manual-linking) aufgeführten erforderlichen Frameworks. 1. Wiederholen Sie für zukünftige Updates auf die jeweils aktuelle Version des SDK die Schritte 1–3. > Details zur aktuellen SDK-Version und zu vorherigen Versionen finden Sie auf der Seite [Releases](https://github.com/stripe/stripe-ios/releases) auf GitHub. Um bei Veröffentlichung einer neuen Version eine Benachrichtigung zu erhalten, [achten Sie auf die Releases zum jeweiligen Repository](https://help.github.com/en/articles/watching-and-unwatching-releases-for-a-repository#watching-releases-for-a-repository). Konfigurieren Sie das SDK mit Ihrem [veröffentlichbaren Schlüssel](https://dashboard.stripe.com/test/apikeys) von Stripe, um es beim Start der App auszuführen. Dadurch kann Ihre App Anfragen an die Stripe-API senden. #### Swift ```swift import UIKitimportStripePaymentsUI @main class AppDelegate: UIResponder, UIApplicationDelegate { func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {StripeAPI.defaultPublishableKey = "<>" // do any other necessary launch configuration return true } } ``` > Verwenden Sie Ihre [Testschlüssel](https://docs.stripe.com/keys.md#obtain-api-keys) beim Testen und Entwickeln Ihrer App und Ihre [Live-Modus](https://docs.stripe.com/keys.md#test-live-modes)-Schlüssel beim Veröffentlichen Ihrer App. ## Verbundenes Konto erstellen #### Accounts v2 Wenn sich Verkäufer/innen oder Dienstleister/innen auf Ihrer Plattform registrieren, erstellen Sie ein [verbundenes Konto](https://docs.stripe.com/api/v2/core/accounts.md) für sie. Mit dem verbundenen Konto können Sie ihre Identifikationsdaten erfassen, für sie Zahlungen akzeptieren und Gelder auf ihr Bankkonto überweisen. In unserem Beispiel für die Wohnungsvermietung gehört das verbundene Konto dem/der Wohnungseigentümer/in. #### Accounts v1 Wenn sich Verkäufer/innen oder Dienstleister/innen auf Ihrer Plattform registrieren, erstellen Sie ein [verbundenes Konto](https://docs.stripe.com/api/accounts.md) für sie. Mit dem verbundenen Konto können Sie ihre Identifikationsdaten erfassen, für sie Zahlungen akzeptieren und Gelder auf ihr Bankkonto überweisen. In unserem Beispiel für die Wohnungsvermietung gehört das verbundene Konto dem/der Wohnungseigentümer/in. ![](https://b.stripecdn.com/docs-statics-srv/assets/express-ios.6789c3d9f8e327847abb218d75a29eec.png) > In diesem Leitfaden werden Express-Konten verwendet, für die bestimmte [Einschränkungen gelten](https://docs.stripe.com/connect/express-accounts.md#prerequisites-for-using-express). Sie können [benutzerdefinierte Konten](https://docs.stripe.com/connect/custom-accounts.md) als Alternative bewerten. ### Erstellen Sie ein verbundenes Konto mit vorausgefüllten Informationen #### Accounts v2 Nutzen Sie die API `/v2/core/accounts`, um ein verbundenes Konto zu [erstellen](https://docs.stripe.com/api/v2/core/accounts/create.md), indem Sie [das Dashboard und die Zuständigkeiten des verbundenen Kontos](https://docs.stripe.com/connect/accounts-v2/connected-account-configuration.md) angeben. ```curl curl -X POST https://api.stripe.com/v2/core/accounts \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-01-28.clover" \ --json '{ "contact_email": "furever_contact@example.com", "display_name": "Furever", "defaults": { "responsibilities": { "fees_collector": "application", "losses_collector": "application" } }, "dashboard": "express", "identity": { "business_details": { "registered_name": "Furever" }, "country": "us", "entity_type": "company" }, "configuration": { "merchant": { "capabilities": { "card_payments": { "requested": true } } }, "recipient": { "capabilities": { "stripe_balance": { "stripe_transfers": { "requested": true } } } } }, "include": [ "configuration.merchant", "configuration.recipient", "identity", "requirements" ] }' ``` Falls Sie bereits Informationen für Ihre verbundenen Konten erfasst haben, können Sie diese im `Account`-Objekt vorab angeben. Sie können alle Kontoinformationen vorab ausfüllen, einschließlich persönlicher und geschäftlicher Informationen, externer Kontoinformationen usw. Nachdem Sie das `Account` erstellt haben, erstellen Sie eine [Person](https://docs.stripe.com/api/v2/core/persons/create.md), die die für die Kontoeröffnung verantwortliche Person repräsentiert, wobei Sie `relationship.representative` auf „true“ setzen und alle Kontoinformationen, die Sie vorab ausfüllen möchten (z. B. Vor- und Nachname), eingeben. ```curl curl -X POST https://api.stripe.com/v2/core/accounts/{{ACCOUNT_ID}}/persons \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2026-03-25.preview" \ --json '{ "given_name": "Jenny", "surname": "Rosen", "email": "jenny.rosen@example.com", "relationship": { "representative": true } }' ``` Connect Onboarding fragt keine vorab ausgefüllten Informationen ab. Kontoinhaber/innen müssen vorausgefüllte Informationen jedoch bestätigen, bevor sie den [Connect-Rahmenvertrag](https://docs.stripe.com/connect/service-agreement-types.md) akzeptieren können. Füllen Sie beim Testen Ihrer Integration die Kontoinformationen vorab mit [Testdaten](https://docs.stripe.com/connect/testing.md) aus. ### Konto-Link erstellen Sie können einen Konto-Link erstellen, indem Sie die API [Account Links v2](https://docs.stripe.com/api/v2/core/account-links.md) mit den folgenden Parametern aufrufen: - `account` - `refresh_url` - `return_url` - `type` = `account_onboarding` - `configurations` = `recipient` und `merchant` ```curl curl -X POST https://api.stripe.com/v2/core/account_links \ -H "Authorization: Bearer <>" \ -H "Stripe-Version: 2025-08-27.preview" \ --json '{ "account": "{{CONNECTEDACCOUNT_ID}}", "use_case": { "type": "account_onboarding", "account_onboarding": { "configurations": [ "recipient", "merchant" ], "refresh_url": "https://example.com/reauth", "return_url": "https://example.com/return" } } }' ``` ### Nutzer/innen an die Konto-Link-URL weiterleiten Die Antwort zum Erstellen eines Konto-Links enthält einen Wert`url`. Nachdem Sie die Nutzerin oder den Nutzer Ihrer Anwendung authentifiziert haben, leiten Sie sie/ihn zu dieser URL weiter, um sie/ihn an das Verfahren zu übergeben. Konto-Link-URLs sind temporär und können nur einmal verwendet werden, da sie Zugang zu den persönlichen Daten der Inhaber/innen der verbundenen Konten gewähren. Wenn Sie Informationen vorab angeben möchten, müssen Sie dies vor der Erstellung des Konto-Links tun. Nach der Erstellung des Konto-Links können Informationen für das verbundene Konto weder angezeigt noch geändert werden. > Versenden Sie keine Konto-Link-URLs per E-Mail, Textnachricht oder anderweitig außerhalb Ihrer Plattformanwendung. Stellen Sie die URLs Ihren authentifizierten Kontoinhaberinnen und Kontoinhabern stattdessen in Ihrer Anwendung zur Verfügung. #### Item 1 #### Swift ```swift import UIKit import SafariServices let BackendAPIBaseURL: String = "" // Set to the URL of your backend server class ConnectOnboardViewController: UIViewController { // ... override func viewDidLoad() { super.viewDidLoad() let connectWithStripeButton = UIButton(type: .system) connectWithStripeButton.setTitle("Connect with Stripe", for: .normal) connectWithStripeButton.addTarget(self, action: #selector(didSelectConnectWithStripe), for: .touchUpInside) view.addSubview(connectWithStripeButton) // ... } @objc func didSelectConnectWithStripe() { if let url = URL(string: BackendAPIBaseURL)?.appendingPathComponent("onboard-user") { var request = URLRequest(url: url) request.httpMethod = "POST" let task = URLSession.shared.dataTask(with: request) { (data, response, error) in guard let data = data, let json = try? JSONSerialization.jsonObject(with: data, options: []) as? [String : Any], let accountURLString = json["url"] as? String, let accountURL = URL(string: accountURLString) else { // handle error } let safariViewController = SFSafariViewController(url: accountURL) safariViewController.delegate = self DispatchQueue.main.async { self.present(safariViewController, animated: true, completion: nil) } } } } // ... } extension ConnectOnboardViewController: SFSafariViewControllerDelegate { func safariViewControllerDidFinish(_ controller: SFSafariViewController) { // the user may have closed the SFSafariViewController instance before a redirect // occurred. Sync with your backend to confirm the correct state } } ``` #### Item 2 ```xml