コンテンツにスキップ
アカウント作成/サインイン
Stripe ドキュメントのロゴ
/
アカウントを作成サインイン
概要
アカウント管理
アカウントのダッシュボードを設定する
決済処理
プラットフォーム管理

通知バナー

リスク介入とアカウント登録要件に対する必要な対応を示すバナーを表示します。

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

要件の収集オプション

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

外部口座の収集

external_account_collection 機能を使用して、コンポーネントが外部アカウント情報を収集するかどうかを制御します。このパラメーターはデフォルトで有効になっています。external_account_collection を有効にすると、ユーザー認証 が必要になります。disable_stripe_user_authentication パラメーターを使用して、Stripe ユーザー認証をオプトアウトできます。

Stripe ユーザー認証を無効にする

disable_stripe_user_authentication 機能を使用して、コンポーネントで Stripe ユーザー認証が必要かどうかを制御します。

  • デフォルトでは、disable_stripe_user_authentication は external_account_collection の値とは逆です。
  • external_account_collection が設定されていない場合、デフォルトは true になるため、disable_stripe_user_authentication はデフォルトで false になります。
  • controller.requirement_collection が stripe の場合、どちらの値もデフォルトで false になります。

この値は、controller.requirement_collection が application のアカウントにのみ当てはまります。

ベストプラクティスとして、2 段階認証または同等のセキュリティ対策を導入することをお勧めします。この機能をサポートするアカウント (Custom アカウントなど) の設定により、連結アカウントがマイナス残高を返済できない場合は、お客様がそのアカウントに代わって責任を負います。

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

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

Command Line
cURL
Stripe CLI
Ruby
Python
PHP
Java
Node.js
Go
.NET
No results
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

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

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

// Optional:
// notificationBanner.setCollectionOptions({
//   fields: 'eventually_due',
//   futureRequirements: 'include',
// })
メソッドタイプ説明デフォルト
setCollectionOptions{ fields: 'currently_due' | 'eventually_due', future_requirements: 'omit' | 'include' }eventually_due 要件を収集するかどうか、および future_requirements を含めるかどうかを指定します。eventually_due を指定すると、eventually_due 要件と currently_due 要件の両方が収集されます。{fields: 'currently_due', futureRequirements: 'omit'}

setOnNotificationsChange

({total: number, actionRequired: number}) => void

ユーザーがコールバック関数でオプションのカスタム動作を指定できるようにします。

  • response.total: バナー内の通知の合計数
  • response.actionRequired: ユーザーのアクションが必要な通知の数

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

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

notification-banner.js
JavaScript
React
No results
// 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 は表示されません。

このページの内容