# Komponente Capital-Werbung Zeigen Sie Werbeinhalte zum Finanzierungsangebot von Capital eines verbundenen Kontos an und starten Sie Ihren Capital-Antrag. Mit der Capital-Promo-Komponente können Ihre berechtigten verbundenen Konten einen Finanzierungsantrag auf der Website oder im Anmeldeformular Ihrer Plattform ausfüllen. Verbundene Konten können ihren Angebotsbetrag und ihre Konditionen auswählen, Vertragsdetails einsehen und ihr Anmeldeformular einreichen. Diese Komponente zeigt zu Beginn des Anmeldevorgangs Bildungs- und Werbeinhalte zum Capital-Programm an. Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production. ### Alternative Komponenten - Eine kleinere Version dieser Komponente finden Sie in der [Capital-Promo-Kachel-Komponente](https://docs.stripe.com/capital/promotional-tile.md) - Erfahren Sie hier, wie Sie Bildungs- und Werbeinformationen zum Capital-Programm ausschließen können: [Capital-Anmeldeformular-Komponente](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-application.md) ## Bevor Sie beginnen - Eingebettete Komponenten können nur für verbundene Konten in den USA und im Vereinigten Königreich angezeigt werden. - Bevor Sie live gehen, müssen Sie [automatische Angebote aktivieren](https://docs.stripe.com/capital/embedded-component-integration.md#enable-automatic-offers) und [Ihre Integration zur Prüfung an Stripe übermitteln](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#submit-for-review). - Wenn Sie [die Komponente anzeigen](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#render-the-component), wird standardmäßig auf Inhalte von Stripe verwiesen. Sie können den Link zur [Datenschutzerklärung](https://stripe.com/privacy) und [Funktionsweise von Capital für Plattformen](https://docs.stripe.com/capital/how-capital-for-platforms-works.md) durch Ihre entsprechende Dokumentation ersetzen. ## Installieren eingebetteter Komponenten von Capital Installieren Sie eine Beta-Version der Stripe SDKs, um Kontositzungen für Komponenten der privaten Vorschau zu erstellen: - [Ruby](https://github.com/stripe/stripe-ruby/#public-preview-sdks) `>=15.5.0-beta.1` - [Python](https://github.com/stripe/stripe-python/#public-preview-sdks) `>=12.5.0b1` - [PHP](https://github.com/stripe/stripe-php/#public-preview-sdks) `>=17.6.0-beta.1` - [Node](https://github.com/stripe/stripe-node/#public-preview-sdks) `>=18.5.0-beta.1` - [.NET](https://github.com/stripe/stripe-dotnet#public-preview-sdks) `>=48.5.0-beta.1` - [Java](https://github.com/stripe/stripe-java#public-preview-sdks) `>=29.5.0-beta.1` - [Go](https://github.com/stripe/stripe-go#public-preview-sdks) `>=82.5.0-beta.1` Verwenden Sie die Beta-Version der clientseitigen Stripe-Bibliotheken, um Komponenten der privaten Vorschau zu rendern: #### npm Installieren Sie die Bibliothek: ```bash npm install --save @stripe/connect-js@preview ``` Wenn Sie React in Ihrer Anwendung verwenden: ```bash npm install --save @stripe/react-connect-js@preview ``` #### GitHub Laden Sie den Quellcode der Bibliotheken für [@stripe/connect-js](https://github.com/stripe/connect-js) and [@stripe/react-connect-js](https://github.com/stripe/react-connect-js) direkt von GitHub herunter. ## Connect.js einrichten Wenn Sie in Ihrem Anmeldeformular nicht bereits in Stripe eingebettete Komponenten verwenden, [initialisieren Sie Connect.js](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#account-sessions), bevor Sie das Anmeldeformular integrieren. ## Kontositzung erstellen Geben Sie in Ihrer Anfrage zum [Erstellen einer Kontositzung](https://docs.stripe.com/api/account_sessions/create.md) `capital_financing_promotion` im Parameter `components` an. ```curl curl https://api.stripe.com/v1/account_sessions \ -u "<>:" \ -H "Stripe-Version: 2026-03-25.preview; embedded_connect_beta=v2;" \ -d "account={{CONNECTEDACCOUNT_ID}}" \ -d "components[capital_financing_promotion][enabled]=true" ``` ## Komponente rendern Stellen Sie die Capital-Promotion-Komponente im Frontend dar: #### JavaScript ```js // Include this element in your HTML const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion'); container.appendChild(capitalFinancingPromotion); ``` #### HTML + JS | Methode | Typ | Beschreibung | Standard | | ----------------------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | `setOnApplicationSubmitted` | `() => void` | Das verbundene Konto hat seinen Finanzierungsantrag erfolgreich eingereicht. | | | `setOnApplicationStepChange` | `({step: string}) => void` | Das verbundene Konto hat innerhalb des Anmeldeformulars einen Schritt durchlaufen. | | | `setLayout` | `full | banner` | Steuert das Layout der Komponente. Der `banner`-Modus reduziert die vertikale Größe der Komponente erheblich, was beim Stapeln der Komponente mit anderen Inhalten auf der Seite nützlich ist. | `full` | | `setOnEligibleFinancingOfferLoaded` | `({productType: standard | refill | none}) => void` | Das Finanzierungsangebot des verbundenen Kontos wurde geladen. Das Feld `productType` entspricht dem Feld `product_type` im Objekt [Finanzierungsangebot](https://docs.stripe.com/api/capital/connect_financing_object.md#financing_offer_object-product_type). | | | `setPrivacyPolicyUrl` | `string` | Absolute URL einer Seite, die Ihre Datenschutzerklärung enthält. | `https://stripe.com/privacy` | | `setHowCapitalWorksUrl` | `string` | Absolute URL einer Seite mit Informationen über das Capital-Programm. | `https://docs.stripe.com/capital/how-capital-for-platforms-works` | | `setEligibilityCriteriaUrl` | `string` | Absolute URL einer Seite mit Informationen zu den Anspruchskriterien für das Capital-Programm. | `https://docs.stripe.com/capital/how-capital-for-platforms-works` | #### React | React-Eigenschaft | Typ | Beschreibung | Standard | Erforderlich oder optional | | -------------------------------- | --------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | -------------------------- | | `onApplicationSubmitted` | `() => void` | Das verbundene Konto hat seinen Finanzierungsantrag erfolgreich eingereicht. | | optional | | `onApplicationStepChange` | `({step: string}) => void` | Das verbundene Konto hat das Anmeldeformular durchlaufen. Siehe [Details](https://docs.stripe.com/connect/supported-embedded-components/capital-financing-promotion.md#display-states). | | optional | | `layout` | `full | banner` | Steuert das Layout der Komponente. Der `banner`-Modus reduziert die vertikale Größe der Komponente erheblich, was beim Stapeln der Komponente mit anderen Inhalten auf der Seite nützlich ist. | `"full"` | optional | | `onEligibleFinancingOfferLoaded` | `({productType: "standard" | "refill" | "none"}) => void` | Das Finanzierungsangebot des verbundenen Kontos wurde geladen. Das Feld `productType` entspricht dem Feld `product_type` im Objekt [Finanzierungsangebot](https://docs.stripe.com/api/capital/connect_financing_object.md#financing_offer_object-product_type). | | optional | | `privacyPolicyUrl` | `string` | Absolute URL einer Seite, die Ihre Datenschutzerklärung enthält. | `https://stripe.com/privacy` | optional | | `howCapitalWorksUrl` | `string` | Absolute URL einer Seite mit Informationen über das Capital-Programm. | `https://docs.stripe.com/capital/how-stripe-capital-works` | optional | | `eligibilityCriteriaUrl` | `string` | Absolute URL einer Seite mit Informationen zu den Anspruchskriterien für das Capital-Programm. | `https://docs.stripe.com/capital/how-stripe-capital-works` | optional | ## Komponente gestalten und anpassen [Passen Sie eingebettete Komponenten](https://docs.stripe.com/connect/customize-connect-embedded-components.md) an, um die Schriftarten, Farben und die Nutzeroberfläche der Komponente an das Branding Ihrer Plattform anzupassen. ## Anzeigestatus festlegen Fügen Sie die Werbekomponente auf der Startseite Ihrer Plattform oder eine spezielle **Finanzierungsseite** auf der Website oder in der App Ihrer Plattform hinzu. Das Anmeldeformular zeigt Inhalte dynamisch basierend auf dem Finanzierungsstatus des verbundenen Kontos an: - **Keine aktive Finanzierung**: Wenn das verbundene Konto nicht über eine aktive Finanzierung verfügt, zeigt die Komponente allgemeine Informationen über den Anspruch und das Darlehensprogramm an. - **Mit aktivem Angebot**: Wenn das verbundene Konto für ein Angebot berechtigt ist, zeigt die Komponente vollständige Angebotsdetails mit der Schaltfläche **Anmeldeformular starten** an. - **Angebot wird geprüft**: Nachdem ein berechtigtes verbundenes Konto ein Finanzierungsangebot angenommen und beantragt hat, verwenden Sie diesen Status, um den Status eines Anmeldeformulars anzuzeigen. Überwachen Sie das Ereignis `onApplicationStepChange`, um den Fortschritt des Angebots zu verfolgen. Dieses Ereignis wird ausgegeben, wenn das verbundene Konto zum nächsten Schritt übergeht oder zu einem vorherigen Schritt oder einer vorherigen Seite im Capital-Anmeldeformular zurücknavigiert. Der Name des nächsten Schritts wird dem Handler zur Verfügung gestellt, den Sie im Schrittfeld angeben. Diese Schritte können in beliebiger Reihenfolge angezeigt und wiederholt werden. Sie können die Schrittnamen jederzeit ändern, hinzufügen und entfernen. Verwenden Sie das `onApplicationStepChange`-Objekt nur für Analysezwecke, z. B. zur Verfolgung der durchschnittlichen Seitenabschlusszeit oder der Seiten mit dem größten Abfall. Verwenden Sie das `onApplicationStepChange`-Objekt nicht, um Betriebs- oder Support-Workflows auszulösen, z. B. das Senden von E-Mails an verbundene Konten, die das Anmeldeformular auf einer bestimmten Seite gestoppt haben. - **Eingereichtes Angebot**: Nachdem ein verbundenes Konto sein Anmeldeformular eingereicht hat, zeigt die Komponente einen leeren Bildschirm an. Überwachen Sie das Ereignis `onApplicationSubmitted`, um stattdessen einen Bestätigungsbildschirm anzuzeigen. - **Aktive Finanzierung läuft**: Die Komponente wird nicht angezeigt (gibt null zurück). ### Der onApplicationStepChange-Typ Der Typ `onApplicationStepChange` ist in connect.js definiert. Jedes Mal, wenn das verbundene Konto im Rahmen des Capital-Antragsprozesses von einem Schritt zum nächsten navigiert, erhält der Schrittwechsel-Handler ein onApplicationStepChange-Objekt mit der folgenden Eigenschaft: | Name | Typ | Beispielwert | | ------ | --------------------------------------------- | --------------- | | `step` | `string` (muss ein gültiger Schrittname sein) | `business_type` | Der eindeutige Verweis auf einen Onboarding-Schritt. | ### Schrittnamen Jede Seite in einem Onboarding-Ablauf hat einen der folgenden Schrittnamen. | Schrittname | Beschreibung | | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `stripe_user_authentication` | Verarbeitet die Authentifizierung der Nutzerin/des Nutzers über ein von Stripe gehostetes Fenster, um die Identität zu überprüfen und den Finanzierungsablauf abzusichern. | | `offer_selector` | Führt verbundene Konten in den Finanzierungsantrag ein und bietet einen Überblick über das Angebot und die Finanzierung. | | `offer_summary` | Zeigt eine detaillierte Zusammenfassung des Finanzierungsangebots, einschließlich der wichtigsten Konditionen. | | `business_details` | Erfasst detaillierte Informationen zum Unternehmen des verbundenen Kontos, wie Geschäftsadresse, Branche und betriebliche Besonderheiten. | | `business_verification` | Sammelt Dokumente und Informationen, die die Existenz und Rechtmäßigkeit der Geschäftseinheit des verbundenen Kontos bestätigen. | | `business_summary` | Bietet eine Übersicht über alle während des Onboardings übermittelten geschäftsbezogenen Informationen, damit das verbundene Konto die Angaben bestätigen oder aktualisieren kann. | | `owners` | Erfasst Informationen über die wirtschaftlichen Eigentümer/innen des Unternehmens, das eine Finanzierung beantragt. | | `directors` | Erfasst, falls zutreffend, Angaben zu den Geschäftsführerinnen und Geschäftsführern des Unternehmens. | | `executives` | Erfasst Informationen über wichtige Führungskräfte, die mit dem Unternehmen verbunden sind. | | `representative_details` | Erfasst Informationen über die Einzelperson, die das Unternehmen im Finanzierungsantrag vertritt. | | `representative_additional_document` | Ermöglicht es dem verbundenen Konto, zusätzliche Dokumente hochzuladen, die die Identität oder Befugnis der Vertreterin/des Vertreters bestätigen. | | `representative_document` | Erfasst einen amtlichen Ausweis oder ein gleichwertiges Dokument, das die Identität der Unternehmensvertreterin/des Unternehmensvertreters bestätigt. | | `person_summary` | Bietet eine Übersicht über alle personenbezogenen Informationen (Eigentümerinnen/Eigentümer, Vertreterinnen/Vertreter, Führungskräfte), die übermittelt wurden und ermöglicht Aktualisierungen oder Korrekturen. | | `offer_annual_revenue` | Erfasst Informationen zum Jahresumsatz des verbundenen Kontos, um die Finanzierungsberechtigung und -bedingungen zu bewerten. | | `offer_financial_data` | Fordert zusätzliche Finanzdokumente und Daten an, die für die Risikoevaluation und Genehmigung des Finanzierungsangebots erforderlich sind. | | `offer_missing_contact_info` | Fordert das verbundene Konto auf, fehlende Kontaktinformationen, die für den Finanzierungsantrag relevant sind, anzugeben oder zu aktualisieren. | | `offer_payout_details` | Erfasst Details zu Zahlungen und Auszahlungen, um die Auszahlung von Finanzierungsgeldern auf das Bankkonto des verbundenen Kontos zu erleichtern. | | `lending_network_offer_review_agreements` | Bietet verbundenen Konten spezielle Vereinbarungen über Finanzierungsangebote, die über das Kreditnetzwerk von Stripe zur Überprüfung und Annahme bereitgestellt werden. | | `offer_review_agreements` | Zeigt die rechtlichen Vereinbarungen und Bedingungen des ausgewählten Finanzierungsangebots zur Prüfung und Zustimmung durch das verbundene Konto an. | | `offer_complete` | Bestätigt, dass das Finanzierungsangebot eingereicht wurde und der Antragsprozess abgeschlossen ist. | #### Einschränkungen für einzelne Schritte - Das StepChange-Objekt dient ausschließlich der Analyse. - Schritte können in beliebiger Reihenfolge angezeigt und wiederholt werden. - Die Liste der gültigen Schrittbezeichnungen kann jederzeit und ohne Vorankündigung geändert werden. ## Umgang mit Fehlern beim Laden Prüfen Sie nach dem Rendern der Komponente, wie Sie mit [Fehlern beim Laden umgehen](https://docs.stripe.com/connect/get-started-connect-embedded-components.md?platform=web#reacting-to-load-errors), um sicherzustellen, dass Ihre Integration Fälle, in denen Komponenten nicht geladen werden können, reibungslos bewältigen kann. ## Komponente zur Prüfung einreichen Um eine der Capital-Komponenten im Live-Modus verwenden zu können, müssen Stripe und unsere Finanzpartner alle für Kund/innen sichtbaren Inhalte prüfen und genehmigen, die sich auf Stripe Capital beziehen: 1. [Erstellen Sie ein Testangebot in einer Sandbox](https://docs.stripe.com/capital/testing.md#create-offer) und legen Sie den Status des Angebots auf `delivered` fest. Verwenden Sie dieses Testangebot zur Vorschau des Anmeldeformulars auf der Website oder im Dashboard Ihrer Plattform. 1. Erfassung einer Vorschau des Sandbox-Angebots und der Anzeige der eingebetteten Komponente auf der Nutzeroberfläche Ihrer Plattform (z. B. Screenshots oder ein aufgezeichnetes Video). 1. [Übermitteln Sie die Vorschau an Stripe](https://form.asana.com/?k=8K51UWmWhttehNFD5qBLdg&d=974470123217835). Nach der Genehmigung können Sie die Komponente mit Stripe im Live-Modus verwenden. ## Optional: Zusätzliche eingebettete Komponenten Die Promo-Komponente ist eine von mehreren [eingebetteten Komponenten](https://docs.stripe.com/capital/embedded-component-integration.md#select-components), die für Capital für Plattformen verfügbar sind. Sie können beispielsweise die [Capital Finanzierungs-Komponente](https://docs.stripe.com/connect/supported-embedded-components/capital-financing.md) einbetten, mit der Ihre verbundenen Konten ihre Zahlungen verwalten und Transaktionen anzeigen können. ## See also - [Einrichten einer Integration für eingebettete Komponenten](https://docs.stripe.com/capital/embedded-component-integration.md)