トーストダッシュボードのみ

ユーザーに一時的なステータスを通知します。

SDK バージョン

アプリにトーストコンポーネントを追加するには、以下の手順を実行します。

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

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

ビューの下部にトーストをレンダリングしてアクションのステータスをユーザーに通知します。たとえば、トーストで、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`...
}

showToast() 関数は、message と options の 2 つの引数を使用します。この関数は次のように定義されます。

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

トーストのメッセージは 30 文字を超えたり、空にすることはできません。メッセージが長すぎる場合や空の場合は、コンソールにエラーが記録されます。

タイプが pending の場合を除き、トーストは自動的に消えます。

Pending の場合	アクションあり	タイムアウト
`false`	`false`	4 秒
`false`	`true`	6 秒
`true`	`false`	なし
`true`	`true`	なし

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

トーストでユーザーにアクションを促すこともできます。アクションボタンがクリックされると、トーストは自動的に消えます。

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

トーストダッシュボードのみ

ユーザーに一時的なステータスを通知します。

参照情報