# Stripe Apps の Toast コンポーネント

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

# 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)