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.

External account collection

Use the external_account_collection feature to control whether the component collects external account information. This parameter is enabled by default, and only platforms responsible for collecting updated information when requirements are due or change (including Custom accounts) can disable it. When external_account_collection is enabled, user authentication is required. You can opt out of Stripe user authentication with the disable_stripe_user_authentication parameter.

Disable Stripe user authentication

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.

We recommend implementing 2FA or equivalent security measures as a best practice. For account configurations that support this feature, such as Custom accounts, you assume liability for connected accounts if they can’t pay back negative balances.

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.