# Bannière de notification

Affichez une bannière qui énumère les actions requises pour les interventions en cas de risque et les exigences en matière d'inscription des utilisateurs.

Affiche une bannière de notification qui répertorie les tâches en cours susceptibles d’affecter l’état ou les fonctionnalités d’un compte connecté. Les tâches peuvent concerner des interventions en matière de gestion des risques ou des exigences à remplir associées aux fonctionnalités de compte, telles que l’acceptation de paiements et de virements. La bannière ne s’affiche que lorsque le compte connecté doit répondre à des interventions liées aux risques ou fournir des exigences en attente de résolution [après l’inscription initiale](https://docs.stripe.com/connect/supported-embedded-components/notification-banner.md#account-onboarding).

Note: The following is a preview/demo component that behaves differently than live mode usage with real connected accounts. The actual component has more functionality than what might appear in this demo component. For example, for connected accounts without Stripe dashboard access (custom accounts), no user authentication is required in production.

## Options de collecte des exigences

Vous pouvez contrôler la collecte des exigences `currently_due` ou `eventually_due` et l’ajout des [exigences futures](https://docs.stripe.com/connect/handle-verification-updates.md) en utilisant l’attribut `collectionOptions` lors de l’intégration du composant bannière de notification.

## Collecte de comptes externes

Utilisez la fonctionnalité [external_account_collection](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-notification_banner-features-external_account_collection) pour contrôler si le composant collecte des informations sur les comptes externes. Ce paramètre est activé par défaut. Lorsque le paramètre `external_account_collection` est activé, [l’authentification de l’utilisateur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#user-authentication-in-connect-embedded-components) est requise. Vous pouvez désactiver l’authentification utilisateur Stripe à l’aide du paramètre [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-notification_banner-features-disable_stripe_user_authentication).

## Désactiver l’authentification utilisateur Stripe

Utilisez la fonctionnalité [disable_stripe_user_authentication](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-notification_banner-features-disable_stripe_user_authentication) pour contrôler si le composant nécessite l’authentification utilisateur Stripe.

- Par défaut, le paramètre `disable_stripe_user_authentication` est l’opposé de la valeur [external_account_collection](https://docs.stripe.com/api/account_sessions/create.md#create_account_session-components-notification_banner-features-external_account_collection).
- Si vous ne définissez pas le paramètre `external_account_collection`, sa valeur par défaut est vraie, par conséquent, le paramètre `disable_stripe_user_authentication` est défini par défaut sur faux.

- Lorsque le paramètre `controller.requirement_collection` est défini sur `stripe`, les deux valeurs sont définies par défaut sur faux.

Cette valeur ne peut être vraie que pour les comptes où le paramètre `controller.requirement_collection` a la valeur `application`.

Nous vous recommandons de mettre en œuvre l’authentification à deux facteurs ou des mesures de sécurité équivalentes à titre de [bonne pratique](https://docs.stripe.com/connect/risk-management/best-practices.md#prevent-account-take-overs). Pour les configurations de compte qui prennent en charge cette fonctionnalité, comme les comptes Custom, vous assumez la responsabilité des comptes connectés s’ils ne sont pas en mesure de rembourser les [soldes négatifs](https://docs.stripe.com/connect/risk-management/best-practices.md#decide-your-approach-to-negative-balance-liability).

### Créer une session de compte

Lorsque vous [créez une session de compte](https://docs.stripe.com/api/account_sessions/create.md), activez la bannière de notification en spécifiant `notification_banner` dans le paramètre `components`.

```curl
curl https://api.stripe.com/v1/account_sessions \
  -u "<<YOUR_SECRET_KEY>>:" \
  -d "account={{CONNECTEDACCOUNT_ID}}" \
  -d "components[notification_banner][enabled]=true" \
  -d "components[notification_banner][features][external_account_collection]=true"
```

### Afficher le composant de bannière de notification

#### JavaScript

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

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

#### HTML + JS

| Méthode                    | Type                                                                                      | Description                                                                                                                                                                                                                                                                              | Par défaut                                              |
| -------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
| `setCollectionOptions`     | `{ fields: 'currently_due' | 'eventually_due', future_requirements: 'omit' | 'include' }` | Indique s’il faut collecter les exigences `eventually_due` et inclure `future_requirements`. Le fait de spécifier `eventually_due` permet de collecter à la fois les exigences `eventually_due` et `currently_due`.                                                                      | `{fields: 'currently_due', futureRequirements: 'omit'}` |
| `setOnNotificationsChange` | `({total: number, actionRequired: number}) => void`                                       | Permet aux utilisateurs d’indiquer un comportement personnalisé facultatif dans une fonction de rappel.

  - `response.total`&nbsp;: nombre total de notifications dans la bannière
  - `response.actionRequired`&nbsp;: nombre de notifications nécessitant une action de l’utilisateur |                                                         |

#### React

| Propriété React         | Type                                                                                    | Description                                                                                                                                                                                                                                                                                               | Par défaut                                              | Obligatoire ou facultatif |
| ----------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------------- |
| `collectionOptions`     | `{fields: 'currently_due' | 'eventually_due', futureRequirements?: 'omit' | 'include'}` | Indique s’il faut collecter les exigences `eventually_due` et inclure `future_requirements`. Le fait de spécifier `eventually_due` permet de collecter à la fois les exigences `eventually_due` et `currently_due`. Vous ne pouvez pas mettre à jour ce paramètre après l’affichage initial du composant. | `{fields: 'currently_due', futureRequirements: 'omit'}` | facultatif                |
| `onNotificationsChange` | `({total: number, actionRequired: number}) => void`                                     | Permet aux utilisateurs d’indiquer un comportement personnalisé facultatif dans une fonction de rappel.

  - `response.total`&nbsp;: nombre total de notifications dans la bannière
  - `response.actionRequired`&nbsp;: nombre de notifications nécessitant une action de l’utilisateur                  |                                                         | facultatif                |

## Configurer le comportement de la bannière personnalisée

Vous pouvez configurer un comportement personnalisé, tel que des marges différentes lorsque la bannière inclut des notifications ou lorsque les notifications requièrent une action. Pour ce faire, définissez une fonction de rappel personnalisée via `onNotificationsChange`.

#### JavaScript

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

```

## Effectuer des tests

Pour tester ce composant dans un *environnement de test* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes), indiquez différentes [valeurs de test](https://docs.stripe.com/connect/testing.md) dans les champs pour lesquels la vérification échoue ou qui génèrent des exigences sur le compte. Par exemple, vous pouvez utiliser le [composant de gestion des comptes](https://docs.stripe.com/connect/supported-embedded-components/account-management.md) pour saisir `address_no_match` dans `line1` de l’adresse d’une personne afin de déclencher une non-concordance d’adresse. En production, il peut être difficile de vérifier que ce composant fonctionne comme prévu, car il est masqué lorsqu’un compte n’a pas d’éléments de bannière. Pour valider le fonctionnement de votre intégration, vous pouvez&nbsp;:

- Définir un rappel utilisant `onNotificationsChange`, qui vérifie que la valeur de `response.total` est égale à zéro
- Confirmer que le composant est affiché sans contenu à l’aide d’un [gestionnaire de démarrage de chargeur](https://docs.stripe.com/connect/get-started-connect-embedded-components.md#reacting-to-component-display)

## Inscription des comptes

Utilisez la bannière de notification une fois que le compte a terminé son [inscription](https://docs.stripe.com/connect/supported-embedded-components/account-onboarding.md) et soumis les informations [details_submitted](https://docs.stripe.com/api/accounts/object.md#account_object-details_submitted). La bannière n’affichera pas d’interface utilisateur si les informations `details_submitted` ne figurent pas dans le compte.