Message transitoireDashboard uniquement

Informez les utilisateurs d'un état temporaire.

Version du SDK

Pour ajouter le composant Toast à votre application :

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

const App = () => {
  useEffect(() => {
    showToast('Changes saved', {type: "success"});
  }, [])
};

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.

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 :

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

Les messages transitoires ne peuvent pas comporter plus de 30 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

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.

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`...
}

Message transitoireDashboard uniquement

Informez les utilisateurs d'un état temporaire.

Voir aussi