通知バナー

連結アカウントの未完了のタスクをリストする通知バナーを表示します。タスクには、リスクを伴う介入や、決済の受け付けや入金の受け取りなど、アカウントの機能に関する未対応の要件が含まれる場合があります。このコンポーネントは、ステータスや機能に影響を与える可能性のある未解決のタスクを通知し、連結アカウントがアクティブなステータスを維持できるように支援します。バナーは、連結アカウントがリスクの介入に対応するか、現在期日がきている要件を提供する必要がある場合にのみ表示されます。

要件の収集オプション

通知バナーコンポーネントを導入する際に collectionOptions 属性を使用することで、currently_due または eventually_due 要件の収集と、今後の要件の統合を制御できます。

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 enabled, this option requires user authentication. You can opt out of Stripe user authentication with the disable_stripe_user_authentication parameter.

Disable Stripe user authentication

Use the disable_stripe_user_authentication feature to control whether the component requires Stripe user authentication. By default, this parameter is false when external_account_collection is true and true otherwise. Only platforms responsible for collecting updated information when requirements are due or change (including Custom accounts) can disable Stripe authentication.

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.

アカウントセッションを作成する

アカウントセッションの作成時に、components パラメーターで notification_banner を指定して、通知バナーを有効にします。

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

通知バナーコンポーネントを表示する

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

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

カスタムのバナーの動作を設定する

バナーに通知が含まれる場合、または通知に何らかのアクションが必要な場合に、カスタムの動作を設定することができます。これを行うには onNotificationsChange を使用してカスタムのコールバック関数を設定します。

// 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);

テスト

このコンポーネントをテスト環境でテストするには、アカウントの確認に失敗したり、要件を生成したりする様々なテスト入力をフィールドに指定します。たとえば、アカウント管理コンポーネントを使用して、個人の住所の line1 に address_no_match と入力すると、住所の不一致をトリガーできます。本番環境では、アカウントにバナーアイテムがない場合は非表示になるため、このコンポーネントが想定通りに機能しているかの確認が困難になる場合があります。構築済みのシステムが機能しているかどうかは、以下を行って検証可能です。

• onNotificationsChange を使用して、response.total がゼロであることを確認するコールバックを設定します
• ローダー開始ハンドラを使用して、コンポーネントがコンテンツなしで表示されることを確認します