@blocklet/payment-react 1.20.15 → 1.20.17

package/docs/components-business-overdue-invoice-payment.zh-TW.md

@@ -0,0 +1,197 @@
+# OverdueInvoicePayment
+
+`OverdueInvoicePayment` 元件是一個專門用於處理特定客戶或訂閱的逾期發票付款的工具。它透過自動擷取逾期發票並向使用者呈現一個清晰的介面來結清其未付帳款，從而簡化了流程。
+
+該元件可以在兩種模式下運作：一種是預設模式，會顯示一個預先建置的對話方塊以便快速整合；另一種是自訂模式，它提供了使用 render prop 建立獨特使用者介面的靈活性。
+
+## 運作方式
+
+該元件協調整個逾期付款流程，從擷取資料到處理最終的交易確認。
+
+```d2 逾期支付流程
+direction: down
+
+User: { 
+  label: "使用者"
+  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'` 使用 `children` render prop 來建立自訂 UI。預設為 `'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`，支付成功後會顯示一個成功的 toast 通知。預設為 `true`。 |
+| `alertMessage` | `string` | 在客戶模式下，附加到預設標題文字的可選訊息。 |
+| `children` | `(handlePay, data) => React.ReactNode` | 僅在 `mode` 為 `'custom'` 時使用的 render prop 函式。它會接收一個 `handlePay` 函式和一個 `data` 物件。 |
+| `authToken` | `string` | 用於 API 請求的可選身份驗證權杖，適用於伺服器對伺服器或跨來源的情境。 |
+
+### `children` Render Prop
+
+當使用 `mode="custom"` 時，`children` 函式會接收兩個參數：
+
+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'; // 您的自訂 session hook
+
+function SubscriptionPage({ subscriptionId }) {
+  const { session, connect } = useSessionContext();
+
+  const handlePaymentSuccess = (id, currencyId, type) => {
+    console.log(`為 ${type} ${id} 使用貨幣 ${currencyId} 成功付款`);
+    // 您可以在此處重新擷取訂閱資料以更新其狀態
+  };
+
+  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'; // 您的自訂 session hook
+
+function CustomerDashboard() {
+  const { session, connect } = useSessionContext();
+
+  return (
+    <PaymentProvider session={session} connect={connect}>
+      <h2>Payment Center</h2>
+      <p>Please settle any outstanding payments to ensure uninterrupted service.</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'; // 您的自訂 session hook
+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>
+  );
+}
+```

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

@@ -0,0 +1,197 @@
+# OverdueInvoicePayment
+
+`OverdueInvoicePayment` 组件是一个专用工具，旨在处理特定客户或订阅的逾期发票支付。它通过自动获取逾期发票并为用户提供一个清晰的界面来结算其未付账款，从而简化了流程。
+
+该组件可以在两种模式下运行：一种是默认模式，显示一个预构建的对话框以便快速集成；另一种是自定义模式，提供使用渲染属性（render prop）构建独特用户界面的灵活性。
+
+## 工作原理
+
+该组件协调整个逾期支付过程，从获取数据到处理最终的交易确认。
+
+```d2 Overdue Payment Flow
+direction: down
+
+User: { 
+  shape: c4-person
+  label: "用户"
+}
+
+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 (例如，关闭对话框)"
+
+```
+
+## 属性
+
+`OverdueInvoicePayment` 组件接受以下属性来自定义其行为：
+
+| 属性 | 类型 | 描述 |
+|---|---|---|
+| `subscriptionId` | `string` | 要检查逾期发票的订阅 ID。必须提供 `subscriptionId` 或 `customerId`。 |
+| `customerId` | `string` | 客户的 ID 或 DID。使用此属性可处理一个客户的所有逾期发票。 |
+| `mode` | `'default'` \| `'custom'` | 渲染模式。`'default'` 显示预构建的对话框。`'custom'` 使用 `children` 渲染属性构建自定义 UI。默认为 `'default'`。 |
+| `onPaid` | `(id, currencyId, type) => void` | 支付成功后触发的可选回调函数。`id` 将是 `subscriptionId` 或 `customerId`，`type` 将是 `'subscription'` 或 `'customer'`。 |
+| `dialogProps` | `object` | 在 `default` 模式下，传递给底层 Material-UI `Dialog` 组件的可选属性。例如：`{ open: true, title: '自定义标题', onClose: handleClose }`。 |
+| `detailLinkOptions` | `object` | “查看详情”链接的可选设置。可用于禁用链接、更改其文本或提供自定义的 `onClick` 处理程序。格式：`{ enabled?: boolean, onClick?: function, title?: string }`。 |
+| `successToast` | `boolean` | 如果为 `true`，支付成功后会显示一个成功的 toast 通知。默认为 `true`。 |
+| `alertMessage` | `string` | 在客户模式下，附加到默认标题文本的可选消息。 |
+| `children` | `(handlePay, data) => React.ReactNode` | 仅在 `mode` 为 `'custom'` 时使用的渲染属性函数。它接收一个 `handlePay` 函数和一个 `data` 对象。 |
+| `authToken` | `string` | 用于 API 请求的可选身份验证令牌，适用于服务器到服务器或跨域场景。 |
+
+### `children` 渲染属性
+
+当使用 `mode="custom"` 时，`children` 函数接收两个参数：
+
+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'; // 你的自定义 session hook
+
+function SubscriptionPage({ subscriptionId }) {
+  const { session, connect } = useSessionContext();
+
+  const handlePaymentSuccess = (id, currencyId, type) => {
+    console.log(`类型为 ${type} 的 ${id} 使用货币 ${currencyId} 支付成功`);
+    // 你可以在此处重新获取订阅数据以更新其状态
+  };
+
+  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'; // 你的自定义 session hook
+
+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'; // 你的自定义 session hook
+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>
+  );
+}
+```

package/docs/components-business-resume-subscription.ja.md

@@ -0,0 +1,190 @@
+# ResumeSubscription
+
+`ResumeSubscription` コンポーネントは、キャンセルされたサブスクリプションをユーザーが再開するための、分かりやすいUIを提供します。ユーザーを確認プロセスに沿って案内するダイアログをレンダリングし、サブスクリプションで必要な場合には再ステーキングのような複雑なシナリオも自動的に処理します。
+
+このコンポーネントは、ウォレットとのやり取りを処理するために必要なコンテキストにアクセスするため、`PaymentProvider` 内で使用する必要があります。
+
+## ワークフロー
+
+以下の図は、ユーザーがサブスクリプションを再開する際のプロセスフローを示したもので、再ステーキングの条件分岐ロジックも含まれています。
+
+```d2
+shape: sequence_diagram
+
+User: { label: "ユーザー"; shape: c4-person }
+ResumeSubscription: { label: "ResumeSubscription コンポーネント" }
+PaymentAPI: { label: "決済API" }
+DIDWallet: { label: "DID Wallet" }
+
+User -> ResumeSubscription: "1. 再開をトリガー"
+ResumeSubscription -> PaymentAPI: "2. GET /recover-info"
+PaymentAPI -> ResumeSubscription: "3. ステータスを返す\n(例: needStake: true)"
+
+ResumeSubscription.t1 -> User: "4. 確認ダイアログを表示"
+User -> ResumeSubscription.t1: "5. 確認"
+
+alt "再ステーキングが必要" {
+  ResumeSubscription.t1 -> DIDWallet: "6a. 再ステークセッションを開く"
+  User -> DIDWallet: "7a. 承認"
+  DIDWallet -> ResumeSubscription.t1: "8a. 成功コールバック"
+}
+
+alt "ステーキング不要" {
+  ResumeSubscription.t1 -> PaymentAPI: "6b. PUT /recover"
+  PaymentAPI -> ResumeSubscription.t1: "7b. 成功"
+}
+
+ResumeSubscription.t1 -> PaymentAPI: "9. 更新されたサブスクリプションを取得"
+PaymentAPI -> ResumeSubscription.t1: "10. サブスクリプションを返す"
+ResumeSubscription.t1 -> User: "11. onResumed()を呼び出し、ダイアログを閉じる"
+
+```
+
+
+## Props
+
+| プロパティ       | 型                                                     | 必須 | 説明                                                                                                                             | 
+| ---------------- | -------------------------------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `subscriptionId` | `string`                                                 | はい     | 再開するサブスクリプションの一意の識別子。                                                                                 |
+| `onResumed`      | `(subscription: Subscription) => void`                   | いいえ   | サブスクリプションが正常に再開された後にトリガーされるコールバック関数。引数として更新されたサブスクリプションオブジェクトを受け取ります。 |
+| `dialogProps`    | `object`                                                 | いいえ   | 基礎となるMaterial-UIダイアログをカスタマイズするためのProps。状態（`open`、`onClose`）と外観（`title`）を制御できます。            |
+| `successToast`   | `boolean`                                                | いいえ   | `true`の場合、正常に再開されると成功通知のトーストが表示されます。デフォルトは`true`です。                                   |
+| `authToken`      | `string`                                                 | いいえ   | APIリクエスト用のオプションの認証トークン。これは、オリジン間またはサーバー間のインテグレーションシナリオで役立ちます。            |
+
+## 使用例
+
+### 基本的な使い方
+
+これは、コンポーネントを使用する最も簡単な方法です。デフォルトで開いた状態のダイアログがレンダリングされます。
+
+```tsx Basic ResumeSubscription Example icon=logos:react
+import { ResumeSubscription } from '@blocklet/payment-react';
+
+function ResumePage({ subscriptionId }) {
+  // このコンポーネントはPaymentProvider内でレンダリングする必要があります
+  return <ResumeSubscription subscriptionId={subscriptionId} />;
+}
+```
+
+### 結果のハンドリング
+
+`onResumed`コールバックを使用して、更新されたサブスクリプションデータを受け取り、アプリケーションの状態を更新します。
+
+```tsx Handling the onResumed Callback icon=logos:react
+import { ResumeSubscription } from '@blocklet/payment-react';
+import { useState } from 'react';
+
+function SubscriptionDetails({ initialSubscription }) {
+  const [subscription, setSubscription] = useState(initialSubscription);
+
+  const handleSubscriptionResumed = (updatedSubscription) => {
+    console.log('サブスクリプションが正常に再開されました:', updatedSubscription);
+    setSubscription(updatedSubscription);
+    // 確認メッセージの表示やユーザーのリダイレクトも可能です。
+  };
+
+  return (
+    <div>
+      {/* `subscription` の状態に基づいてサブスクリプションの詳細を表示 */}
+      <ResumeSubscription
+        subscriptionId={subscription.id}
+        onResumed={handleSubscriptionResumed}
+      />
+    </div>
+  );
+}
+```
+
+### ダイアログの制御
+
+より実用的な統合のために、親コンポーネントからダイアログの可視性を制御します。これにより、ボタンのクリックなどのユーザーアクションに応じてダイアログを開くことができます。
+
+```tsx Triggering ResumeSubscription with a Button icon=logos:react
+import { ResumeSubscription } from '@blocklet/payment-react';
+import { useState } from 'react';
+import { Button } from '@mui/material';
+
+function SubscriptionActions({ subscriptionId }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleResumed = () => {
+    setIsModalOpen(false);
+    // サブスクリプションデータを再取得してUIを更新
+    alert('サブスクリプションが再開されました！');
+  };
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setIsModalOpen(true)}>
+        サブスクリプションを再開
+      </Button>
+
+      {isModalOpen && (
+        <ResumeSubscription
+          subscriptionId={subscriptionId}
+          onResumed={handleResumed}
+          dialogProps={{
+            open: isModalOpen,
+            title: 'サブスクリプション更新の確認',
+            onClose: () => setIsModalOpen(false),
+          }}
+        />
+      )}
+    </>
+  );
+}
+```
+
+## 完全な統合例
+
+以下は、必須の`PaymentProvider`内に`ResumeSubscription`を統合する方法を示す完全な例です。
+
+```tsx Complete Integration Example icon=logos:react
+import { PaymentProvider, ResumeSubscription } from '@blocklet/payment-react';
+import { useSessionContext } from 'path/to/your/session/context'; // あなたのアプリのセッションコンテキスト
+import { useState } from 'react';
+import { Button, Card, CardContent, Typography } from '@mui/material';
+
+function SubscriptionManagementPage({ subscription }) {
+  const { session, connect } = useSessionContext();
+  const [isResumeOpen, setIsResumeOpen] = useState(false);
+
+  const handleResumed = (updatedSubscription) => {
+    console.log('サブスクリプションが更新されました:', updatedSubscription);
+    setIsResumeOpen(false);
+    // 理想的には、ここでデータを再取得してページ全体を更新します。
+  };
+
+  return (
+    <PaymentProvider session={session} connect={connect}>
+      <Card>
+        <CardContent>
+          <Typography variant="h5">サブスクリプションの管理</Typography>
+          <Typography color="text.secondary">ステータス: {subscription.status}</Typography>
+
+          {subscription.status === 'canceled' && (
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{ mt: 2 }}
+              onClick={() => setIsResumeOpen(true)}>
+              サブスクリプションを再開
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+
+      {isResumeOpen && (
+        <ResumeSubscription
+          subscriptionId={subscription.id}
+          onResumed={handleResumed}
+          dialogProps={{
+            open: isResumeOpen,
+            onClose: () => setIsResumeOpen(false),
+          }}
+        />
+      )}
+    </PaymentProvider>
+  );
+}
+```