ToastNur Dashboard

Nutzer/innen über den temporären Status informieren.

SDK-Version

So fügen Sie die Toast-Komponente zu Ihrer App hinzu:

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

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

Machen Sie einen Toast am Ende Ihrer Ansicht, um die Nutzer/innen über den Status einer Aktion zu informieren. Beispielsweise kann ein Toast einem Nutzer/einer Nutzerin anzeigen, ob ein API-Aufruf erfolgreich war oder fehlgeschlagen ist.

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

Die Funktion showToast() akzeptiert die zwei Argumente message und options. Die Funktion ist wie folgt definiert:

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;
}>;

Toastnachrichten dürfen nicht länger als 30 Zeichen sein und nicht leer sein. Wenn eine Nachricht zu lang oder leer ist, protokolliert die Konsole einen Fehler.

Toasts werden, außer sie sind vom Typ pending, automatisch geschlossen.

Ist ausstehend	Hat Aktion	Timeout
`false`	`false`	4s
`false`	`true`	6s
`true`	`false`	Keine
`true`	`true`	Keine

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

Toasts können den/die Nutzer/in auch auffordern, eine Aktion durchzuführen. Durch Klicken auf die Aktionsschaltfläche wird der Toast automatisch geschlossen.

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

ToastNur Dashboard

Nutzer/innen über den temporären Status informieren.

Siehe auch