@blocklet/payment-react 1.22.32 → 1.23.1

package/docs/components-checkout-checkout-form.md

@@ -1,91 +1,64 @@
 # CheckoutForm
 
-The `CheckoutForm` component is the primary entry point for handling payment links and checkout sessions. It acts as a high-level wrapper that fetches all necessary data based on a provided ID and renders the appropriate payment or donation interface. This component is the simplest way to integrate a complete checkout flow into your application.
+The `CheckoutForm` component is the primary entry point for handling payment links and checkout sessions. It serves as a high-level wrapper that automatically fetches the necessary data based on a provided ID and renders the appropriate payment or donation interface. This component provides the most straightforward method for integrating a complete checkout flow into your application.
 
-It's essential to wrap `CheckoutForm` or any of its parent components with the `PaymentProvider` to ensure it has access to the necessary context, such as session information and API configuration. For more details, please refer to the [PaymentProvider documentation](./providers-payment-provider.md).
+For the `CheckoutForm` to function correctly, it must be nested within a `PaymentProvider`. This provider supplies the necessary context, such as session information and API configuration. For detailed setup instructions, please refer to the [PaymentProvider documentation](./providers-payment-provider.md).
 
 ## How It Works
 
-The component orchestrates the entire checkout process:
+The component manages the entire checkout process through a clear, sequential flow:
 
-1.  **Initialization**: It's mounted with a `paymentLink` ID (prefixed with `plink_`) or a `checkoutSession` ID (prefixed with `cs_`).
-2.  **Data Fetching**: It communicates with the payment backend to retrieve all necessary context, including payment methods, line items, and customer details.
-3.  **UI Rendering**: Based on the `formType` prop, it internally renders either the standard `Payment` component or the specialized `DonationForm` component.
-4.  **State Management**: It handles the entire lifecycle of the payment, including loading states, completion status, and error handling.
-
-```d2 Basic Flow of CheckoutForm icon=lucide:workflow
-direction: down
-shape: sequence_diagram
-
-User-Action: {
-  shape: c4-person
-  label: "User"
-}
-
-Application: {
-  label: "Your React Application"
-
-  CheckoutForm-Component: {
-    label: "CheckoutForm"
-  }
-
-  Payment-Component: {
-    label: "Payment Component"
-  }
-
-  Donation-Component: {
-    label: "DonationForm Component"
-  }
-}
-
-Payment-API: {
-  label: "Payment Backend API"
-  shape: cylinder
-}
-
-User-Action -> Application.CheckoutForm-Component: "1. Mounts with 'id' prop"
-Application.CheckoutForm-Component -> Payment-API: "2. Fetch session data"
-Payment-API -> Application.CheckoutForm-Component: "3. Return checkout context"
-
-alt "if formType is 'payment'" {
-  Application.CheckoutForm-Component -> Application.Payment-Component: "4. Renders Payment UI"
-}
-
-alt "if formType is 'donation'" {
-  Application.CheckoutForm-Component -> Application.Donation-Component: "5. Renders Donation UI"
-}
-
-User-Action -> Application.Payment-Component: "6. Completes payment"
-User-Action -> Application.Donation-Component: "7. Completes donation"
-
-```
+1.  **Initialization**: The component is mounted with an `id` prop, which must be either a `paymentLink` ID (prefixed with `plink_`) or a `checkoutSession` ID (prefixed with `cs_`).
+2.  **Data Fetching**: It sends a request to the payment backend to retrieve the complete checkout context, which includes available payment methods, line items, and customer details.
+3.  **UI Rendering**: Based on the `formType` prop, it internally renders either the standard `Payment` component for purchases or the specialized `DonationForm` for contributions.
+4.  **State Management**: It handles the full lifecycle of the transaction, managing loading states, completion status, and any potential errors.
 
 ## Props
 
