# Vollständig eingebettete Connect-Plattform-Integration Stellen Sie Connect-Funktionen für Ihre verbundenen Konten über Ihre eigene Website bereit. Mit den eingebetteten Connect-Komponenten können Sie eine von Stripe verwaltete Funktionalität einer benutzerdefinierten Schnittstelle hinzufügen, die Sie Ihren verbundenen Konten, z. B. auf SaaS-Plattformen und Marktplätzen, zur Verfügung stellen. Sie können dort zahlungsbezogene Aktivitäten durchführen, anstatt über das Stripe Dashboard. In einer vollständig eingebetteten Integration trifft Folgendes zu: - Verbundene Konten greifen auf Stripe-bezogene Daten, Formulare und Benachrichtigungen über integrierte Komponenten in Ihrer Plattformanwendung zu. Sie haben keinen Zugriff auf ein Stripe-Dashboard. - Kümmert sich Stripe um das Kredit- und Betrugsrisiko Ihrer verbundenen Konten. Für alle Risiko- oder Compliance-Aktionen kommunizieren wir direkt mit verbundenen Konten und sie reagieren, indem sie mit eingebetteten Komponenten interagieren. - Durch die E-Mail-Benachrichtigungen von Stripe werden Ihre verbundenen Konten an eingebettete Komponenten weitergeleitet, wenn Informationen überprüft werden müssen oder Maßnahmen erforderlich sind. Sie müssen Stripe also die URLs für diese Komponenten mitteilen. ## Demo-Website anzeigen Wir haben eine vollständige [Demo-Website für unser fiktives Unternehmen Furever](http://furever.dev) erstellt. Furever ist eine Plattform, die Betreuerinnen und Betreuern von Tieren eine Software zur Verfügung stellt, mit der Nutzer/innen Zahlungen einziehen können. In dieser Demo können Sie mit vielen eingebetteten Komponenten interagieren, einschließlich Konto-Onboarding und Kontoverwaltung. ## Bevor Sie beginnen Bevor Sie eine eingebettete Integration erstellen können, müssen Sie die folgenden Voraussetzungen erfüllen: 1. [Registrieren Sie Ihre Plattform](https://dashboard.stripe.com/connect). 1. Fügen Sie Unternehmensdetails hinzu, um [Ihr Konto zu aktivieren](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. Sie müssen auch entscheiden, ob Ihre Plattform für die Preisgestaltung verantwortlich sein soll. In diesem Fall erhebt Stripe Zahlungsgebühren von Ihrer Plattform und Sie stellen Ihre verbundenen Konten in Rechnung. Andernfalls ist Stripe für die Preisgestaltung verantwortlich und erhebt die Zahlungsgebühren direkt von Ihren verbundenen Konten. ## Verbundenes Konto erstellen Im folgenden Beispiel wird ein verbundenes Konto erstellt, für das Stripe [die Risiken verwaltet](https://docs.stripe.com/connect/risk-management.md), die Preisgestaltung sowie die Verantwortung für die Onboarding-Anforderungen des Kontos übernimmt. Ihre Plattform verwendet eingebettete Komponenten und haftet nicht für negative Guthaben des verbundenen Kontos. Ihre verbundenen Konten haben keinen Zugriff auf von Stripe gehostete Dashboards. > Da Stripe in diesem Beispiel die Preisgestaltung steuert, müssen Sie die [eingebettete Komponente „Dokumente“](https://docs.stripe.com/connect/supported-embedded-components/documents.md) integrieren. Darüber hinaus benachrichtigt Stripe verbundene Konten per E-Mail, wenn ihre Steuerrechnungen oder 1099-Formulare zum Download bereit sind. Wenn Sie Konten erstellen, bei denen Ihre Plattform die Preisgestaltung steuert, ist die Komponente „Dokumente“ nicht erforderlich und Stripe sendet keine Benachrichtigungen über Steuerrechnungen oder 1099-Formulare an verbundene Konten. Sie können nach dem Onboarding des Kontos zusätzliche Funktionen anfordern, zum Beispiel bestimmte Zahlungsmethoden. Rufen Sie [/v1/accounts](https://docs.stripe.com/api/accounts/create.md) mit den folgenden Parametern auf: - `country` des Kontos - `controller.stripe_dashboard.type` = `none` - Fordern Sie die Funktionen `card_payments` und `transfers` an ```curl curl https://api.stripe.com/v1/accounts \ -u "<>:" \ -d country=US \ -d "controller[stripe_dashboard][type]=none" \ -d "capabilities[card_payments][requested]=true" \ -d "capabilities[transfers][requested]=true" ``` ```json { "id": ""{{CONNECTED_ACCOUNT_ID}}"", "object": "account", "controller": { "type": "application", "is_controller": true, "losses": {"payments": "stripe"}, "fees": {"payer": "account"}, "requirement_collection": "stripe", "stripe_dashboard": { "type": "none" } }, "type": "none", ... } ``` ## Eingebettete Komponenten einrichten Verbundene Konten können direkt über Ihre Plattform auf ihre Konten sowie auf die wichtigsten Zahlungsfunktionen zugreifen und haben keinen Zugriff auf ein von Stripe gehostetes Dashboard. Sie müssen den Zugriff auf bestimmte Funktionen über Ihre Website bereitstellen. Ihre Integration muss die folgenden eingebetteten Komponenten enthalten: - [Onboarding von Konten](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) - [Kontoverwaltung](https://docs.stripe.com/connect/supported-embedded-components/account-management.md) - [Benachrichtigungsbanner](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md) - [Dokumente](https://docs.stripe.com/connect/supported-embedded-components/documents.md) (wenn Stripe Gebühren direkt von verbundenen Konten erhebt) Ihre Integration muss auch eine Möglichkeit bieten, auf Zahlungsanfechtungen mit Beweisen zu einzelnen Zahlungen zu reagieren. Sie können dies [über unsere API](https://docs.stripe.com/disputes/api.md) oder eine eingebettete Komponente ([Payments](https://docs.stripe.com/connect/supported-embedded-components/payments.md), [Zahlungsdetails](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md) oder [Zahlungsanfechtungen](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md)) implementieren. Wir empfehlen Ihnen, eine Möglichkeit bereitzustellen, mit der verbundene Konten bei Bedarf Geld hinzufügen können, um ein negatives Guthaben zu vermeiden und Geschäftsunterbrechungen zu verhindern. Sie können dies mithilfe einer eingebetteten Komponente ([Guthaben](https://docs.stripe.com/connect/supported-embedded-components/balances.md) oder [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md)) implementieren. Sie können auch [zusätzliche eingebettete Komponenten](https://docs.stripe.com/connect/supported-embedded-components.md) hinzufügen oder Ihre eigenen Nutzeroberflächen mit unseren APIs erstellen. Stellen Sie sicher, dass Sie vor dem Onboarding verbundener Konten [eingebettete Komponenten einrichten](https://docs.stripe.com/connect/get-started-connect-embedded-components.md). ## Best Practices Um die Effektivität Ihrer Integration zu maximieren, sollten Sie die folgenden Strategien berücksichtigen: 1. **Nutzer/innen im Mittelpunkt**: Stellen Sie sicher, dass der Onboarding-Prozess intuitiv ist, indem Sie die Komponente zum [Onboarding von Konten](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) verwenden, um Nutzer/innen durch die Erstellung und Verwaltung von Konten zu führen. Unterteilen Sie zu diesem Zweck den Prozess in einfache Schritte und geben Sie leicht verständliche Anweisungen. 1. **Aufforderung zur Compliance**: Verwenden Sie die Komponente [Benachrichtigungsbanner](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md), um Nutzer/innen über ihren Compliance-Status und jegliche ausstehende Anforderungen auf dem Laufenden zu halten. Platzieren Sie das Banner an gut sichtbarer Stelle in Ihrer Anwendung, z. B. auf der Startseite Ihres Dashboards. So stellen Sie sicher, dass gut zu sehen ist und rechtzeitig zu notwendigen Dokumentationen oder Aktualisierungen auffordert. 1. **Reaktionsfähiges Design**: Stellen Sie sicher, dass die Komponenten, die Sie integrieren, auf allen Geräten funktionieren. Da verbundene Konten von verschiedenen Geräten, einschließlich Mobiltelefonen, auf Ihre Plattform zugreifen können, müssen Sie darauf achten, dass die Benutzeroberflächen zum Onboarding und zur Verwaltung auf verschiedenen Bildschirmgrößen gut funktionieren. 1. **Authentifizierung von Nutzer/innen und Sicherheit**: Implementieren Sie starke [Authentifizierungsmaßnahmen](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#user-authentication-in-connect-embedded-components) während der Onboarding- und Kontoverwaltungs-Prozesse. Obwohl die Stripe-Authentifizierung sensible Kontodaten schützt und die Möglichkeit bietet, Angaben zu den Auszahlungen zu ändern, hängen andere sensible Daten allein von der Authentifizierung und Sicherheit Ihres Produkts ab. Sie können die Sicherheit insgesamt erhöhen, indem Sie Methoden wie einmalige SMS-Codes oder die Zwei-Faktor-Authentifizierung verwenden. 1. **Feedback-Mechanismen**: Integrieren Sie Feedback-Optionen in Ihren Onboarding-Ablauf und Ihre Management-Komponenten. Ermöglichen Sie es Nutzern/innen, Probleme zu melden oder Verbesserungen vorzuschlagen, so dass Sie die Plattform auf der Grundlage ihrer Anregungen kontinuierlich verbessern können. 1. **Proaktive Einbindung**: Ermutigen Sie Nutzer/innen dazu, ihre Konten aktiv zu halten, indem Sie sie per E-Mail oder über die Plattform an Compliance-Verpflichtungen erinnern oder darauf hinweisen. Dieser proaktive Ansatz kann helfen, Kontosperrungen zu verhindern und die Frustration der Nutzer/innen zu verringern. ## Verbundene Konten zum Onboarding einladen Stripe verwendet eine [AccountSession](https://docs.stripe.com/api/account_sessions.md), um Ihre Absicht zum Ausdruck zu bringen, dem verbundenen Konto Zugriff auf eine eingebettete Komponente zu gewähren. Mithilfe einer `AccountSession` erfasst die eingebettete Konto-Onboarding-Komponente alle erforderlichen Informationen basierend auf Ihren angeforderten Funktionen. ### Konto vorab ausfüllen Sie können den Onboarding-Prozess für Ihre verbundenen Konten optimieren, indem Sie die `Account`-Eigenschaften mit bekannten Informationen vorab ausfüllen, bevor Sie eine `AccountSession` erstellen. Die Onboarding-Komponente fordert keine Informationen an, die bereits im `Account` vorhanden sind. Füllen Sie so viele Informationen wie möglich vorab aus, einschließlich Unternehmens-, Personen- und externen Kontoinformationen, indem Sie die folgenden Schritte befolgen: 1. Bitte nutzen Sie das Tool zur [Überprüfung der erforderlichen Informationen](https://docs.stripe.com/connect/required-verification-information.md), um sich über die Anforderungen für Ihre verbundenen Konten zu informieren, basierend auf deren Standort, Geschäftsart und angeforderten Funktionen. 1. Erfassen Sie vorab ausfüllbare Informationen, die den Anforderungen entsprechen. 1. Bitte geben Sie die erfassten Informationen bei der Erstellung des `Account` an oder fügen Sie sie vor der Registrierung hinzu, indem Sie das `Account` aktualisieren. Nachdem Sie ein `Account` erstellt und dessen Funktionen angefordert haben, können Sie die spezifischen Anforderungen überprüfen, indem Sie die Eigenschaft [Anforderungen](https://docs.stripe.com/api/accounts/object.md#account_object-requirements) einsehen. Da Ihre Plattform nicht für negative Guthaben verantwortlich ist, ist Ihr Zugriff auf bestimmte Informationen verbundener Konten, wie Auszahlungs­konten und Informationen zur juristischen Person, eingeschränkt. Nachdem ein verbundenes Konto das Onboarding über die eingebettete Konto-Onboarding-Komponente abgeschlossen hat, kann Ihre Plattform diese Eigenschaften nicht mehr aktualisieren. Das verbundene Konto muss alle Änderungen selbst vornehmen. ### Nutzer/innen über die eingebettete Onboarding-Komponente zum Onboarding einladen Auf der [Furever-Demo-Website](https://furever.dev) finden Sie ein Beispiel für die Platzierung der Onboarding-Komponente. Verbundene Konten müssen das Onboarding durchlaufen und die erforderlichen Informationen angeben, um Zahlungen und Auszahlungen zu aktivieren. Um ein verbundenes Konto einzurichten, integrieren Sie bitte die [eingebettete Onboarding-Komponente](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) in Ihre Website und leiten Sie neue Konten dorthin weiter. ### Kontositzung erstellen Aktivieren Sie beim [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) das Konto-Onboarding, indem Sie `account_onboarding` im Parameter `components` angeben. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[account_onboarding][enabled]=true" ``` ### Komponente für das Konto-Onboarding rendern Nachdem die Kontositzung erstellt und [ConnectJS initialisiert wurde](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), können Sie die Komponente für Konto-Onboarding im Frontend darstellen: #### JavaScript ```js // Include this element in your HTML const accountOnboarding = stripeConnectInstance.create('account-onboarding'); accountOnboarding.setOnExit(() => { console.log('User exited the onboarding flow'); }); container.appendChild(accountOnboarding); // Optional: make sure to follow our policy instructions above // accountOnboarding.setFullTermsOfServiceUrl('{{URL}}') // accountOnboarding.setRecipientTermsOfServiceUrl('{{URL}}') // accountOnboarding.setPrivacyPolicyUrl('{{URL}}') // accountOnboarding.setCollectionOptions({ // fields: 'eventually_due', // futureRequirements: 'include', // requirements: { // exclude: ['business_profile.product_description'] // } // }) // accountOnboarding.setOnStepChange((stepChange) => { // console.log(`User entered: ${stepChange.step}`); // }); ``` Zeigen Sie der Hauptinhaberin/dem Hauptinhaber den Onboarding-Ablauf an. Diese Nutzerin/dieser Nutzer richtet die Authentifizierung mit Stripe ein und kann die Kontodetails bearbeiten und auf Risikointerventionen reagieren. Das verbundene Konto verfügt nur über einen einzigen Satz von Authentifizierungsdaten bei Stripe. Die Nutzerin/der Nutzer, mit den Authentifizierungsdaten kann sich mittels einmaliger SMS-Codes authentifizieren, um sensiblere Aktionen wie die Aktualisierung von Bankkonten für Auszahlungsziele oder die Angabe aktualisierter Informationen zur juristischen Person durchzuführen. ### Onboarding-Events überwachen Während das verbundene Konto den Onboarding-Prozess durchläuft, werden auch [account.updated](https://docs.stripe.com/api/events/types.md#event_types-account.updated)-Ereignisse an Ihre konfigurierten [Connect-Webhooks](https://docs.stripe.com/connect/webhooks.md) gesendet. Sobald das Konto die Übermittlung seiner Daten abgeschlossen hat, ändert sich die Eigenschaft `details_submitted` des `Account` zu „true“. Überprüfen Sie den Status, indem Sie in Ihrem Webhook-Handler im Event-Ttext `account.updated` nach `details_submitted: true` suchen oder das [Konto abrufen](https://docs.stripe.com/api/account/retrieve.md). Wenn `details_submitted` „false“ ist, zeigen Sie die eingebettete Onboarding-Komponente erneut an. Die Komponente überspringt alle bereits übermittelten Informationen und erfasst nur die noch nicht übermittelten Anforderungen. Wenn ein verbundenes Konto seine Daten übermittelt und den Onboarding-Prozess abgeschlossen hat, ruft die eingebettete Onboarding-Komponente den `onExit`-Handler auf, den Sie beim [Rendern der Komponente festgelegt haben](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md). Verwenden Sie den Callback, um das Konto zur nächsten Aktion weiterzuleiten. Wenn Sie keinen Exit-Handler festlegen oder keine Aktion innerhalb des Handlers ausführen, wird dem Konto eine Abschlussmeldung ohne klare Angabe des nächsten Schritts angezeigt. ### Zusätzliche Funktionen anfordern (optional) Ihre Plattform kann nach dem Onboarding eines verbundenen Kontos [weiterhin zusätzliche Funktionen](https://docs.stripe.com/connect/account-capabilities.md#creating) anfordern. Zum Beispiel müssen Sie die Funktionen für alle Zahlungsmethoden anfordern, die Sie für ein Konto aktivieren möchten. Wenn für angeforderte Funktionen zusätzliche Informationen erforderlich sind, erhält das verbundene Konto über das [eingebettete Benachrichtigungsbanner](https://docs.stripe.com/connect/build-full-embedded-integration.md#embed-the-notification-banner) eine Benachrichtigung. ## Laufender Compliance- und Risikoaktualisierungen Da Stripe das Kredit- und Betrugsrisiko für Ihre verbundenen Konten verwaltet, müssen Ihre Konten in der Lage sein, Warnungen von Stripe zu sehen und darauf zu reagieren. Um dies zu erleichtern, muss Ihre Plattform die eingebetteten Komponenten „Benachrichtigungsbanner“ und „Kontoverwaltung“ integrieren. Weitere Informationen darüber, wie Stripe Ihre verbundenen Konten über diese Komponenten unterstützt, finden Sie unter [Embedded Connect-Support](https://docs.stripe.com/connect/embedded-support.md). ## Benachrichtigungsbanner einbetten Stripe verwendet die [eingebettete Benachrichtigungsbanner-Komponente](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md), um verbundene Konten über ausstehende Compliance-Anforderungen oder andere [risikobezogene Anfragen](https://docs.stripe.com/connect/embedded-risk.md) zu informieren. Die Antwort auf diese Benachrichtigungen ermöglicht es einem Konto, die Compliance bei der Verarbeitung von Zahlungen und dem Empfang von Auszahlungen zu gewährleisten. Wenn keine Benachrichtigungen ausstehen, wird das eingebettete Benachrichtigungsbanner nicht angezeigt. Integrieren Sie das Benachrichtigungsbanner gut sichtbar und leicht zugänglich auf Ihrer Website. Sie können es beispielsweise oben auf Ihrer Zahlungsseite integrieren. ### Kontositzung erstellen Beim [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) aktivieren Sie das Benachrichtigungsbanner, indem Sie `notification_banner` im Parameter `components` angeben. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[notification_banner][enabled]=true" \ -d "components[notification_banner][features][external_account_collection]=true" ``` ### Benachrichtigungsbanner-Komponente rendern #### JavaScript ```js // Include this element in your HTML const notificationBanner = stripeConnectInstance.create('notification-banner'); container.appendChild(notificationBanner); // Optional: // notificationBanner.setCollectionOptions({ // fields: 'eventually_due', // futureRequirements: 'include', // }) ``` Um auf eine Bannerbenachrichtigung zu reagieren, kann das Konto auf eine Schaltfläche in der Benachrichtigung klicken. Sie müssen sie nicht an die eingebettete Kontoverwaltungskomponente weiterleiten. ## Kontoverwaltung einbetten Stripe benötigt die [eingebettete Kontoverwaltungskomponente](https://docs.stripe.com/connect/supported-embedded-components/account-management.md) für das Risikomanagement. Integrieren Sie die Komponente in den Bereich Ihrer Website, in dem Konten ihre Einstellungen oder ihr Profil aktualisieren können. ### Kontositzung erstellen Aktivieren Sie beim [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) die Kontoverwaltung, indem Sie `account_management` im Parameter `components` angeben. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[account_management][enabled]=true" \ -d "components[account_management][features][external_account_collection]=true" ``` ### Kontoverwaltungskomponente rendern #### JavaScript ```js // Include this element in your HTML const accountManagement = stripeConnectInstance.create('account-management'); container.appendChild(accountManagement); // Optional: // accountManagement.setCollectionOptions({ // fields: 'eventually_due', // futureRequirements: 'include', // }) ``` Mit dieser Komponente kann ein Konto seine Kontodetails aktualisieren, auf neue Konformitätsanforderungen reagieren und ihre Authentifizierungsdaten aktualisieren. ## Zahlungen integrieren Richten Sie die Zahlungsintegration ein, nachdem Sie die erforderlichen eingebetteten Komponenten integriert haben. Sie können Ihrer Plattform integrierte Zahlungs- und Auszahlungskomponenten hinzufügen oder Ihre eigenen Arbeitsabläufe erstellen. Konfigurieren Sie [Connect-Webhooks](https://docs.stripe.com/connect/webhooks.md) und überwachen Sie das Event `account.updated`. Ein verbundenes Konto ist zum Empfang von Zahlungen bereit, wenn die Eigenschaft `charges_enabled` auf „true“ festgelegt ist. ## Integration eingebetteter Zahlungen und Auszahlungen Fügen Sie die eingebetteten Komponenten für [Zahlungen](https://docs.stripe.com/connect/supported-embedded-components/payments.md) und [Auszahlungen](https://docs.stripe.com/connect/supported-embedded-components/payouts.md) zu Ihrer Plattform hinzu, *bevor* Sie Ihre Payments-Integration erstellen. Auf diese Weise kann ein verbundenes Konto problemlos auf seine wichtigsten Workflows für Zahlungen zugreifen und diese verwalten. Die Zahlungskomponente zeigt eine Liste der Zahlungen des verbundenen Kontos an und umfasst Filterfunktionen sowie Ansichten mit individuellen Zahlungsdetails. Über diese Komponente kann ein Konto Rückerstattungen vornehmen und auf Zahlungsanfechtungen mit Belegen zu einzelnen Zahlungen reagieren. Wenn Sie sich dafür entscheiden, stattdessen eine vollständig API-gesteuerte benutzerdefinierte Zahlungsliste zu erstellen und zu pflegen, können Sie Rückerstattungen und Zahlungsanfechtungen weiterhin über die Komponente [Zahlungsdetails](https://docs.stripe.com/connect/supported-embedded-components/payment-details.md), die Komponente [Zahlungsanfechtungen](https://docs.stripe.com/connect/supported-embedded-components/disputes-for-a-payment.md) oder unsere [APIs](https://docs.stripe.com/disputes/api.md) aktivieren. ## Kontositzung erstellen Wenn Sie [eine Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) erstellen, aktivieren Sie die eingebettete Komponente Payments, indem Sie `payments` im Parameter `components` angeben. Sie können eine einzelne Funktion der Payments-Komponente ein- oder ausschalten, indem Sie den Parameter `features` unter `payments` angeben: ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[payments][enabled]=true" \ -d "components[payments][features][refund_management]=true" \ -d "components[payments][features][dispute_management]=true" \ -d "components[payments][features][capture_payments]=true" \ -d "components[payments][features][destination_on_behalf_of_charge_management]=false" ``` Bei direkten Abbuchungen können Ihre verbundenen Konten die vollständigen Informationen einsehen. Sie können auch Rückerstattungen und Zahlungsanfechtungen verwalten und Zahlungen erfassen, wenn Sie die entsprechenden Funktionen beim Erstellen einer Kontositzung aktivieren. ## Die Zahlungskomponente rendern Nachdem Sie die Kontositzung erstellt und [ConnectJS](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions) initialisiert haben, können Sie die Zahlungskomponente im Frontend darstellen: #### JavaScript ```js // Include this element in your HTML const payments = stripeConnectInstance.create('payments'); container.appendChild(payments); // Optional: specify filters to apply on load // payments.setDefaultFilters({ // amount: {greaterThan: 100}, // date: {before: new Date(2024, 0, 1)}, // status: ['partially_refunded', 'refund_pending', 'refunded'], // paymentMethod: 'card',}); ``` Die Auszahlungskomponente zeigt die letzten Auszahlungen des verbundenen Kontos, das aktuelle Guthaben und den Zeitpunkt der Verfügbarkeit von Geldern an. Aktivieren Sie beim [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) die eingebettete Auszahlungskomponente, indem Sie `payouts` im Parameter `components` angeben. Sie können einzelne Funktionen der Auszahlungskomponente aktivieren oder deaktivieren, indem Sie den Parameter `features` unter `payouts` angeben: ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[payouts][enabled]=true" \ -d "components[payouts][features][instant_payouts]=true" \ -d "components[payouts][features][standard_payouts]=true" \ -d "components[payouts][features][edit_payout_schedule]=true" \ -d "components[payouts][features][external_account_collection]=true" ``` Nachdem die Kontositzung erstellt und [ConnectJS initialisiert wurde](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#account-sessions), können Sie die Auszahlungskomponente im Frontend anzeigen: #### JavaScript ```js // Include this element in your HTML const payouts = stripeConnectInstance.create('payouts'); container.appendChild(payouts); ``` Eine ausführliche Anleitung zur Implementierung eingebetteter Komponenten finden Sie im [Schnellstart für die Integration eingebetteter Connect-Komponenten]](/connect/connect-embedded-components/quickstart). ## Zahlung akzeptieren Wenn Ihre verbundenen Konten Transaktionen direkt mit Kundinnen/Kunden durchführen, verwenden Sie [Direct Charges](https://docs.stripe.com/connect/direct-charges.md). Stripe berechnet Ihrer Plattform Transaktionsgebühren für Zahlungen, wenn `controller.fees.payer` für das [Konto](https://docs.stripe.com/api/accounts/object.md) nicht auf `account` gesetzt sind. Sie sind dafür verantwortlich, Ihren verbundenen Konten Gebühren für die Zahlungsabwicklung in Rechnung zu stellen. Sie können bei jeder Zahlung verwenden, um automatisch Gebühren von verbundenen Konten zu erheben, ohne dies in Ihre Integration aufnehmen zu müssen. (See full diagram at https://docs.stripe.com/connect/build-full-embedded-integration) Wir empfehlen Ihnen, [Stripe Checkout](https://docs.stripe.com/payments/checkout.md) zu verwenden, eine vorkonfigurierte von Stripe gehostete Seite zum Empfang von Zahlungen. Checkout unterstützt mehrere Zahlungsmethoden und zeigt Ihrem/Ihrer Kund/in automatisch die für ihn/sie relevantesten an. Sie können auch das [Payment Element](https://docs.stripe.com/payments/payment-element.md) verwenden, eine vorgefertigte Nutzeroberfläche, die Sie einbetten können, um mit einer einzigen Integration zusätzliche Zahlungsmethoden zu akzeptieren. #### Checkout ### Checkout-Sitzung erstellen (Client-side) (Server-side) Über eine Checkout-Sitzung wird gesteuert, was die Kundinnen und Kunden auf der von Stripe gehosteten Zahlungsseite sehen, z. B. Posten, den Bestellbetrag und die Währung sowie die akzeptierten Zahlungsmethoden. Bei der Durchführung von separaten Zahlungen und Überweisungen verwendet Checkout die Branding-Einstellungen des verbundenen Kontos. Weitere Informationen finden Sie unter [Branding anpassen](https://docs.stripe.com/connect/direct-charges.md?platform=web&ui=stripe-hosted#branding). Anders als bei Destination Charges oder separaten Zahlungen und Überweisungen sind die verbundenen Konten für den Umgang mit Zahlungsanfechtungen bei Direct Charges verantwortlich – die Verantwortung liegt nicht bei der Plattform. Wenn Sie eine Checkout-Sitzung erstellen möchten, fügen Sie Ihrer Website eine Zahlungsschaltfläche hinzu, über die ein serverseitiger Endpoint aufgerufen wird. ```html Checkout
``` 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 "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d mode=payment \ -d "line_items[0][price]={{PRICE_ID}}" \ -d "line_items[0][quantity]=1" \ -d "payment_intent_data[application_fee_amount]=123" \ --data-urlencode "success_url=https://example.com/success" ``` - `line_items`: Dieser Parameter stellt Artikel dar, die Ihre Kundinnen/Kunden kaufen und die auf der gehosteten Nutzeroberfläche angezeigt werden. - `success_url`: Dieses Argument leitet Kundinnen/Kunden weiter, nachdem sie eine Zahlung abgeschlossen haben. - `Stripe-Account`: Dieser Header gibt eine [Direct Charge](https://docs.stripe.com/connect/direct-charges.md) für Ihr verbundenes Konto an. Bei Direct Charges ist das verbundene Konto für Stripe-Gebühren, Rückerstattungen und Rückbuchungen verantwortlich. In Checkout wird das Branding des verbundenen Kontos verwendet, wodurch Kundinnen/Kunden den Eindruck haben, direkt mit dem verbundenen Konto und nicht mit Ihrer Plattform zu kommunizieren. - (Optional) `payment_intent_data[application_fee_amount]`: Dieses Argument legt den Betrag fest, den Ihre Plattform von der Transaktion abziehen will. Nachdem die Zahlung auf dem verbundenen Konto abgewickelt wurde, wird der `application_fee_amount` an die Plattform übertragen und die Stripe-Gebühr wird vom Guthaben des verbundenen Kontos abgezogen. ### Mit Ereignissen nach der Zahlung umgehen (Serverseitig) Stripe sendet das Ereignis [checkout.session.completed](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 führen Sie Aktionen aus, wie z. B. das Senden einer Bestellbestätigung per E-Mail, das Protokollieren des Verkaufs in einer Datenbank oder das Starten eines Versand-Workflows. Ü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`. #### Payment Element ### 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. ![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 Kund/innen während des Bezahlvorgangs angezeigt werden, sind ebenfalls im PaymentIntent enthalten. Sie können Zahlungsmethoden automatisch aus Ihren Dashboard-Einstellungen durch Stripe abrufen lassen oder sie manuell auflisten. Sofern Ihre Integration keine codebasierte Option zum Anbieten von Zahlungsmethoden verlangt, empfiehlt Stripe die automatisierte Option, da Stripe die Währung, Einschränkungen für Zahlungsmethoden und andere 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 des/der Kund/in 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 mit dem gewünschten Betrag und der Währung auf Ihrem Server. 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. Dadurch wird sichergestellt, dass Ihr PaymentIntent die Zahlungsmethoden unterstützt, die Sie im Dashboard konfigurieren. 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 "<>:" \ -H "Stripe-Account: {{CONNECTEDACCOUNT_ID}}" \ -d amount=1099 \ -d currency=eur \ -d "automatic_payment_methods[enabled]=true" \ -d application_fee_amount=123 ``` #### Zahlungsmethoden manuell auflisten ```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 ``` Beim Erstellen eines PaymentIntent müssen Sie bestimmte Parameter angeben: - `amount` – Erstellen Sie einen PaymentIntent auf Ihrem Server mit einem bestimmten Betrag. Bestimmen Sie immer auf der Serverseite, wie viel berechnet werden soll, da dies eine vertrauenswürdige Umgebung ist. Dieser Ansatz verhindert, dass böswillige Kundinnen und Kunden ihre eigenen Preise wählen können. - `currency` – Die Währung, die Sie in den PaymentIntent aufnehmen, filtert die Zahlungsmethoden, die dem Kunden/der Kundin angezeigt werden. Wählen Sie also die Zahlungsmethode aus, die Sie anbieten möchten. Wenn Sie beispielsweise `eur` übergeben und OXXO im Dashboard aktiviert ist, wird OXXO dem Kunden/der Kundin nicht angezeigt, da `eur`-Zahlungen nicht unterstützt werden. Einige Zahlungsmethoden unterstützen mehrere Währungen und Länder. Im Beispielcode dieses Leitfadens werden Bancontact, Kreditkarten, EPS, iDEAL, Przelewy24, SEPA-Lastschriften und Sofort verwendet. - `"payment_method_types[]"` – Führen Sie manuell alle Zahlungsmethoden auf, die Sie unterstützen möchten. - (Optional) `payment_intent_data[application_fee_amount]` – Dieses Argument bestimmt den Betrag, den Ihre Plattform von der Transaktion abziehen möchte. Wenn Sie das [Platform Pricing Tool](https://docs.stripe.com/connect/platform-pricing-tools.md) von Stripe verwenden, um die Preisgestaltung für Plattformgebühren vom [Dashboard](https://dashboard.stripe.com/test/settings/connect/platform_pricing/payments) aus zu verwalten, sollten Sie dieses Argument nicht einfügen, da es die vom Tool festgelegte Preislogik überschreibt. Nachdem die Zahlung auf dem verbundenen Konto abgewickelt wurde, wird der `application_fee_amount` an die Plattform übertragen, und die Stripe Gebühr wird vom Guthaben des verbundenen Kontos abgezogen. > 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 mit dem Payment Element Zahlungsdaten auf dem Client. Das Payment Element ist eine vorgefertigte Komponente der Nutzeroberfläche, das die Erfassung von Zahlungsdaten für verschiedene Zahlungsmethoden vereinfacht. Das Payment Element enthält einen iFrame, der Zahlungsinformationen über eine sichere HTTPS-Verbindung an Stripe sendet. Vermeiden Sie es, das Payment Element in einem anderen iFrame zu platzieren, da einige Zahlungsmethoden die Weiterleitung an eine andere Seite zur Zahlungsbestätigung voraussetzen. Die Adresse der Bezahlseite muss mit `https://` 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. #### Stripe.js einrichten #### HTML + JS 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 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 // Initialize Stripe.js with the same connected account ID used when creating // the PaymentIntent. const stripe = Stripe('<>', { 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. ```html
``` Wenn das Formular geladen wurde, erstellen Sie eine Instanz des Payment Element und verbinden Sie es zusammen mit dem [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt mit dem Container-DOM-Knoten. Übergeben Sie diesen Wert als Option, wenn Sie die Instanz von [Elements](https://docs.stripe.com/js/elements_object/create) 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 de,/der Kund/in selbst zugänglich gemacht werden. ```javascript 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](https://docs.stripe.com/elements/appearance-api.md) an das Design Ihrer Website anpassen, wenn Sie das Objekt `Elements` einrichten. #### 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 ``` ### 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` zusammen mit dem [Client-Geheimnis](https://docs.stripe.com/api/payment_intents/object.md#payment_intent_object-client_secret) aus dem vorherigen Schritt als `options` im `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("<>", { stripeAccount: '{{CONNECTED_ACCOUNT_ID}}' }); function App() { const options = { // pass the client secret from the previous step clientSecret: '{{CLIENT_SECRET}}', // Fully customizable with the Appearance API appearance: {/*...*/}, }; return ( ); }; ReactDOM.render(, document.getElementById('root')); ``` #### PaymentElement-Komponente 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; ``` 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](https://docs.stripe.com/elements/appearance-api.md) an das Design Ihrer Website anpassen, wenn Sie den `Elements`-Anbieter konfigurieren. ### 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. | ## E-Mail-Kommunikation mit verbundenen Konten einrichten Stripe kommuniziert in Ihrem Auftrag mit Ihren verbundenen Konten, um Risiken zu verwalten und stets Compliance zu gewährleisten. Sie können diese E-Mail-Nachrichten anpassen und mit Ihrer eigenen E-Mail-Domain und Ihrem Plattform-Branding versehen. Stripe sendet die folgenden E-Mails an Ihre verbundenen Konten: - **Konto-E-Mails** verifizieren Kontoinformationen, wie z. B. hinzugefügte oder geänderte E-Mail-Adressen, Telefonnummern oder Bankkonten. - \** Compliance-E-Mails** benachrichtigen Konten, damit sie die erforderlichen Informationen zur Verfügung stellen. Stripe muss häufig weitere Informationen erfassen, um die Compliance mit unseren Finanzpartnern aufrechtzuerhalten. - Mit **Risiko-E-Mails** werden Konten benachrichtigt, wenn sie einer Risikoprüfung unterzogen werden. Diese E-Mails enthalten häufig Anweisungen dazu, wie Informationen zur Behebung von Risikomaßnahmen eingereicht werden können, z. B. zur Aufhebung einer Auszahlungspause. - **Steuer-E-Mails** (nur, wenn Stripe die Gebühren direkt von verbundenen Konten einzieht) benachrichtigen Nutzer/innen, wenn ihre Steuerrechnungen oder 1099-Formulare zum Download bereit sind. Wenn Sie weitere zahlungsbezogene E-Mails an Ihre verbundenen Konten senden möchten, müssen Sie dies selbst tun. Wenn Sie beispielsweise E-Mails bezüglich neuer Zahlungsanfechtungen senden möchten, [beobachten Sie](https://docs.stripe.com/webhooks.md) das Ereignis `charge.dispute.created` in einem verbundenen Konto. Wenn dieses Ereignis eintritt, verwenden Sie [die Disputes API](https://docs.stripe.com/api/disputes.md), um die Details abzurufen und per E-Mail an das Konto zu senden. Sie müssen Ihre [Connect-Einstellungen mit den URLs](https://dashboard.stripe.com/settings/connect/site-links) Ihrer Zahlungen und der Workflows Ihrer verbundenen Konten aktualisieren, damit die E-Mail-Kommunikation von Stripe Ihre verbundenen Konten dorthin weiterleiten kann. Diese Links müssen Sie vor dem Erstellen einer `AccountSession` oder eines `AccountLink` im Live-Modus einrichten. ## Weiterleitungen über E-Mail-Links handhaben Von Stripe gesendete E-Mails, die eine Handlungsaufforderung enthalten, müssen einen Link zu dieser Handlung enthalten. Wenn wir zum Beispiel eine E-Mail an ein verbundenes Konto senden, muss sie einen Link zu Ihrer Kontoverwaltungskomponente enthalten. Bevor Sie eine Kontositzung im Live-Modus erstellen können, müssen Sie die URLs angeben, unter denen Sie die eingebetteten Komponenten in Ihre Website integriert haben. Konfigurieren Sie die Domain zum Versenden von E-Mails und die URLs der eingebetteten Komponenten im Abschnitt **Website-Links** in den [Connect-Einstellungen Ihrer Plattform](https://dashboard.stripe.com/settings/connect/site-links). > In Testumgebungen werden dieselben URLs verwendet wie im Live-Modus. Wählen Sie für eingebettete Komponenten, die in Ihre Website integriert sind, **Ja** aus und geben Sie die URL der Seite ein, auf der die Komponente gehostet wird. Wählen Sie für alle Aktionen, die nicht von einer eingebetteten Komponente verarbeitet werden, **Nein** aus und geben Sie die URL der Seite auf Ihrer Website ein, auf der das Konto die Aktion ausführen kann. Nachdem Sie die URLs eingegeben haben, testen Sie sie, um sicherzustellen, dass sie die richtigen Seiten öffnen. Sie müssen URLs für Folgendes festlegen: - Benachrichtigungsbanner - Kontoverwaltung - Zahlungen - Auszahlungen - Salden - Dokumente (wenn Stripe Gebühren direkt von verbundenen Konten erhebt) Beim Senden einer E-Mail hängt Stripe die jeweilige ID des verbundenen Kontos als Parameter `stripe_account_id` an die Weiterleitungs-URL an. Mit diesem Parameter können Sie das Konto identifizieren und so die Authentifizierung gewährleisten. Richten Sie die Route auf Ihrem Server so ein, dass die Parameter gelesen und die korrekte eingebettete Komponente angezeigt wird. Weitere Informationen zum Konfigurieren von Stripe-E-Mails für Ihre verbundenen Konten finden Sie unter [E-Mail-Kommunikation in eingebetteten Connect-Integrationen](https://docs.stripe.com/connect/embedded-comms.md). ## E-Mail-Branding und Einstellungen konfigurieren Stripe kann E-Mails mit den Markeneinstellungen Ihrer Plattform von Ihrer eigenen E-Mail-Domain an Ihre verbundenen Konten senden. Um Stripe-E-Mails für Ihre verbundenen Konten zu konfigurieren, rufen Sie [E-Mails](https://dashboard.stripe.com/settings/connect/emails) in Ihrem Plattform-Dashboard auf. ## Live gehen Zu diesem Zeitpunkt haben Sie Ihre Plattformintegration wie folgt konfiguriert: - Verbundene Konten in der richtigen Konfiguration erstellt - Eingebettete Komponenten integriert, damit verbundene Konten über Ihre Website zum Onboarding eingeladen werden können, ihre Konten verwalten können und auf Risikomaßnahmen reagieren können - Zahlungen per Direct Charges mit Plattformgebühr einrichten - Richten Sie eine markengeschützte E-Mail-Kommunikation ein, damit Stripe mit Ihren Nutzer/innen im Hinblick auf Compliance, Risikenmaßnahmen und erforderliche Dokumente kommunizieren kann ## Integration testen Testen Sie Ihren Kontoerstellungsablauf, indem Sie das in Ihre Plattform integrierte Konto-Onboarding verwenden. Testen Sie Ihre Zahlungsmethodeneinstellungen für Ihre verbundenen Konten, indem Sie sich bei einem Ihrer Testkonten anmelden und zu den [Einstellungen für Zahlungsmethoden](https://dashboard.stripe.com/settings/payment_methods) navigieren. Testen Sie Ihren Bezahlvorgang mit Ihren Testschlüsseln und einem Testkonto. Sie können unsere [Testkarten](https://docs.stripe.com/testing.md) verwenden, um Ihre Zahlungsabläufe zu testen und verschiedene Zahlungsergebnisse zu simulieren.