Benachrichtigungsbanner

Rendert ein Benachrichtigungsbanner, in dem offene Aufgaben aufgelistet sind, die sich auf den Status oder die Funktionen eines verbundenen Kontos auswirken können. Aufgaben können Risikointerventionen oder ausstehende Anforderungen für Kontofunktionen umfassen, wie z. B. die Annahme von Zahlungen und Auszahlungen. Das Banner wird nur gerendert, wenn das verbundene Konto nach dem ersten Onboarding auf Risikointerventionen reagieren oder aktuell fällige Anforderungen bereitstellen muss.

Optionen für die Erfassung von Anforderungen

Sie können die Erfassung der Anforderungen currently_due oder eventually_due sowie die Einbeziehung zukünftiger Anforderungen steuern, indem Sie das Attribut collectionOptions verwenden, wenn Sie die Benachrichtigungsbanner-Komponente integrieren.

Erfassung externer Konten

Verwenden Sie die Funktion external_account_collection, um zu steuern, ob die Komponente externe Kontoinformationen erfasst. Dieser Parameter ist standardmäßig aktiviert und nur Plattformen, die für die Erfassung aktualisierter Informationen verantwortlich sind, wenn Anforderungen fällig sind oder sich ändern (einschließlich Custom-Konten), können ihn deaktivieren. Wenn external_account_collection aktiviert ist, ist eine Nutzerauthentifizierung erforderlich. Sie können die Stripe-Nutzerauthentifizierung mit dem Parameter disable_stripe_user_authentication deaktivieren.

Stripe-Nutzerauthentifizierung deaktivieren

Verwenden Sie die Funktion disable_stripe_user_authentication, um zu steuern, ob für die Komponente eine Nutzerauthentifizierung durch Stripe erforderlich ist. Der Standardwert ist das Gegenteil des Werts external_account_collection. Wenn Sie z. B. external_account_collection nicht festlegen, wird der Wert standardmäßig „true“ und disable_stripe_user_authentication standardmäßig „false“. Dieser Wert kann nur wahr sein für Konten, bei denen controller.requirement_collection gleich application ist.

Wir empfehlen die Implementierung von 2FA oder gleichwertigen Sicherheitsmaßnahmen als Best Practice. Bei Kontokonfigurationen, die diese Funktion unterstützen, wie z. B. Custom-Konten, übernehmen Sie die Haftung für verbundene Konten, wenn diese Negativsalden nicht zurückzahlen können.

Kontositzung erstellen

Beim Erstellen einer Kontositzung aktivieren Sie das Benachrichtigungsbanner, indem Sie notification_banner im Parameter components angeben.

curl https://api.stripe.com/v1/account_sessions \
  -u "
sk_test_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -d account=
{{CONNECTED_ACCOUNT_ID}} \
  -d "components[notification_banner][enabled]"=true \
  -d "components[notification_banner][features][external_account_collection]"=true

Benachrichtigungsbanner-Komponente rendern

// Include this element in your HTML
const notificationBanner = stripeConnectInstance.create('notification-banner');
container.appendChild(notificationBanner);

// Optional:
// notificationBanner.setCollectionOptions({
//   fields: 'eventually_due',
//   futureRequirements: 'include',
// })

Nnutzerdefiniertes Bannerverhalten konfigurieren

Sie können nutzerdefiniertes Verhalten konfigurieren, zum Beispiel unterschiedliche Margen, wenn das Banner Benachrichtigungen enthält oder wenn die Benachrichtigungen eine Aktion erfordern. Dazu legen Sie mit onNotificationsChange eine nutzerdefinierte Callback-Funktion fest.

// index.html

<h1 id="notification-banner-action-warning"></h1>

<div id="notification-banner-container"></div>


// index.js
const handleNotificationsChange = (response) => {
  const warning = document.getElementById("notification-banner-action-warning");

  if (response.actionRequired > 0) {
    // Do something related to required actions, such as adding margins to the banner container or tracking the current number of notifications.
    warning.style.display = "block";
    warning.textContent =
      "You must resolve the notifications on this page before proceeding.";
  } else if (response.total > 0) {
    // Do something related to notifications that don't require action.
    warning.style.display = "block";
    warning.textContent = "The items below are in review.";
  } else {
    warning.style.display = "none";
  }
};


const container = document.getElementById('notification-banner-container');
const notificationBanner = stripeConnectInstance.create('notification-banner');
notificationBanner.setOnNotificationsChange(handleNotificationsChange);
container.appendChild(notificationBanner);

Testen

Um diese Komponente in einer Sandbox zu testen, machen Sie verschiedene Testeingaben für Felder, deren Verifizierungen fehlschlagen, oder generieren Anforderungen für das Konto. Sie können beispielsweise die Kontoverwaltungskomponente verwenden, um address_no_match in line1 der Adresse einer Person einzugeben, um eine Nichtübereinstimmung der Adresse auszulösen. In der Produktion kann es sich schwierig gestalten, zu überprüfen, ob diese Komponente wie erwartet funktioniert, da sie ausgeblendet ist, wenn ein Konto keine Banner-Elemente enthält. Um zu überprüfen, ob Ihre Integration funktioniert, können Sie Folgendes tun:

• Legen Sie Rückruf mit onNotificationsChange fest, der bestätigt, dass response.total Null ist.
• Bestätigen Sie, dass die Komponente ohne Inhalt angezeigt wird, indem Sie einen Loader-Start-Handler verwenden

Onboarding von Konten

Verwenden Sie das Benachrichtigungsbanner, nachdem das Konto das Konto-Onboarding hat und details_submitted hat. Das Banner rendert keine Nutzeroberfläche, wenn details_submitted für das Konto fehlt.