-The `CheckoutForm` component accepts the following props:
-
-| Prop          | Type                                                                       | Required | Default       | Description                                                                                             |
-|---------------|----------------------------------------------------------------------------|----------|---------------|-------------------------------------------------------------------------------------------------------------------------|
-| `id`          | `string`                                                                   | Yes      | -             | The unique identifier for the payment link (`plink_...`) or checkout session (`cs_...`).                                |
-| `mode`        | `'standalone'` \| `'inline'` \| `'popup'` \| `'inline-minimal'` \| `'popup-minimal'` | No       | `'inline'`    | Defines the rendering mode. `'standalone'` for a full-page view, `'inline'` to embed in a container.                  |
-| `formType`    | `'payment'` \| `'donation'`                                                 | No       | `'payment'`   | Determines the type of form to render. Use `'donation'` for the specialized donation flow.                          |
-| `onPaid`      | `(res: CheckoutContext) => void`                                           | No       | -             | Callback function executed upon successful payment. Receives the final checkout context as an argument.               |
-| `onError`     | `(err: Error) => void`                                                     | No       | `console.error` | Callback function executed when an error occurs during the process.                                                   |
-| `onChange`    | `(data: CheckoutFormData) => void`                                         | No       | -             | Callback function that fires when any form field value changes.                                                         |
-| `goBack`      | `() => void`                                                               | No       | -             | If provided, renders a back button and calls this function when clicked.                                                |
-| `extraParams` | `Record<string, any>`                                                      | No       | `{}`          | An object of extra parameters to be passed in the URL when initiating a session from a payment link.                  |
-| `theme`       | `'default'` \| `'inherit'` \| `PaymentThemeOptions`                            | No       | `'default'`   | Controls the component's theme. `'inherit'` uses the parent theme, or you can pass a custom theme object.             |
-| `action`      | `string`                                                                   | No       | `''`          | A string identifier used for customizing UI elements like button text or tracking specific flows.                   |
-
-## Usage
+The `CheckoutForm` component is configured using the following properties.
+
+<x-field-group>
+  <x-field data-name="id" data-type="string" data-required="true">
+    <x-field-desc markdown>The unique identifier for the payment link (`plink_...`) or checkout session (`cs_...`).</x-field-desc>
+  </x-field>
+  <x-field data-name="mode" data-type="'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal'" data-required="false" data-default="inline">
+    <x-field-desc markdown>Defines the rendering mode. `'standalone'` creates a full-page view, while `'inline'` embeds the form within an existing container. The `-minimal` variants hide the order summary.</x-field-desc>
+  </x-field>
+  <x-field data-name="formType" data-type="'payment' | 'donation'" data-required="false" data-default="payment">
+    <x-field-desc markdown>Specifies the type of form to render. Use `'donation'` to activate the specialized donation user interface.</x-field-desc>
+  </x-field>
+  <x-field data-name="onPaid" data-type="(res: CheckoutContext) => void" data-required="false">
+    <x-field-desc markdown>A callback function that is executed upon successful payment completion. It receives the final checkout context as an argument.</x-field-desc>
+  </x-field>
+  <x-field data-name="onError" data-type="(err: Error) => void" data-required="false" data-default="console.error">
+    <x-field-desc markdown>A callback function that is executed if an error occurs during the checkout process.</x-field-desc>
+  </x-field>
+  <x-field data-name="onChange" data-type="(data: CheckoutFormData) => void" data-required="false">
+    <x-field-desc markdown>A callback function that fires whenever a value in the payment form changes.</x-field-desc>
+  </x-field>
+  <x-field data-name="goBack" data-type="() => void" data-required="false">
+    <x-field-desc markdown>If provided, a back button is rendered. This function is called when the button is clicked.</x-field-desc>
+  </x-field>
+  <x-field data-name="extraParams" data-type="Record<string, any>" data-required="false" data-default="{}">
+    <x-field-desc markdown>An object containing extra parameters to be appended to the URL when initiating a checkout session from a payment link.</x-field-desc>
+  </x-field>
+  <x-field data-name="theme" data-type="'default' | 'inherit' | PaymentThemeOptions" data-required="false" data-default="default">
+    <x-field-desc markdown>Controls the component's theme. `'inherit'` uses the parent theme, while `'default'` applies the library's standard theme. A custom theme object can also be provided.</x-field-desc>
+  </x-field>
+  <x-field data-name="action" data-type="string" data-required="false" data-default="''">
+    <x-field-desc markdown>A string identifier used for customizing UI elements, such as button text, or for tracking specific analytics events.</x-field-desc>
+  </x-field>
+</x-field-group>
+
+## Usage Examples
 
 ### Basic Inline Payment Form
 
