Komponente Capital-WerbekachelÖffentliche Vorschau

Installieren Sie eine Beta-Version der Stripe SDKs, um Kontositzungen für Komponenten der privaten Vorschau zu erstellen:

• Ruby >=15.5.0-beta.1
• Python >=12.5.0b1
• PHP >=17.6.0-beta.1
• Node >=18.5.0-beta.1
• .NET >=48.5.0-beta.1
• Java >=29.5.0-beta.1
• Go >=82.5.0-beta.1

Verwenden Sie die Beta-Version der clientseitigen Stripe-Bibliotheken, um Komponenten der privaten Vorschau zu rendern:

Wenn Sie die in Stripe eingebetteten Komponenten nicht bereits in Ihrem Anmeldeformular verwenden, initialisieren Sie Connect.js, bevor Sie die Promo-Kachel-Komponente integrieren.

Geben Sie in Ihrer Anfrage zum Erstellen einer Kontositzung capital_financing_promotion im Parameter components an.

# Set your secret key. Remember to switch to your live secret key in production.
# See your keys here: https://dashboard.stripe.com/apikeys
# This example uses the beta SDK.

curl https://api.stripe.com/v1/account_sessions \
  -u sk_test_26PHem9AhJZvU623DfE1x4sd: \
  -d "account"="{{CONNECTED_ACCOUNT_ID}}" \
  -d "components"='{"capital_financing_promotion": {"enabled": true}}' \
  -H "Stripe-Version: 2025-04-30.basil; embedded_connect_beta=v2;"

Stellen Sie die Capital-Promo-Kachelkomponente im Frontend dar.

Die setLayout-Methode steuert, ob die full eingebettete Komponente oder das kleinere Banner angezeigt werden soll. Dadurch wird die vertikale Größe der Komponente stark reduziert, um sie zusammen mit anderen Inhalten auf Ihrer Website oder dem Dashboard Ihrer Plattform zu stapeln.

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);

Sie können das Erscheinungsbild eingebetteter Komponenten anpassen. Die Capital Finanzierungsförderungskomponente unterstützt eine Reihe von Designoptionen, die zu Ihrem Designsystem passen. Dadurch wird sichergestellt, dass sich die Promo-Kachel wie ein nativer Teil Ihrer Plattform und nicht wie ein Element eines Drittanbieters anfühlt.

Sie können Farben, Typografie, Rahmenradius und andere visuelle Elemente über die Connect.js-Konfiguration anpassen. Sie können auch vor der Implementierung verschiedene Optionen ausprobieren, indem Sie das Vorschau-Tool für die Darstellung eingebetteter Komponenten verwenden.

Für eine detailliertere Kontrolle können Sie mehrere Connect.js-Instanzen initialisieren, wenn Ihre Promo-Kachel ein anderes Design als andere eingebettete Komponenten erfordert. Mit diesem Ansatz können Sie unterschiedliche Darstellungskonfigurationen für verschiedene Komponenten auf Ihrer Plattform beibehalten.

Weitere Informationen zu zusätzlichen Konfigurationsoptionen für diese Komponente finden Sie in der Dokumentation zur Capital-Finanzierung.

Fügen Sie die Promo-Kachel auf Ihrer Startseite oder in der Seitenleiste dieser Seite hinzu, um die größte Marketingwirkung zu erzielen. Positionieren Sie die Kachel dort, wo verbundene Konten häufig navigieren, um die Sichtbarkeit und das Engagement zu maximieren. Bewerten Sie außerdem, wie Ihre verbundenen Konten mit Ihrer Plattform interagieren, um die Orte zu finden, die für Ihr Use case am besten geeignet sind (z. B. Seiten mit hoher Sichtbarkeit oder Seiten, die eine Entscheidung erfordern).

Wenn mehrere Nutzer/innen Zugriff auf ein verbundenes Konto haben, sollten Sie die Promo-Kachel nur einem angemeldeten Inhaber/in oder Administrator des Kontos anzeigen (der ein Finanzierungsangebot prüfen und beantragen kann).

Die Komponente passt ihre Anzeige ausgehend vom Finanzierungsstatus des verbundenen Kontos an:

• Mit aktivem Angebot: Zeigt alle Angebotsdetails mit der Schaltfläche Anmeldeformular starten an.
• Aktive Finanzierung läuft: Die Komponente wird nicht angezeigt (gibt null zurück).
• Keine aktive Finanzierung: Zeigt allgemeine Informationen zur Berechtigung zum Kreditprogramm an.

Darüber hinaus können Sie die Promo-Kachel-Komponente vollständig ausblenden, wenn kein förderfähiges Finanzierungsangebot vorliegt. Verwenden Sie dazu den verfügbaren Rückruf onEligibleFinancingOfferLoaded:

// Include this element in your HTML
const capitalFinancingPromotion = stripeConnectInstance.create('capital-financing-promotion');
capitalFinancingPromotion.setLayout('banner');
container.appendChild(capitalFinancingPromotion);
capitalFinancingPromotion.setOnEligibleFinancingOfferLoaded(({productType}) => {
  switch (productType) {
    case 'none':
      capitalFinancingPromotion.parentElement.style.display = 'none';
      break;
    case 'standard':
    case 'refill':
      capitalFinancingPromotion.parentElement.style.display = 'block';
      break;
  }
});

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 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.
2. 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).
3. Übermitteln Sie die Vorschau an Stripe. Nach der Genehmigung können Sie die Komponente mit Stripe im Live-Modus verwenden.