@blocklet/payment-react 1.20.16 → 1.20.18

package/docs/components-business-auto-topup.zh-TW.md

@@ -0,0 +1,187 @@
+# 自動儲值元件
+
+自動儲值功能透過在使用者點數餘額低於指定閾值時自動儲值，確保服務不中斷。此功能由兩個主要元件管理：`AutoTopup`，用於顯示目前的設定；以及 `AutoTopupModal`，提供設定介面。
+
+## 自動儲值工作流程
+
+下圖說明了使用者設定自動儲值功能的典型流程。使用者與 `AutoTopup` 顯示元件互動，該元件會啟動 `AutoTopupModal` 以進行變更。然後，彈出視窗會與後端 API 通訊以儲存設定。
+
+```d2
+direction: down
+
+User: { 
+  shape: c4-person 
+}
+
+Application-UI: {
+  label: "應用程式 UI"
+  shape: rectangle
+
+  AutoTopup-Card: {
+    label: "AutoTopup 元件"
+    shape: rectangle
+  }
+
+  AutoTopup-Modal: {
+    label: "AutoTopupModal"
+    shape: rectangle
+  }
+}
+
+Payment-API: {
+  label: "支付 API"
+  shape: cylinder
+}
+
+User -> Application-UI.AutoTopup-Card: "1. 查看自動儲值狀態"
+Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. 點擊「設定」開啟彈出視窗"
+User -> Application-UI.AutoTopup-Modal: "3. 調整設定並儲存"
+Application-UI.AutoTopup-Modal -> Payment-API: "4. 提交設定" 
+Payment-API -> Payment-API: "5. 儲存設定"
+Payment-API -> Application-UI.AutoTopup-Modal: "6. 回傳成功"
+Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. 呼叫 onSuccess，UI 更新"
+
+```
+
+## AutoTopup
+
+`AutoTopup` 元件是一個顯示卡片，用於展示特定貨幣的自動儲值狀態，並提供設定入口。它支援多種渲染模式以提供靈活性。
+
+### Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `currencyId` | `string` | **必需。** 要管理的點數貨幣 ID。 |
+| `onConfigChange` | `(config: AutoRechargeConfig) => void` | 可選。設定成功更新時觸發的回呼函式。 |
+| `mode` | `'default' \| 'simple' \| 'custom'` | 可選。渲染模式。預設為 `'default'`。<br/>- `default`：一個完整展開的卡片，顯示所有詳細資訊。<br/>- `simple`：一個緊湊、收合的視圖，帶有一個按鈕以展開詳細資訊。<br/>- `custom`：使用 `children` render prop 渲染自訂 UI。 |
+| `sx` | `SxProps` | 可選。應用於元件的自訂 MUI 樣式。 |
+| `children` | `(openModal, config, paymentData, loading) => React.ReactNode` | 可選。僅在 `mode` 為 `'custom'` 時使用的 render prop 函式。它會接收建構自訂介面所需的工具。 |
+
+### 使用方式
+
+#### 簡易模式
+
+這是最常見的使用情境，提供一個緊湊的顯示方式，使用者可以展開以查看更多詳細資訊。
+
+```tsx CreditManagement.tsx icon=logos:react
+import { PaymentProvider, AutoTopup } from '@blocklet/payment-react';
+
+function CreditManagement({ session, currencyId }) {
+  const handleConfigChange = (config) => {
+    console.log('自動儲值設定已更新：', config);
+    // 您可能想在這裡刷新使用者的餘額
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <AutoTopup
+        currencyId={currencyId}
+        mode="simple"
+        onConfigChange={handleConfigChange}
+        sx={{ mt: 2 }}
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+#### 自訂模式
+
+若要完全控制 UI，請使用帶有 render prop 的 `custom` 模式。這讓您可以將自動儲值狀態和設定觸發器無縫整合到您現有的版面中。
+
+```tsx CustomAutoTopupDisplay.tsx icon=logos:react
+import { PaymentProvider, AutoTopup } from '@blocklet/payment-react';
+import { Button, Card, CardContent, Typography } from '@mui/material';
+
+function CustomAutoTopupDisplay({ session, currencyId }) {
+  return (
+    <PaymentProvider session={session}>
+      <AutoTopup currencyId={currencyId} mode="custom">
+        {(openModal, config, paymentData, loading) => {
+          if (loading) return <div>正在載入設定...</div>;
+
+          return (
+            <Card variant="outlined">
+              <CardContent>
+                <Typography variant="h6">智慧自動儲值</Typography>
+                {config?.enabled ? (
+                  <Typography color="success.main">
+                    狀態：啟用中
+                  </Typography>
+                ) : (
+                  <Typography color="text.secondary">
+                    狀態：未啟用
+                  </Typography>
+                )}
+                <Button onClick={openModal} variant="contained" sx={{ mt: 2 }}>
+                  {config?.enabled ? '修改設定' : '立即設定'}
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        }}
+      </AutoTopup>
+    </PaymentProvider>
+  );
+}
+```
+
+## AutoTopupModal
+
+`AutoTopupModal` 是一個對話框元件，允許使用者啟用、停用和設定自動儲值功能的所有方面，包括觸發閾值、購買金額和支付方式。
+
+### Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | **必需。** 控制彈出視窗是否可見。 |
+| `onClose` | `() => void` | **必需。** 關閉彈出視窗的回呼函式。 |
+| `currencyId` | `string` | **必需。** 正在設定的點數貨幣 ID。 |
+| `customerId` | `string` | 可選。客戶的 DID。預設為 `PaymentProvider` session 中的使用者。 |
+| `onSuccess` | `(config: AutoRechargeConfig) => void` | 可選。設定成功儲存後觸發的回呼。 |
+| `onError` | `(error: any) => void` | 可選。提交過程中發生錯誤時觸發的回呼。 |
+| `defaultEnabled` | `boolean` | 可選。若為 `true`，當為新設定開啟彈出視窗時，「啟用自動儲值」的開關將預設為開啟。 |
+
+### 使用方式
+
+這是一個完整的範例，說明如何管理 `AutoTopupModal` 的狀態並處理其回呼。
+
+```tsx AutoRechargeSettings.tsx icon=logos:react
+import { PaymentProvider, AutoTopupModal } from '@blocklet/payment-react';
+import { useState } from 'react';
+import { Button } from '@mui/material';
+
+function AutoRechargeSettings({ session, currencyId }) {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const handleSuccess = (config) => {
+    console.log('設定已成功儲存：', config);
+    setModalOpen(false);
+    // 可選，顯示成功提示或重新整理資料
+  };
+
+  const handleError = (error) => {
+    console.error('儲存設定失敗：', error);
+    // 可選，向使用者顯示錯誤訊息
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <Button variant="contained" onClick={() => setModalOpen(true)}>
+        設定自動儲值
+      </Button>
+
+      <AutoTopupModal
+        open={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        currencyId={currencyId}
+        onSuccess={handleSuccess}
+        onError={handleError}
+        defaultEnabled={true}
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+此設定提供了一種強大的方式來管理自動儲值功能，讓使用者可以控制，同時確保維持其服務點數的流暢體驗。

package/docs/components-business-auto-topup.zh.md

@@ -0,0 +1,187 @@
+# 自动充值组件
+
+自动充值功能通过在用户信用余额低于指定阈值时自动为其充值，确保服务不中断。该功能由两个主要组件管理：`AutoTopup`，用于显示当前配置；以及 `AutoTopupModal`，用于提供设置界面。
+
+## 自动充值工作流
+
+下图展示了配置自动充值功能的典型用户流程。用户与 `AutoTopup` 显示组件交互，该组件会启动 `AutoTopupModal` 以进行更改。然后，该模态框与后端 API 通信以保存配置。
+
+```d2
+direction: down
+
+User: { 
+  shape: c4-person 
+}
+
+Application-UI: {
+  label: "应用程序 UI"
+  shape: rectangle
+
+  AutoTopup-Card: {
+    label: "AutoTopup 组件"
+    shape: rectangle
+  }
+
+  AutoTopup-Modal: {
+    label: "AutoTopupModal"
+    shape: rectangle
+  }
+}
+
+Payment-API: {
+  label: "支付 API"
+  shape: cylinder
+}
+
+User -> Application-UI.AutoTopup-Card: "1. 查看自动充值状态"
+Application-UI.AutoTopup-Card -> Application-UI.AutoTopup-Modal: "2. 点击“配置”打开模态框"
+User -> Application-UI.AutoTopup-Modal: "3. 调整设置并保存"
+Application-UI.AutoTopup-Modal -> Payment-API: "4. 提交配置" 
+Payment-API -> Payment-API: "5. 保存配置"
+Payment-API -> Application-UI.AutoTopup-Modal: "6. 返回成功"
+Application-UI.AutoTopup-Modal -> Application-UI.AutoTopup-Card: "7. 调用 onSuccess，UI 更新"
+
+```
+
+## AutoTopup
+
+`AutoTopup` 组件是一个显示卡片，用于展示特定货币的当前自动充值状态，并提供配置入口。它支持多种渲染模式以实现灵活性。
+
+### 属性
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `currencyId` | `string` | **必需。** 要管理的信用货币的 ID。 |
+| `onConfigChange` | `(config: AutoRechargeConfig) => void` | 可选。配置成功更新时触发的回调函数。 |
+| `mode` | `'default' \| 'simple' \| 'custom'` | 可选。渲染模式。默认为 `'default'`。<br/>- `default`：完全展开的卡片，显示所有详细信息。<br/>- `simple`：紧凑的折叠视图，带有一个展开详情的按钮。<br/>- `custom`：使用 `children` render prop 渲染自定义 UI。 |
+| `sx` | `SxProps` | 可选。应用于组件的自定义 MUI 样式。 |
+| `children` | `(openModal, config, paymentData, loading) => React.ReactNode` | 可选。仅在 `mode` 为 `'custom'` 时使用的 render prop 函数。它接收构建自定义界面所需的工具。 |
+
+### 用法
+
+#### 简单模式
+
+这是最常见的用例，提供一个紧凑的显示，用户可以展开以查看更多详细信息。
+
+```tsx CreditManagement.tsx icon=logos:react
+import { PaymentProvider, AutoTopup } from '@blocklet/payment-react';
+
+function CreditManagement({ session, currencyId }) {
+  const handleConfigChange = (config) => {
+    console.log('自动充值配置已更新：', config);
+    // 你可能需要在此处刷新用户余额
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <AutoTopup
+        currencyId={currencyId}
+        mode="simple"
+        onConfigChange={handleConfigChange}
+        sx={{ mt: 2 }}
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+#### 自定义模式
+
+要完全控制 UI，请使用带有 render prop 的 `custom` 模式。这允许您将自动充值状态和配置触发器无缝集成到现有布局中。
+
+```tsx CustomAutoTopupDisplay.tsx icon=logos:react
+import { PaymentProvider, AutoTopup } from '@blocklet/payment-react';
+import { Button, Card, CardContent, Typography } from '@mui/material';
+
+function CustomAutoTopupDisplay({ session, currencyId }) {
+  return (
+    <PaymentProvider session={session}>
+      <AutoTopup currencyId={currencyId} mode="custom">
+        {(openModal, config, paymentData, loading) => {
+          if (loading) return <div>加载配置中...</div>;
+
+          return (
+            <Card variant="outlined">
+              <CardContent>
+                <Typography variant="h6">智能自动充值</Typography>
+                {config?.enabled ? (
+                  <Typography color="success.main">
+                    状态：已激活
+                  </Typography>
+                ) : (
+                  <Typography color="text.secondary">
+                    状态：未激活
+                  </Typography>
+                )}
+                <Button onClick={openModal} variant="contained" sx={{ mt: 2 }}>
+                  {config?.enabled ? '修改设置' : '立即设置'}
+                </Button>
+              </CardContent>
+            </Card>
+          );
+        }}
+      </AutoTopup>
+    </PaymentProvider>
+  );
+}
+```
+
+## AutoTopupModal
+
+`AutoTopupModal` 是一个对话框组件，允许用户启用、禁用和配置自动充值功能的所有方面，包括触发阈值、购买金额和支付方式。
+
+### 属性
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `open` | `boolean` | **必需。** 控制模态框是否可见。 |
+| `onClose` | `() => void` | **必需。** 关闭模态框的回调函数。 |
+| `currencyId` | `string` | **必需。** 正在配置的信用货币的 ID。 |
+| `customerId` | `string` | 可选。客户的 DID。默认为 `PaymentProvider` 会话中的用户。 |
+| `onSuccess` | `(config: AutoRechargeConfig) => void` | 可选。配置成功保存后触发的回调。 |
+| `onError` | `(error: any) => void` | 可选。提交过程中发生错误时触发的回调。 |
+| `defaultEnabled` | `boolean` | 可选。如果为 `true`，当为新配置打开模态框时，“启用自动充值”开关将默认开启。 |
+
+### 用法
+
+以下是一个关于如何管理 `AutoTopupModal` 状态并处理其回调的完整示例。
+
+```tsx AutoRechargeSettings.tsx icon=logos:react
+import { PaymentProvider, AutoTopupModal } from '@blocklet/payment-react';
+import { useState } from 'react';
+import { Button } from '@mui/material';
+
+function AutoRechargeSettings({ session, currencyId }) {
+  const [isModalOpen, setModalOpen] = useState(false);
+
+  const handleSuccess = (config) => {
+    console.log('配置已成功保存：', config);
+    setModalOpen(false);
+    // 可选地，显示成功提示或刷新数据
+  };
+
+  const handleError = (error) => {
+    console.error('保存配置失败：', error);
+    // 可选地，向用户显示错误消息
+  };
+
+  return (
+    <PaymentProvider session={session}>
+      <Button variant="contained" onClick={() => setModalOpen(true)}>
+        配置自动充值
+      </Button>
+
+      <AutoTopupModal
+        open={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        currencyId={currencyId}
+        onSuccess={handleSuccess}
+        onError={handleError}
+        defaultEnabled={true}
+      />
+    </PaymentProvider>
+  );
+}
+```
+
+此设置提供了一种强大的方式来管理自动充值功能，在给予用户控制权的同时，确保了维持其服务信用的流畅体验。

package/docs/components-business-overdue-invoice-payment.ja.md

@@ -0,0 +1,196 @@
+# OverdueInvoicePayment
+
+`OverdueInvoicePayment`コンポーネントは、特定の顧客またはサブスクリプションの支払い期限を過ぎた請求書の支払いを処理するために設計された専門ツールです。期限切れの請求書を自動的に取得し、ユーザーに未払いの支払いを清算するための明確なインターフェースを提供することで、プロセスを簡素化します。
+
+このコンポーネントは2つのモードで動作します。迅速な統合のためにあらかじめ構築されたダイアログを表示するデフォルトモードと、レンダープロップを使用して独自のユーザーインターフェースを構築する柔軟性を提供するカスタムモードです。
+
+## 仕組み
+
+このコンポーネントは、データの取得から最終的なトランザクションの確認まで、支払い期限切れのプロセス全体を調整します。
+
+```d2 Overdue Payment Flow
+direction: down
+
+User: { 
+  shape: c4-person 
+}
+
+Client-App: {
+  label: "クライアントアプリケーション"
+  shape: rectangle
+
+  OverdueInvoicePayment-Component: {
+    label: "OverdueInvoicePayment コンポーネント"
+    shape: rectangle
+  }
+}
+
+Payment-Backend: {
+  label: "決済バックエンド"
+  shape: cylinder
+}
+
+DID-Wallet: {
+  label: "DID ウォレット"
+  icon: "https://www.arcblock.io/image-bin/uploads/37198ddc4a0b9e91e5c1c821ab895a34.svg"
+}
+
+User -> Client-App.OverdueInvoicePayment-Component: "1. コンポーネントをレンダリング"
+Client-App.OverdueInvoicePayment-Component -> Payment-Backend: "2. 期限切れの請求書を取得"
+Payment-Backend -> Client-App.OverdueInvoicePayment-Component: "3. 請求書の概要を返す"
+Client-App.OverdueInvoicePayment-Component -> User: "4. 支払いダイアログを表示"
+User -> Client-App.OverdueInvoicePayment-Component: "5. 「今すぐ支払う」をクリック"
+Client-App.OverdueInvoicePayment-Component -> DID-Wallet: "6. 接続セッションを開く (collect-batch)"
+User -> DID-Wallet: "7. 支払いを承認"
+DID-Wallet -> Client-App.OverdueInvoicePayment-Component: "8. 成功コールバックを送信"
+Payment-Backend -> Client-App.OverdueInvoicePayment-Component: "9. WebSocket イベント (invoice.paid)"
+Client-App.OverdueInvoicePayment-Component -> User: "10. UI を更新 (例: ダイアログを閉じる)"
+
+```
+
+## Props
+
+`OverdueInvoicePayment`コンポーネントは、その動作をカスタマイズするために以下の props を受け入れます。
+
+| Prop | Type | Description |
+|---|---|---|
+| `subscriptionId` | `string` | サブスクリプションのIDで、期限切れの請求書を確認するために使用します。`subscriptionId`または`customerId`のいずれかを提供する必要があります。 |
+| `customerId` | `string` | 顧客のIDまたはDID。これを使用して、顧客のすべての期限切れ請求書を処理します。 |
+| `mode` | `'default'` \| `'custom'` | レンダリングモード。`'default'`は事前に構築されたダイアログを表示します。`'custom'`はカスタムUIのために`children`レンダープロップを使用します。デフォルトは`'default'`です。 |
+| `onPaid` | `(id, currencyId, type) => void` | 支払いが正常に完了した後にトリガーされるオプションのコールバック関数。`id`は`subscriptionId`または`customerId`になり、`type`は`'subscription'`または`'customer'`になります。 |
+| `dialogProps` | `object` | `default`モードで、基盤となるMaterial-UIの`Dialog`コンポーネントに渡すオプションのprops。例：`{ open: true, title: 'カスタムタイトル', onClose: handleClose }`。 |
+| `detailLinkOptions` | `object` | 「詳細を表示」リンクのオプション設定。リンクを無効にしたり、テキストを変更したり、カスタムの`onClick`ハンドラを提供したりするために使用できます。形式：`{ enabled?: boolean, onClick?: function, title?: string }`。 |
+| `successToast` | `boolean` | `true`の場合、支払いが成功すると成功のトースト通知が表示されます。デフォルトは`true`です。 |
+| `alertMessage` | `string` | 顧客モードのときに、デフォルトのタイトルテキストに追加するオプションのメッセージ。 |
+| `children` | `(handlePay, data) => React.ReactNode` | `mode`が`'custom'`の場合にのみ使用されるレンダープロップ関数。`handlePay`関数と`data`オブジェクトを受け取ります。 |
+| `authToken` | `string` | APIリクエスト用のオプションの認証トークンで、サーバー間またはクロスオリジンのシナリオで役立ちます。 |
+
+### `children` レンダープロップ
+
+`mode="custom"`を使用する場合、`children`関数は2つの引数を受け取ります。
+
+1.  **`handlePay(item: SummaryItem)`**: 特定の通貨グループの支払いプロセスを開始する関数。`item`オブジェクトは`data.summary`オブジェクトから取得します。
+2.  **`data`**: 取得した支払い情報を含むオブジェクト：
+    *   `subscription?: Subscription`: `subscriptionId`が提供された場合のサブスクリプションの詳細。
+    *   `summary: { [key: string]: SummaryItem }`: 各キーが通貨IDであり、値が合計金額、通貨の詳細、支払い方法を含むオブジェクト。
+    *   `invoices: Invoice[]`: すべての期限切れ請求書オブジェクトの配列。
+    *   `subscriptionCount?: number`: 期限切れの請求書があるサブスクリプションの数（顧客モードの場合）。
+    *   `detailUrl: string`: 詳細な請求書情報を表示するためのURL。
+
+## 使用例
+
+すべての例は、アプリケーションに`PaymentProvider`が設定されていることを前提としています。
+
+### 1. サブスクリプションのデフォルトモード
+
+これは、特定のサブスクリプションの期限切れの支払いを処理する最も簡単な方法です。期限切れの請求書が見つかった場合、コンポーネントは自動的にダイアログをレンダリングします。
+
+```tsx SubscriptionOverdue.tsx icon=logos:react
+import { OverdueInvoicePayment, PaymentProvider } from '@blocklet/payment-react';
+import { useSessionContext } from './hooks/session'; // カスタムセッションフック
+
+function SubscriptionPage({ subscriptionId }) {
+  const { session, connect } = useSessionContext();
+
+  const handlePaymentSuccess = (id, currencyId, type) => {
+    console.log(`通貨 ${currencyId} を使用した ${type} ${id} の支払いが成功しました`);
+    // ここでサブスクリプションデータを再取得してステータスを更新できます
+  };
+
+  return (
+    <PaymentProvider session={session} connect={connect}>
+      {/* 期限切れの請求書がない場合、このコンポーネントはnullになります */}
+      <OverdueInvoicePayment
+        subscriptionId={subscriptionId}
+        onPaid={handlePaymentSuccess}
+      />
+      {/* 他のサブスクリプションの詳細はここにレンダリングできます */}
+    </PaymentProvider>
+  );
+}
+```
+
+### 2. 顧客のデフォルトモード
+
+これを使用して、顧客が複数のサブスクリプションにわたるすべての期限切れ請求書を支払うための中央集約された場所を作成します。
+
+```tsx CustomerDashboard.tsx icon=logos:react
+import { OverdueInvoicePayment, PaymentProvider } from '@blocklet/payment-react';
+import { useSessionContext } from './hooks/session'; // カスタムセッションフック
+
+function CustomerDashboard() {
+  const { session, connect } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connect}>
+      <h2>支払いセンター</h2>
+      <p>サービスの継続を確保するために、未払いの支払いをすべて清算してください。</p>
+      <OverdueInvoicePayment
+        customerId={session.user.did}
+        onPaid={() => {
+          console.log('ある通貨に対する顧客のすべての期限切れ請求書が支払われました！');
+          // 顧客アカウントのステータスを更新
+        }}
+      />
+      {/* 顧客ダッシュボードの残りの部分 */}
+    </PaymentProvider>
+  );
+}
+```
+
+### 3. カスタムUIモード
+
+ユーザーエクスペリエンスを完全に制御するには、`mode="custom"`を使用します。これにより、ダイアログを使用する代わりに、支払い機能を既存のUIに直接統合できます。
+
+```tsx CustomOverdueUI.tsx icon=logos:react
+import { OverdueInvoicePayment, PaymentProvider, Amount } from '@blocklet/payment-react';
+import { useSessionContext } from './hooks/session'; // カスタムセッションフック
+import { Card, CardContent, Typography, Button, Stack } from '@mui/material';
+
+function CustomOverdueUI({ subscriptionId }) {
+  const { session, connect } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connect}>
+      <OverdueInvoicePayment
+        subscriptionId={subscriptionId}
+        mode="custom"
+        onPaid={() => console.log('カスタムUIでの支払いが成功しました！')}
+      >
+        {(handlePay, { summary, invoices }) => {
+          const summaryList = Object.values(summary);
+          if (invoices.length === 0) {
+            return <Typography>期限切れの支払いはありません。すべてクリアです！</Typography>;
+          }
+
+          return (
+            <Card variant="outlined">
+              <CardContent>
+                <Typography variant="h6" color="error" gutterBottom>
+                  {invoices.length} 件の期限切れの請求書があります。
+                </Typography>
+                <Stack spacing={2} mt={2}>
+                  {summaryList.map((item) => (
+                    <Stack key={item.currency.id} direction="row" justifyContent="space-between" alignItems="center">
+                      <Typography>
+                        支払総額: <Amount amount={item.amount} decimal={item.currency.decimal} symbol={item.currency.symbol} />
+                      </Typography>
+                      <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={() => handlePay(item)}
+                      >
+                        {item.currency.symbol} で支払う
+                      </Button>
+                    </Stack>
+                  ))}
+                </Stack>
+              </CardContent>
+            </Card>
+          );
+        }}
+      </OverdueInvoicePayment>
+    </PaymentProvider>
+  );
+}
+```