# Composant Toast pour les applications Stripe

Informez les utilisateurs d'un état temporaire.

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/toast?app-sdk-version=8.

Pour ajouter le composant Toast à votre application :

```js
import { showToast } from "@stripe/ui-extension-sdk/utils";
```

Affichez un message transitoire en bas de votre vue pour informer l’utilisateur de l’état d’une action, par exemple pour lui signaler la réussite ou de l’échec d’un appel à l’API.

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = () => {
    fetch(...)
      .then((response) => {
        showToast("Invoice updated", {type: "success"})
        return response.json()
      })
      .catch(() => {
        showToast("Invoice could not be updated", {type: "caution"})
      })
  }

  // Use the `handleClick`...
}
```

La fonction `showToast()` accepte deux arguments : `message` et `options`. La fonction est définie comme suit :

```ts
type ToastType = "success" | "caution" | "pending" | undefined;
type ToastOptions = { type?: ToastType; action?: string; onAction: () => void; }
const showToast: (message: string, options?: ToastOptions) => Promise<{
    update: (updateMessage: string, updateOptions?: ToastOptions) => void;
    dismiss: () => void;
}>;
```

Les messages transitoires ne peuvent pas comporter plus de 30&nbsp;caractères ni être vides. Si un message est trop long ou vide, la console enregistre une erreur.

Les messages transitoires se ferment automatiquement, sauf s’ils sont de type `pending`.

| En attente | A une action | Délai expiré |
| ---------- | ------------ | ------------ |
| `false`    | `false`      | 4s           |
| `false`    | `true`       | 6s           |
| `true`     | `false`      | Aucune       |
| `true`     | `true`       | Aucune       |

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = async () => {
    const { dismiss, update } = await showToast("Refreshing data", {
      type: "pending",
    });
    try {
      await refreshData();
      dismiss();
    } catch (error) {
      update("Data could not be refreshed", { type: "caution" });
    }
  }

  // Use the `handleClick`...
}
```

Les messages transitoires peuvent également inviter l’utilisateur à effectuer une action. Cliquer sur le bouton d’action permet alors de fermer automatiquement le message transitoire.

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = async () => {
    let timeout;
    const { dismiss } = await showToast('Message "sent"', {
      action: "Undo",
      onAction: () => {
        clearTimeout(timeout);
        showToast('Message "unsent"');
      },
    });
    timeout = setTimeout(() => {
      sendMessage();
      dismiss();
    }, 3000);
  }

  // Use the `handleClick`...
}
```


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/toast?app-sdk-version=9.

Pour ajouter le composant Toast à votre application&nbsp;:

```js
import { showToast } from "@stripe/ui-extension-sdk/utils";
```

Affichez un message transitoire en bas de votre vue pour informer l’utilisateur de l’état d’une action, par exemple pour lui signaler la réussite ou de l’échec d’un appel à l’API.

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = () => {
    fetch(...)
      .then((response) => {
        showToast("Invoice updated", {type: "success"})
        return response.json()
      })
      .catch(() => {
        showToast("Invoice could not be updated", {type: "caution"})
      })
  }

  // Use the `handleClick`...
}
```

La fonction `showToast()` accepte deux arguments&nbsp;: `message` et `options`. La fonction est définie comme suit&nbsp;:

```ts
type ToastType = "success" | "caution" | "pending" | undefined;
type ToastOptions = { type?: ToastType; action?: string; onAction: () => void; }
const showToast: (message: string, options?: ToastOptions) => Promise<{
    update: (updateMessage: string, updateOptions?: ToastOptions) => void;
    dismiss: () => void;
}>;
```

Les messages transitoires ne peuvent pas comporter plus de 30&nbsp;caractères ni être vides. Si un message est trop long ou vide, la console enregistre une erreur.

Les messages transitoires se ferment automatiquement, sauf s’ils sont de type `pending`.

| En attente | A une action | Délai expiré |
| ---------- | ------------ | ------------ |
| `false`    | `false`      | 4s           |
| `false`    | `true`       | 6s           |
| `true`     | `false`      | Aucune       |
| `true`     | `true`       | Aucune       |

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = async () => {
    const { dismiss, update } = await showToast("Refreshing data", {
      type: "pending",
    });
    try {
      await refreshData();
      dismiss();
    } catch (error) {
      update("Data could not be refreshed", { type: "caution" });
    }
  }

  // Use the `handleClick`...
}
```

Les messages transitoires peuvent également inviter l’utilisateur à effectuer une action. Cliquer sur le bouton d’action permet alors de fermer automatiquement le message transitoire.

```ts
import {showToast} from '@stripe/ui-extension-sdk/utils';

const App = () => {
  const handleClick = async () => {
    let timeout;
    const { dismiss } = await showToast('Message "sent"', {
      action: "Undo",
      onAction: () => {
        clearTimeout(timeout);
        showToast('Message "unsent"');
      },
    });
    timeout = setTimeout(() => {
      sendMessage();
      dismiss();
    }, 3000);
  }

  // Use the `handleClick`...
}
```


## See also

- [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md)
- [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md)
- [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)