通知バナー

連結アカウントのステータスや機能に影響を与える可能性のある未解決タスクを一覧表示する通知バナーを表示します。タスクには、リスクの発生や支払いと入金の受け付けなど、アカウント機能に関する未解決の要件が含まれる場合があります。バナーが表示されるのは、連結アカウントがリスクに対応する必要がある場合、または初回登録後に現在期限が到来している要件を知らせる場合に限られます。

要件の収集オプション

通知バナーコンポーネントを導入する際に 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 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

disable_stripe_user_authentication 機能を使用して、コンポーネントで Stripe ユーザー認証が必要かどうかを制御します。デフォルト値は、external_account_collection 値の反対です。たとえば、external_account_collection を設定していない場合、disable_stripe_user_authentication はデフォルトで false になります。この値は、controller.requirement_collection が application であるアカウントに対してのみ true になります。

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_BQokikJOvBiI2HlWgH4olfQ2
:" \
  -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 がゼロであることを確認するコールバックを設定します
• ローダー開始ハンドラを使用して、コンポーネントがコンテンツなしで表示されることを確認します

アカウント登録

通知バナーは、アカウントがアカウント登録を経て details_submitted を取得した後に使用します。アカウントが details_submitted を取得していない場合、バナーに UI は表示されません。