-This is the most common use case for embedding a payment form directly within your application's UI. The component handles all the logic internally.
+This is the most common use case, where the payment form is embedded directly into a page of your application. The component handles all data fetching and state management internally.
 
-```tsx MyStorePage.tsx icon=lucide:shopping-cart
+```javascript MyStorePage.jsx icon=logos:react
 import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
-import { useSessionContext } from './hooks/session-context'; // Your app's session hook
+import { useSessionContext } from './hooks/session-context'; // This is an example hook from your application
 
 export default function MyStorePage() {
   const { session, connectApi } = useSessionContext();
@@ -118,19 +91,28 @@ export default function MyStorePage() {
 
 ### Standalone Full-Page Checkout
 
-Use `mode="standalone"` to render a dedicated, full-page checkout experience. This is ideal for scenarios where you redirect the user to a separate page to complete their payment.
+Use `mode="standalone"` to render a dedicated, full-page checkout experience. This mode is ideal for redirecting the user to a separate URL to complete their payment without distractions.
 
-```tsx CheckoutPage.tsx icon=lucide:layout-template
+```javascript CheckoutPage.jsx icon=logos:react
 import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
 import { useSessionContext } from './hooks/session-context';
 
 export default function CheckoutPage() {
   const { session, connectApi } = useSessionContext();
-  const paymentLinkId = 'plink_xxxxxxxxxxxxxx'; // Can be retrieved from URL params
+
+  // In a real application, you would get this ID from the URL parameters
+  const paymentLinkId = 'plink_xxxxxxxxxxxxxx';
 
   return (
     <PaymentProvider session={session} connectApi={connectApi}>
-      <CheckoutForm id={paymentLinkId} mode="standalone" />
+      <CheckoutForm
+        id={paymentLinkId}
+        mode="standalone"
+        onPaid={() => {
+          // Redirect to a success page
+          window.location.href = '/payment-success';
+        }}
+      />
     </PaymentProvider>
   );
 }
@@ -138,9 +120,9 @@ export default function CheckoutPage() {
 
 ### Donation Form
 
-By setting `formType="donation"`, the component renders a specialized UI tailored for donation campaigns, including features like amount presets and benefit displays.
+By setting `formType="donation"`, the component renders a specialized UI tailored for donation campaigns. This form includes features such as amount presets and can display information about the benefits of donating.
 
-```tsx DonationPage.tsx icon=lucide:gift
+```javascript DonationPage.jsx icon=lucide:gift
 import { PaymentProvider, CheckoutForm } from '@blocklet/payment-react';
 import { useSessionContext } from './hooks/session-context';
 
@@ -149,7 +131,7 @@ export default function DonationPage() {
 
   return (
     <PaymentProvider session={session} connectApi={connectApi}>
-      <div style={{ padding: '2rem' }}>
+      <div style={{ padding: '2rem', textAlign: 'center' }}>
         <h2>Support Our Cause</h2>
         <CheckoutForm
           id="plink_yyyyyyyyyyyyyy" // Replace with your Donation Link ID
@@ -160,5 +142,4 @@ export default function DonationPage() {
     </PaymentProvider>
   );
 }
-```
-
+```

package/docs/components-checkout-checkout-table.ja.md

@@ -13,41 +13,9 @@
 3.  **セッションの作成**: ユーザーがプランを選択すると、コンポーネントはバックエンドと通信して安全なチェックアウトセッションを作成します。
 4.  **支払いの処理**: その後、セッション詳細が事前に入力された`CheckoutForm`を表示し、ユーザーが支払い情報を入力して取引を完了できるようにします。
 
-```d2 CheckoutTable フロー図
-direction: down
-
-ユーザー: {
-  shape: c4-person
-}
-
-CheckoutTable-Component: {
-  label: "CheckoutTable コンポーネント"
-  shape: rectangle
-
-  Pricing-Table-View: {
-    label: "価格表ビュー"
-  }
-
-  Checkout-Form-View: {
-    label: "チェックアウトフォームビュー"
-  }
-}
-
-Payment-API: {
-  label: "支払いAPI"
-  shape: cylinder
-}
-
-ユーザー -> CheckoutTable-Component.Pricing-Table-View: "1. プランを閲覧"
-CheckoutTable-Component.Pricing-Table-View -> ユーザー: " "
-ユーザー -> CheckoutTable-Component.Pricing-Table-View: "2. プランを選択"
-CheckoutTable-Component.Pricing-Table-View -> Payment-API: "3. チェックアウトセッションを作成"
-Payment-API -> CheckoutTable-Component.Pricing-Table-View: "4. セッションIDを返す"
-CheckoutTable-Component.Pricing-Table-View -> CheckoutTable-Component.Checkout-Form-View: "5. セッションIDで移行"
-ユーザー -> CheckoutTable-Component.Checkout-Form-View: "6. 支払い詳細を入力して支払う"
-CheckoutTable-Component.Checkout-Form-View -> ユーザー: ""
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3::1765377358 -->
+![CheckoutTable](assets/diagram/components-checkout-checkout-table-01.ja.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props
 

package/docs/components-checkout-checkout-table.md

@@ -6,67 +6,53 @@ It internally uses the [`PricingTable`](./components-ui-pricing-table.md) compon
 
 ## How it Works
 
-The checkout flow managed by `CheckoutTable` is straightforward:
+The checkout flow managed by `CheckoutTable` is straightforward. The following diagram illustrates the sequence of events from displaying plans to finalizing the transaction:
+
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3:1765377358 -->
+![CheckoutTable](assets/diagram/components-checkout-checkout-table-01.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 1.  **Fetch Data**: The component fetches the pricing table configuration from the server using the provided `id`.
 2.  **Display Plans**: It renders the subscription plans in a responsive table, allowing users to switch between billing intervals (e.g., monthly/yearly) and currencies.
 3.  **Create Session**: When a user selects a plan, the component communicates with the backend to create a secure checkout session.
 4.  **Process Payment**: It then displays the `CheckoutForm`, pre-filled with the session details, allowing the user to enter their payment information and finalize the transaction.
 
-```d2 CheckoutTable Flow Diagram
-direction: down
-
-User: {
-  shape: c4-person
-}
-
-CheckoutTable-Component: {
-  label: "CheckoutTable Component"
-  shape: rectangle
-
-  Pricing-Table-View: {
-    label: "Pricing Table View"
-  }
-
-  Checkout-Form-View: {
-    label: "Checkout Form View"
-  }
-}
-
-Payment-API: {
-  label: "Payment API"
-  shape: cylinder
-}
-
-User -> CheckoutTable-Component.Pricing-Table-View: "1. Views plans"
-CheckoutTable-Component.Pricing-Table-View -> User: " "
-User -> CheckoutTable-Component.Pricing-Table-View: "2. Selects a plan"
-CheckoutTable-Component.Pricing-Table-View -> Payment-API: "3. Create checkout session"
-Payment-API -> CheckoutTable-Component.Pricing-Table-View: "4. Return session ID"
-CheckoutTable-Component.Pricing-Table-View -> CheckoutTable-Component.Checkout-Form-View: "5. Transition with session ID"
-User -> CheckoutTable-Component.Checkout-Form-View: "6. Fills payment details & pays"
-CheckoutTable-Component.Checkout-Form-View -> User: ""
-
-```
-
 ## Props
 
-| Prop          | Type                              | Required | Default      | Description                                                                                                                              |
-|---------------|-----------------------------------|----------|--------------|------------------------------------------------------------------------------------------------------------------------------------------|
-| `id`          | `string`                          | Yes      | -            | The ID of the pricing table to display (must start with `prctbl_`).                                                                      |
-| `mode`        | `'standalone'` or `'embedded'`    | No       | `'embedded'` | The display mode. `'standalone'` redirects to a separate page, while `'embedded'` handles the flow inline within the component.          |
-| `onPaid`      | `(sessionId: string) => void`     | No       | -            | Callback function triggered when the payment is successfully completed.                                                                  |
-| `onError`     | `(error: Error) => void`          | No       | -            | Callback function for handling errors during the checkout process.                                                                       |
-| `onChange`    | `(data: any) => void`             | No       | -            | Callback for any state change within the checkout form.                                                                                  |
-| `extraParams` | `Record<string, any>`             | No       | `{}`         | An object of extra parameters to be sent when creating the checkout session, useful for passing custom data like a user ID.              |
-| `goBack`      | `() => void`                      | No       | -            | A function to handle the back action from the payment form, returning the user to the pricing table view.                                |
-| `theme`       | `object` or `'inherit'`           | No       | -            | Custom Material-UI theme object to style the component. For more details, see the [Theming guide](./guides-theming.md).                        |
+The `CheckoutTable` component accepts the following props to customize its behavior and handle events.
+
+<x-field-group>
+  <x-field data-name="id" data-type="string" data-required="true">
+    <x-field-desc markdown>The ID of the pricing table to display. This value must be prefixed with `prctbl_`.</x-field-desc>
+  </x-field>
+  <x-field data-name="mode" data-type="'standalone' | 'embedded'" data-required="false" data-default="embedded">
+    <x-field-desc markdown>The display mode. In `'standalone'` mode, the user is redirected to a separate hosted page upon selecting a plan. In `'embedded'` mode, the entire checkout flow occurs inline within the component.</x-field-desc>
+  </x-field>
+  <x-field data-name="onPaid" data-type="(sessionId: string) => void" data-required="false">
+    <x-field-desc markdown>A callback function that is triggered when a payment is successfully completed. It receives the `sessionId` of the transaction.</x-field-desc>
+  </x-field>
+  <x-field data-name="onError" data-type="(error: Error) => void" data-required="false">
+    <x-field-desc markdown>A callback function for handling any errors that occur during the checkout process.</x-field-desc>
+  </x-field>
+  <x-field data-name="onChange" data-type="(data: any) => void" data-required="false">
+    <x-field-desc markdown>A callback function that is triggered for any state change within the underlying `CheckoutForm` component.</x-field-desc>
+  </x-field>
+  <x-field data-name="extraParams" data-type="Record<string, any>" data-required="false">
+    <x-field-desc markdown>An object containing extra parameters to be sent to the server when creating the checkout session. This is useful for passing custom data, such as a user ID or tracking information.</x-field-desc>
+  </x-field>
+  <x-field data-name="goBack" data-type="() => void" data-required="false">
+    <x-field-desc markdown>A function to handle the back action from the payment form, which returns the user to the pricing table view. The component manages the UI transition; this callback is for synchronizing external application state.</x-field-desc>
+  </x-field>
+  <x-field data-name="theme" data-type="object | 'inherit'" data-required="false">
+    <x-field-desc markdown>A custom Material-UI theme object to style the component, or `'inherit'` to use the ambient theme. For more details, see the [Theming guide](./guides-theming.md).</x-field-desc>
+  </x-field>
+</x-field-group>
 
 ## Usage
 
 To use the `CheckoutTable` component, you must wrap it in a `PaymentProvider`. Pass the pricing table `id` and an `onPaid` callback to handle successful transactions.
 
-```javascript Basic CheckoutTable Example icon=logos:react
+```javascript MyCheckoutPage.jsx icon=logos:react
 import { PaymentProvider, CheckoutTable } from '@blocklet/payment-react';
 import { useSessionContext } from './path-to-your-session-context'; // Centralize this context as per guidelines
 
@@ -86,7 +72,7 @@ export default function MyCheckoutPage() {
     <PaymentProvider session={session} connectApi={connectApi}>
       <div style={{ height: '700px', width: '100%' }}>
         <CheckoutTable
-          id="prctbl_xxxxxxxxxxxxxxxx" // Replace with your actual pricing table ID
+          id="prctbl_z2v5NvY3tYjH2zK8yL9xP6" // Replace with your actual pricing table ID
           onPaid={handlePaymentSuccess}
         />
       </div>
@@ -105,44 +91,98 @@ By default, `CheckoutTable` operates in `'embedded'` mode. The component manages
 
 By setting `mode='standalone'`, the component's behavior changes. When a user selects a plan, they are redirected to a dedicated, hosted checkout page. This mode is useful for simpler integrations that don't require an embedded payment form.
 
-```javascript Standalone Mode icon=logos:react
-<CheckoutTable
-  id="prctbl_xxxxxxxxxxxxxxxx"
-  mode="standalone"
-/>
+```javascript StandaloneMode.jsx icon=logos:react
+import { PaymentProvider, CheckoutTable } from '@blocklet/payment-react';
+import { useSessionContext } from './path-to-your-session-context';
+
+export default function StandaloneCheckout() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session) {
+    return <div>Loading session...</div>;
+  }
+
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <CheckoutTable
+        id="prctbl_z2v5NvY3tYjH2zK8yL9xP6"
+        mode="standalone"
+      />
+    </PaymentProvider>
+  );
+}
 ```
 
 ## Advanced Usage
 
 ### Handling Back Navigation
 
-The `goBack` prop allows you to define custom logic when the user navigates back from the payment form to the pricing table. The component handles the view transition automatically, but this callback is useful for synchronizing your application's state.
+The `goBack` prop allows you to define custom logic for when the user navigates back from the payment form to the pricing table. The component handles the view transition automatically, but this callback is useful for synchronizing your application's state.
+
+```javascript GoBackExample.jsx icon=logos:react
+import { PaymentProvider, CheckoutTable } from '@blocklet/payment-react';
+import { useSessionContext } from './path-to-your-session-context';
+import { useState } from 'react';
+
+export default function CheckoutWithBackNavigation() {
+  const { session, connectApi } = useSessionContext();
+  const [view, setView] = useState('pricing');
+
+  const handleGoBack = () => {
+    console.log('User returned to the pricing table.');
+    setView('pricing');
+  };
 
-```javascript goBack Prop Example icon=logos:react
-const handleGoBack = () => {
-  console.log('User returned to the pricing table.');
-  // You can add custom logic here, like updating your app's state.
-};
+  if (!session) {
+    return <div>Loading session...</div>;
+  }
 
-<CheckoutTable
-  id="prctbl_xxxxxxxxxxxxxxxx"
-  onPaid={handlePaymentSuccess}
-  goBack={handleGoBack}
-/>
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <div style={{ height: '700px', width: '100%' }}>
+        <CheckoutTable
+          id="prctbl_z2v5NvY3tYjH2zK8yL9xP6"
+          onPaid={() => alert('Payment successful!')}
+          goBack={handleGoBack}
+          onChange={() => setView('payment')}
+        />
+      </div>
+    </PaymentProvider>
+  );
+}
 ```
 
 ### Passing Extra Parameters
 
 Use the `extraParams` prop to send additional data when creating the checkout session. This data can be associated with the resulting payment and is useful for tracking and reconciliation on your backend.
 
-```javascript extraParams Example icon=logos:react
-<CheckoutTable
-  id="prctbl_xxxxxxxxxxxxxxxx"
-  onPaid={handlePaymentSuccess}
-  extraParams={{ userId: 'user_123', source: 'marketing_campaign' }}
-/>
+```javascript ExtraParamsExample.jsx icon=logos:react
+import { PaymentProvider, CheckoutTable } from '@blocklet/payment-react';
+import { useSessionContext } from './path-to-your-session-context';
+
+export default function CheckoutWithExtraParams() {
+  const { session, connectApi } = useSessionContext();
+
+  if (!session) {
+    return <div>Loading session...</div>;
+  }
+
+  const user = { id: 'user_12345' }; // Example user object
+
+  return (
+    <PaymentProvider session={session} connectApi={connectApi}>
+      <div style={{ height: '700px', width: '100%' }}>
+        <CheckoutTable
+          id="prctbl_z2v5NvY3tYjH2zK8yL9xP6"
+          onPaid={() => alert('Payment successful!')}
+          extraParams={{ userId: user.id, source: 'marketing_campaign' }}
+        />
+      </div>
+    </PaymentProvider>
+  );
+}
 ```
 
 ## Customization
 
-While `CheckoutTable` is a high-level component designed for ease of use, you can achieve more granular control by using its constituent parts. For a fully custom UI, you can use the [`PricingTable`](./components-ui-pricing-table.md) component to display plans and then manually trigger a checkout session that renders in a [`CheckoutForm`](./components-checkout-checkout-form.md).
+While `CheckoutTable` is a high-level component designed for ease of use, you can achieve more granular control by using its constituent parts. For a fully custom UI, you can use the [`PricingTable`](./components-ui-pricing-table.md) component to display plans and then manually trigger a checkout session that renders in a [`CheckoutForm`](./components-checkout-checkout-form.md).

package/docs/components-checkout-checkout-table.zh-TW.md

@@ -13,41 +13,9 @@
 3.  **建立會話**：當使用者選擇一個方案時，該元件會與後端通訊以建立一個安全的結帳會話。
 4.  **處理付款**：然後它會顯示 `CheckoutForm`，預先填入會話詳細資訊，讓使用者輸入他們的付款資訊並完成交易。
 
-```d2 CheckoutTable 流程圖
-direction: down
-
-使用者: {
-  shape: c4-person
-}
-
-CheckoutTable-Component: {
-  label: "CheckoutTable 元件"
-  shape: rectangle
-
-  Pricing-Table-View: {
-    label: "價格表視圖"
-  }
-
-  Checkout-Form-View: {
-    label: "結帳表單視圖"
-  }
-}
-
-Payment-API: {
-  label: "付款 API"
-  shape: cylinder
-}
-
-使用者 -> CheckoutTable-Component.Pricing-Table-View: "1. 查看方案"
-CheckoutTable-Component.Pricing-Table-View -> 使用者: " "
-使用者 -> CheckoutTable-Component.Pricing-Table-View: "2. 選擇方案"
-CheckoutTable-Component.Pricing-Table-View -> Payment-API: "3. 建立結帳會話"
-Payment-API -> CheckoutTable-Component.Pricing-Table-View: "4. 返回會話 ID"
-CheckoutTable-Component.Pricing-Table-View -> CheckoutTable-Component.Checkout-Form-View: "5. 透過會話 ID 轉換"
-使用者 -> CheckoutTable-Component.Checkout-Form-View: "6. 填寫付款詳細資訊並付款"
-CheckoutTable-Component.Checkout-Form-View -> 使用者: ""
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3::1765377358 -->
+![CheckoutTable](assets/diagram/components-checkout-checkout-table-01.zh-TW.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props
 

package/docs/components-checkout-checkout-table.zh.md

@@ -13,42 +13,9 @@
 3.  **创建会话**：当用户选择一个方案时，该组件会与后端通信以创建一个安全的结账会话。
 4.  **处理支付**：然后它会显示 `CheckoutForm`，预先填充了会话详细信息，允许用户输入他们的支付信息并完成交易。
 
-```d2 CheckoutTable 流程图
-direction: down
-
-User: {
-  shape: c4-person
-  label: "用户"
-}
-
-CheckoutTable-Component: {
-  label: "CheckoutTable 组件"
-  shape: rectangle
-
-  Pricing-Table-View: {
-    label: "价格表视图"
-  }
-
-  Checkout-Form-View: {
-    label: "结账表单视图"
-  }
-}
-
-Payment-API: {
-  label: "支付 API"
-  shape: cylinder
-}
-
-User -> CheckoutTable-Component.Pricing-Table-View: "1. 查看方案"
-CheckoutTable-Component.Pricing-Table-View -> User: " "
-User -> CheckoutTable-Component.Pricing-Table-View: "2. 选择方案"
-CheckoutTable-Component.Pricing-Table-View -> Payment-API: "3. 创建结账会话"
-Payment-API -> CheckoutTable-Component.Pricing-Table-View: "4. 返回会话 ID"
-CheckoutTable-Component.Pricing-Table-View -> CheckoutTable-Component.Checkout-Form-View: "5. 使用会话 ID 进行过渡"
-User -> CheckoutTable-Component.Checkout-Form-View: "6. 填写支付详情并支付"
-CheckoutTable-Component.Checkout-Form-View -> User: ""
-
-```
+<!-- DIAGRAM_IMAGE_START:flowchart:4:3::1765377358 -->
+![CheckoutTable](assets/diagram/components-checkout-checkout-table-01.zh.jpg)
+<!-- DIAGRAM_IMAGE_END -->
 
 ## Props