通知バナー
リスク介入とアカウント登録要件に対する必要な対応を示すバナーを表示します。
連結アカウントの未完了のタスクをリストする通知バナーを表示します。タスクには、リスクを伴う介入や、決済の受け付けや入金の受け取りなど、アカウントの機能に関する未対応の要件が含まれる場合があります。このコンポーネントは、ステータスや機能に影響を与える可能性のある未解決のタスクを通知し、連結アカウントがアクティブなステータスを維持できるように支援します。バナーは、連結アカウントがリスクの介入に対応するか、現在期日がきている要件を提供する必要がある場合にのみ表示されます。
要件の収集オプション![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
通知バナーコンポーネントを導入する際に collectionOptions
属性を使用することで、currently_due
または eventually_due
要件の収集と、今後の要件の統合を制御できます。
外部口座の収集![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
external_account_collection 機能を使用して、通知バナーコンポーネントで外部口座情報を収集するかどうかを制御します。このパラメーターはデフォルトで有効になっており、要件が期限切れになったときや変更されたときに最新情報を収集する責任を負うプラットフォーム (Custom アカウントを含む) のみが無効にできます。有効になると、このオプションにはユーザー認証が必要です。
アカウントセッションを作成する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
アカウントセッションの作成時に、components
パラメーターで notification_banner
を指定して、通知バナーを有効にします。
curl https://api.stripe.com/v1/account_sessions \
-u "sk_test_4eC39HqLyjWDarjtT1zdp7dc
:" \
-d account= \
-d "components[notification_banner][enabled]"=true \
-d "components[notification_banner][features][external_account_collection]"=true
通知バナーコンポーネントを表示する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
const notificationBanner = stripeConnectInstance.create('notification-banner');
container.appendChild(notificationBanner);
メソッド | タイプ | 説明 | デフォルト |
---|
setCollectionOptions | { fields: 'currently_due' | 'eventually_due', future_requirements: 'omit' | 'include' } | currently_due または eventually_due の要件の収集をカスタマイズし、future requirements (今後の要件) を含めるかどうかを制御します。eventually_due を指定すると、eventually_due と currently_due の両方の要件が収集されます。 | {fields: 'currently_due', futureRequirements: 'omit'} | |
カスタムのバナーの動作を設定する![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
バナーに通知が含まれる場合、または通知に何らかのアクションが必要な場合に、カスタムの動作を設定することができます。これを行うには onNotificationsChange
を使用してカスタムのコールバック関数を設定します。
<h1 id="notification-banner-action-warning"></h1>
<div id="notification-banner-container"></div>
const handleNotificationsChange = (response) => {
const warning = document.getElementById("notification-banner-action-warning");
if (response.actionRequired > 0) {
warning.style.display = "block";
warning.textContent =
"You must resolve the notifications on this page before proceeding.";
} else if (response.total > 0) {
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);
方法 | 説明 | 変数 |
---|
setOnNotificationsChange | ユーザーがコールバック関数でオプションのカスタム動作を指定できるようにします。 | response.total : バナー内の通知の合計数response.actionRequired : ユーザーのアクションが必要な通知の数
|
テスト![](https://b.stripecdn.com/docs-statics-srv/assets/fcc3a1c24df6fcffface6110ca4963de.svg)
このコンポーネントをテスト環境でテストするには、アカウントの確認に失敗したり、要件を生成したりする様々なテスト入力をフィールドに指定します。たとえば、アカウント管理コンポーネントを使用して、個人の住所の line1
に address_no_match
と入力すると、住所の不一致をトリガーできます。本番環境では、アカウントにバナーアイテムがない場合は非表示になるため、このコンポーネントが想定通りに機能しているかの確認が困難になる場合があります。構築済みのシステムが機能しているかどうかは、以下を行って検証可能です。
onNotificationsChange
を使用して、response.total
がゼロであることを確認するコールバックを設定します- ローダー開始ハンドラを使用して、コンポーネントがコンテンツなしで表示されることを確認します