Merge pull request #4089 from seefs001/feature/waffo-pay

rafactor: payment
2026-04-18 14:22:54 +08:00
parent 5b9dcf1bda
commit f995a868e4
41 changed files with 3222 additions and 740 deletions
@@ -18,29 +18,43 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Form, Spin } from '@douyinfe/semi-ui';
+import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
 import {
  API,
  removeTrailingSlash,
  showError,
  showSuccess,
+  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';

 export default function SettingsGeneralPayment(props) {
  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('通用设置');
  const [loading, setLoading] = useState(false);
  const [inputs, setInputs] = useState({
    ServerAddress: '',
+    CustomCallbackAddress: '',
+    TopupGroupRatio: '',
+    PayMethods: '',
+    AmountOptions: '',
+    AmountDiscount: '',
  });
+  const [originInputs, setOriginInputs] = useState({});
  const formApiRef = useRef(null);

  useEffect(() => {
    if (props.options && formApiRef.current) {
      const currentInputs = {
        ServerAddress: props.options.ServerAddress || '',
+        CustomCallbackAddress: props.options.CustomCallbackAddress || '',
+        TopupGroupRatio: props.options.TopupGroupRatio || '',
+        PayMethods: props.options.PayMethods || '',
+        AmountOptions: props.options.AmountOptions || '',
+        AmountDiscount: props.options.AmountDiscount || '',
      };
      setInputs(currentInputs);
+      setOriginInputs({ ...currentInputs });
      formApiRef.current.setValues(currentInputs);
    }
  }, [props.options]);
@@ -49,19 +63,93 @@ export default function SettingsGeneralPayment(props) {
    setInputs(values);
  };

-  const submitServerAddress = async () => {
+  const submitGeneralSettings = async () => {
+    if (
+      originInputs.TopupGroupRatio !== inputs.TopupGroupRatio &&
+      !verifyJSON(inputs.TopupGroupRatio)
+    ) {
+      showError(t('充值分组倍率不是合法的 JSON 字符串'));
+      return;
+    }
+
+    if (
+      originInputs.PayMethods !== inputs.PayMethods &&
+      !verifyJSON(inputs.PayMethods)
+    ) {
+      showError(t('充值方式设置不是合法的 JSON 字符串'));
+      return;
+    }
+
+    if (
+      originInputs.AmountOptions !== inputs.AmountOptions &&
+      inputs.AmountOptions.trim() !== '' &&
+      !verifyJSON(inputs.AmountOptions)
+    ) {
+      showError(t('自定义充值数量选项不是合法的 JSON 数组'));
+      return;
+    }
+
+    if (
+      originInputs.AmountDiscount !== inputs.AmountDiscount &&
+      inputs.AmountDiscount.trim() !== '' &&
+      !verifyJSON(inputs.AmountDiscount)
+    ) {
+      showError(t('充值金额折扣配置不是合法的 JSON 对象'));
+      return;
+    }
+
    setLoading(true);
    try {
-      let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
-      const res = await API.put('/api/option/', {
-        key: 'ServerAddress',
-        value: ServerAddress,
-      });
-      if (res.data.success) {
+      const options = [
+        {
+          key: 'ServerAddress',
+          value: removeTrailingSlash(inputs.ServerAddress),
+        },
+      ];
+
+      if (inputs.CustomCallbackAddress !== '') {
+        options.push({
+          key: 'CustomCallbackAddress',
+          value: removeTrailingSlash(inputs.CustomCallbackAddress),
+        });
+      }
+      if (originInputs.TopupGroupRatio !== inputs.TopupGroupRatio) {
+        options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
+      }
+      if (originInputs.PayMethods !== inputs.PayMethods) {
+        options.push({ key: 'PayMethods', value: inputs.PayMethods });
+      }
+      if (originInputs.AmountOptions !== inputs.AmountOptions) {
+        options.push({
+          key: 'payment_setting.amount_options',
+          value: inputs.AmountOptions,
+        });
+      }
+      if (originInputs.AmountDiscount !== inputs.AmountDiscount) {
+        options.push({
+          key: 'payment_setting.amount_discount',
+          value: inputs.AmountDiscount,
+        });
+      }
+
+      const results = await Promise.all(
+        options.map((option) =>
+          API.put('/api/option/', {
+            key: option.key,
+            value: option.value,
+          }),
+        ),
+      );
+
+      const errorResults = results.filter((res) => !res.data.success);
+      if (errorResults.length === 0) {
        showSuccess(t('更新成功'));
+        setOriginInputs({ ...inputs });
        props.refresh && props.refresh();
      } else {
-        showError(res.data.message);
+        errorResults.forEach((res) => {
+          showError(res.data.message);
+        });
      }
    } catch (error) {
      showError(t('更新失败'));
@@ -76,7 +164,7 @@ export default function SettingsGeneralPayment(props) {
        onValueChange={handleFormChange}
        getFormApi={(api) => (formApiRef.current = api)}
      >
-        <Form.Section text={t('通用设置')}>
+        <Form.Section text={sectionTitle}>
          <Form.Input
            field='ServerAddress'
            label={t('服务器地址')}
@@ -86,7 +174,73 @@ export default function SettingsGeneralPayment(props) {
              '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
            )}
          />
-          <Button onClick={submitServerAddress}>{t('更新服务器地址')}</Button>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.Input
+                field='CustomCallbackAddress'
+                label={t('回调地址')}
+                placeholder={t('例如：https://yourdomain.com')}
+                extraText={t(
+                  '留空时默认使用服务器地址作为回调地址，填写后将覆盖默认值',
+                )}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='TopupGroupRatio'
+                label={t('充值分组倍率')}
+                placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
+                autosize
+              />
+            </Col>
+          </Row>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='PayMethods'
+                label={t('充值方式设置')}
+                placeholder={t('为一个 JSON 文本')}
+                autosize
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='AmountOptions'
+                label={t('自定义充值数量选项')}
+                placeholder={t(
+                  '为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]',
+                )}
+                autosize
+                extraText={t(
+                  '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
+                )}
+              />
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 16 }}>
+            <Col span={24}>
+              <Form.TextArea
+                field='AmountDiscount'
+                label={t('充值金额折扣配置')}
+                placeholder={t(
+                  '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+                )}
+                autosize
+                extraText={t(
+                  '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+                )}
+              />
+            </Col>
+          </Row>
+          <Button onClick={submitGeneralSettings} style={{ marginTop: 16 }}>
+            {t('保存通用设置')}
+          </Button>
        </Form.Section>
      </Form>
    </Spin>
@@ -18,19 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React, { useEffect, useState, useRef } from 'react';
-import { Button, Form, Row, Col, Typography, Spin } from '@douyinfe/semi-ui';
-const { Text } = Typography;
+import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
 import {
  API,
  removeTrailingSlash,
  showError,
  showSuccess,
-  verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { Info } from 'lucide-react';

 export default function SettingsPaymentGateway(props) {
  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('易支付设置');
  const [loading, setLoading] = useState(false);
  const [inputs, setInputs] = useState({
    PayAddress: '',
@@ -38,13 +38,7 @@ export default function SettingsPaymentGateway(props) {
    EpayKey: '',
    Price: 7.3,
    MinTopUp: 1,
-    TopupGroupRatio: '',
-    CustomCallbackAddress: '',
-    PayMethods: '',
-    AmountOptions: '',
-    AmountDiscount: '',
  });
-  const [originInputs, setOriginInputs] = useState({});
  const formApiRef = useRef(null);

  useEffect(() => {
@@ -61,35 +55,9 @@ export default function SettingsPaymentGateway(props) {
          props.options.MinTopUp !== undefined
            ? parseFloat(props.options.MinTopUp)
            : 1,
-        TopupGroupRatio: props.options.TopupGroupRatio || '',
-        CustomCallbackAddress: props.options.CustomCallbackAddress || '',
-        PayMethods: props.options.PayMethods || '',
-        AmountOptions: props.options.AmountOptions || '',
-        AmountDiscount: props.options.AmountDiscount || '',
      };

-      // 美化 JSON 展示
-      try {
-        if (currentInputs.AmountOptions) {
-          currentInputs.AmountOptions = JSON.stringify(
-            JSON.parse(currentInputs.AmountOptions),
-            null,
-            2,
-          );
-        }
-      } catch {}
-      try {
-        if (currentInputs.AmountDiscount) {
-          currentInputs.AmountDiscount = JSON.stringify(
-            JSON.parse(currentInputs.AmountDiscount),
-            null,
-            2,
-          );
-        }
-      } catch {}
-
      setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
      formApiRef.current.setValues(currentInputs);
    }
  }, [props.options]);
@@ -104,40 +72,6 @@ export default function SettingsPaymentGateway(props) {
      return;
    }

-    if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
-      if (!verifyJSON(inputs.TopupGroupRatio)) {
-        showError(t('充值分组倍率不是合法的 JSON 字符串'));
-        return;
-      }
-    }
-
-    if (originInputs['PayMethods'] !== inputs.PayMethods) {
-      if (!verifyJSON(inputs.PayMethods)) {
-        showError(t('充值方式设置不是合法的 JSON 字符串'));
-        return;
-      }
-    }
-
-    if (
-      originInputs['AmountOptions'] !== inputs.AmountOptions &&
-      inputs.AmountOptions.trim() !== ''
-    ) {
-      if (!verifyJSON(inputs.AmountOptions)) {
-        showError(t('自定义充值数量选项不是合法的 JSON 数组'));
-        return;
-      }
-    }
-
-    if (
-      originInputs['AmountDiscount'] !== inputs.AmountDiscount &&
-      inputs.AmountDiscount.trim() !== ''
-    ) {
-      if (!verifyJSON(inputs.AmountDiscount)) {
-        showError(t('充值金额折扣配置不是合法的 JSON 对象'));
-        return;
-      }
-    }
-
    setLoading(true);
    try {
      const options = [
@@ -156,32 +90,7 @@ export default function SettingsPaymentGateway(props) {
      if (inputs.MinTopUp !== '') {
        options.push({ key: 'MinTopUp', value: inputs.MinTopUp.toString() });
      }
-      if (inputs.CustomCallbackAddress !== '') {
-        options.push({
-          key: 'CustomCallbackAddress',
-          value: inputs.CustomCallbackAddress,
-        });
-      }
-      if (originInputs['TopupGroupRatio'] !== inputs.TopupGroupRatio) {
-        options.push({ key: 'TopupGroupRatio', value: inputs.TopupGroupRatio });
-      }
-      if (originInputs['PayMethods'] !== inputs.PayMethods) {
-        options.push({ key: 'PayMethods', value: inputs.PayMethods });
-      }
-      if (originInputs['AmountOptions'] !== inputs.AmountOptions) {
-        options.push({
-          key: 'payment_setting.amount_options',
-          value: inputs.AmountOptions,
-        });
-      }
-      if (originInputs['AmountDiscount'] !== inputs.AmountDiscount) {
-        options.push({
-          key: 'payment_setting.amount_discount',
-          value: inputs.AmountDiscount,
-        });
-      }

-      // 发送请求
      const requestQueue = options.map((opt) =>
        API.put('/api/option/', {
          key: opt.key,
@@ -191,7 +100,6 @@ export default function SettingsPaymentGateway(props) {

      const results = await Promise.all(requestQueue);

-      // 检查所有请求是否成功
      const errorResults = results.filter((res) => !res.data.success);
      if (errorResults.length > 0) {
        errorResults.forEach((res) => {
@@ -199,8 +107,6 @@ export default function SettingsPaymentGateway(props) {
        });
      } else {
        showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
-        setOriginInputs({ ...inputs });
        props.refresh && props.refresh();
      }
    } catch (error) {
@@ -216,12 +122,15 @@ export default function SettingsPaymentGateway(props) {
        onValueChange={handleFormChange}
        getFormApi={(api) => (formApiRef.current = api)}
      >
-        <Form.Section text={t('支付设置')}>
-          <Text>
-            {t(
-              '（当前仅支持易支付接口，默认使用上方服务器地址作为回调地址！）',
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<Info size={16} />}
+            description={t(
+              '当前仅支持易支付接口，回调地址请在通用设置中配置。',
            )}
-          </Text>
+            style={{ marginBottom: 16 }}
+          />
          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
@@ -233,14 +142,14 @@ export default function SettingsPaymentGateway(props) {
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='EpayId'
-                label={t('易支付商户ID')}
+                label={t('商户 ID')}
                placeholder={t('例如：0001')}
              />
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='EpayKey'
-                label={t('易支付商户密钥')}
+                label={t('API 密钥')}
                placeholder={t('敏感信息不会发送到前端显示')}
                type='password'
              />
@@ -250,14 +159,7 @@ export default function SettingsPaymentGateway(props) {
            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
            style={{ marginTop: 16 }}
          >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='CustomCallbackAddress'
-                label={t('回调地址')}
-                placeholder={t('例如：https://yourdomain.com')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
              <Form.InputNumber
                field='Price'
                precision={2}
@@ -265,7 +167,7 @@ export default function SettingsPaymentGateway(props) {
                placeholder={t('例如：7，就是7元/美金')}
              />
            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
              <Form.InputNumber
                field='MinTopUp'
                label={t('最低充值美元数量')}
@@ -273,58 +175,9 @@ export default function SettingsPaymentGateway(props) {
              />
            </Col>
          </Row>
-          <Form.TextArea
-            field='TopupGroupRatio'
-            label={t('充值分组倍率')}
-            placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
-            autosize
-          />
-          <Form.TextArea
-            field='PayMethods'
-            label={t('充值方式设置')}
-            placeholder={t('为一个 JSON 文本')}
-            autosize
-          />
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col span={24}>
-              <Form.TextArea
-                field='AmountOptions'
-                label={t('自定义充值数量选项')}
-                placeholder={t(
-                  '为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-                autosize
-                extraText={t(
-                  '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col span={24}>
-              <Form.TextArea
-                field='AmountDiscount'
-                label={t('充值金额折扣配置')}
-                placeholder={t(
-                  '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-                autosize
-                extraText={t(
-                  '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-              />
-            </Col>
-          </Row>
-
-          <Button onClick={submitPayAddress}>{t('更新支付设置')}</Button>
+          <Button onClick={submitPayAddress} style={{ marginTop: 16 }}>
+            {t('更新易支付设置')}
+          </Button>
        </Form.Section>
      </Form>
    </Spin>
@@ -34,10 +34,11 @@ import {
 const { Text } = Typography;
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { Plus, Trash2 } from 'lucide-react';
+import { BookOpen, Plus, Trash2 } from 'lucide-react';

 export default function SettingsPaymentGatewayCreem(props) {
  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Creem 设置');
  const [loading, setLoading] = useState(false);
  const [inputs, setInputs] = useState({
    CreemApiKey: '',
@@ -259,15 +260,22 @@ export default function SettingsPaymentGatewayCreem(props) {
        onValueChange={handleFormChange}
        getFormApi={(api) => (formApiRef.current = api)}
      >
-        <Form.Section text={t('Creem 设置')}>
-          <Text>
-            {t('Creem 介绍')}
-            <a href='https://creem.io' target='_blank' rel='noreferrer'>
-              Creem Official Site
-            </a>
-            <br />
-          </Text>
-          <Banner type='info' description={t('Creem Setting Tips')} />
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                {t('Creem 介绍')}
+                <a href='https://creem.io' target='_blank' rel='noreferrer'>
+                  Creem Official Site
+                </a>
+                <br />
+                {t('Creem Setting Tips')}
+              </>
+            }
+            style={{ marginBottom: 16 }}
+          />

          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
@@ -281,7 +289,7 @@ export default function SettingsPaymentGatewayCreem(props) {
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='CreemWebhookSecret'
-                label={t('Webhook 密钥')}
+                label={t('Webhook 签名密钥')}
                placeholder={t(
                  '用于验证回调 new-api 的 webhook 请求的密钥，敏感信息不显示',
                )}
@@ -291,7 +299,7 @@ export default function SettingsPaymentGatewayCreem(props) {
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Switch
                field='CreemTestMode'
-                label={t('测试模式')}
+                label={t('沙盒模式')}
                extraText={t('启用后将使用 Creem Test Mode')}
              />
            </Col>
@@ -18,16 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */

 import React, { useEffect, useState, useRef } from 'react';
-import {
-  Banner,
-  Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Spin,
-} from '@douyinfe/semi-ui';
-const { Text } = Typography;
+import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
 import {
  API,
  removeTrailingSlash,
@@ -35,9 +26,11 @@ import {
  showSuccess,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';

 export default function SettingsPaymentGateway(props) {
  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Stripe 设置');
  const [loading, setLoading] = useState(false);
  const [inputs, setInputs] = useState({
    StripeApiSecret: '',
@@ -165,42 +158,53 @@ export default function SettingsPaymentGateway(props) {
        onValueChange={handleFormChange}
        getFormApi={(api) => (formApiRef.current = api)}
      >
-        <Form.Section text={t('Stripe 设置')}>
-          <Text>
-            Stripe 密钥、Webhook 等设置请
-            <a
-              href='https://dashboard.stripe.com/developers'
-              target='_blank'
-              rel='noreferrer'
-            >
-              点击此处
-            </a>
-            进行设置，最好先在
-            <a
-              href='https://dashboard.stripe.com/test/developers'
-              target='_blank'
-              rel='noreferrer'
-            >
-              测试环境
-            </a>
-            进行测试。
-            <br />
-          </Text>
+        <Form.Section text={sectionTitle}>
          <Banner
            type='info'
-            description={`Webhook 填：${props.options.ServerAddress ? removeTrailingSlash(props.options.ServerAddress) : t('网站地址')}/api/stripe/webhook`}
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Stripe 密钥、Webhook 等设置请
+                <a
+                  href='https://dashboard.stripe.com/developers'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  点击此处
+                </a>
+                进行设置，建议先在
+                <a
+                  href='https://dashboard.stripe.com/test/developers'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  测试环境
+                </a>
+                完成联调。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/stripe/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
          />
          <Banner
            type='warning'
-            description={`需要包含事件：checkout.session.completed 和 checkout.session.expired`}
+            icon={<TriangleAlert size={16} />}
+            description='需要包含事件：checkout.session.completed 和 checkout.session.expired'
+            style={{ marginBottom: 16 }}
          />
          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='StripeApiSecret'
                label={t('API 密钥')}
-                placeholder={t(
-                  'sk_xxx 或 rk_xxx 的 Stripe 密钥，敏感信息不显示',
+                placeholder={t('例如：sk_xxx 或 rk_xxx，留空表示保持当前不变')}
+                extraText={t(
+                  '保存后不会回显，请填写当前环境对应的 Stripe API 密钥',
                )}
                type='password'
              />
@@ -209,7 +213,8 @@ export default function SettingsPaymentGateway(props) {
              <Form.Input
                field='StripeWebhookSecret'
                label={t('Webhook 签名密钥')}
-                placeholder={t('whsec_xxx 的 Webhook 签名密钥，敏感信息不显示')}
+                placeholder={t('例如：whsec_xxx，留空表示保持当前不变')}
+                extraText={t('用于校验 Stripe Webhook 签名，保存后不会回显')}
                type='password'
              />
            </Col>
@@ -217,7 +222,8 @@ export default function SettingsPaymentGateway(props) {
              <Form.Input
                field='StripePriceId'
                label={t('商品价格 ID')}
-                placeholder={t('price_xxx 的商品价格 ID，新建产品后可获得')}
+                placeholder={t('例如：price_xxx')}
+                extraText={t('在 Stripe 后台创建价格后获得')}
              />
            </Col>
          </Row>
@@ -231,6 +237,7 @@ export default function SettingsPaymentGateway(props) {
                precision={2}
                label={t('充值价格（x元/美金）')}
                placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
              />
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
@@ -238,6 +245,7 @@ export default function SettingsPaymentGateway(props) {
                field='StripeMinTopUp'
                label={t('最低充值美元数量')}
                placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
              />
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
@@ -31,13 +31,21 @@ import {
  Input,
  Space,
 } from '@douyinfe/semi-ui';
-import { API, showError, showSuccess } from '../../../helpers';
+import {
+  API,
+  removeTrailingSlash,
+  showError,
+  showSuccess,
+} from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';

 const { Text } = Typography;
+const toBoolean = (value) => value === true || value === 'true';

 export default function SettingsPaymentGatewayWaffo(props) {
  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle ? undefined : t('Waffo 设置');
  const [loading, setLoading] = useState(false);
  const [inputs, setInputs] = useState({
    WaffoEnabled: false,
@@ -55,7 +63,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
    WaffoNotifyUrl: '',
    WaffoReturnUrl: '',
  });
-  const [originInputs, setOriginInputs] = useState({});
  const formApiRef = useRef(null);
  const iconFileInputRef = useRef(null);

@@ -93,14 +100,14 @@ export default function SettingsPaymentGatewayWaffo(props) {
  useEffect(() => {
    if (props.options && formApiRef.current) {
      const currentInputs = {
-        WaffoEnabled: props.options.WaffoEnabled === 'true' || props.options.WaffoEnabled === true,
+        WaffoEnabled: toBoolean(props.options.WaffoEnabled),
        WaffoApiKey: props.options.WaffoApiKey || '',
        WaffoPrivateKey: props.options.WaffoPrivateKey || '',
        WaffoPublicCert: props.options.WaffoPublicCert || '',
        WaffoSandboxPublicCert: props.options.WaffoSandboxPublicCert || '',
        WaffoSandboxApiKey: props.options.WaffoSandboxApiKey || '',
        WaffoSandboxPrivateKey: props.options.WaffoSandboxPrivateKey || '',
-        WaffoSandbox: props.options.WaffoSandbox === 'true',
+        WaffoSandbox: toBoolean(props.options.WaffoSandbox),
        WaffoMerchantId: props.options.WaffoMerchantId || '',
        WaffoCurrency: props.options.WaffoCurrency || 'USD',
        WaffoUnitPrice: parseFloat(props.options.WaffoUnitPrice) || 1.0,
@@ -109,7 +116,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
        WaffoReturnUrl: props.options.WaffoReturnUrl || '',
      };
      setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
      formApiRef.current.setValues(currentInputs);

      // 解析支付方式列表
@@ -149,15 +155,30 @@ export default function SettingsPaymentGatewayWaffo(props) {
        options.push({ key: 'WaffoPrivateKey', value: inputs.WaffoPrivateKey });
      }

-      options.push({ key: 'WaffoPublicCert', value: inputs.WaffoPublicCert || '' });
-      options.push({ key: 'WaffoSandboxPublicCert', value: inputs.WaffoSandboxPublicCert || '' });
+      options.push({
+        key: 'WaffoPublicCert',
+        value: inputs.WaffoPublicCert || '',
+      });
+      options.push({
+        key: 'WaffoSandboxPublicCert',
+        value: inputs.WaffoSandboxPublicCert || '',
+      });

      if (inputs.WaffoSandboxApiKey && inputs.WaffoSandboxApiKey !== '') {
-        options.push({ key: 'WaffoSandboxApiKey', value: inputs.WaffoSandboxApiKey });
+        options.push({
+          key: 'WaffoSandboxApiKey',
+          value: inputs.WaffoSandboxApiKey,
+        });
      }

-      if (inputs.WaffoSandboxPrivateKey && inputs.WaffoSandboxPrivateKey !== '') {
-        options.push({ key: 'WaffoSandboxPrivateKey', value: inputs.WaffoSandboxPrivateKey });
+      if (
+        inputs.WaffoSandboxPrivateKey &&
+        inputs.WaffoSandboxPrivateKey !== ''
+      ) {
+        options.push({
+          key: 'WaffoSandboxPrivateKey',
+          value: inputs.WaffoSandboxPrivateKey,
+        });
      }

      options.push({
@@ -165,7 +186,10 @@ export default function SettingsPaymentGatewayWaffo(props) {
        value: inputs.WaffoSandbox ? 'true' : 'false',
      });

-      options.push({ key: 'WaffoMerchantId', value: inputs.WaffoMerchantId || '' });
+      options.push({
+        key: 'WaffoMerchantId',
+        value: inputs.WaffoMerchantId || '',
+      });
      options.push({ key: 'WaffoCurrency', value: inputs.WaffoCurrency || '' });

      options.push({
@@ -178,8 +202,14 @@ export default function SettingsPaymentGatewayWaffo(props) {
        value: String(inputs.WaffoMinTopUp || 1),
      });

-      options.push({ key: 'WaffoNotifyUrl', value: inputs.WaffoNotifyUrl || '' });
-      options.push({ key: 'WaffoReturnUrl', value: inputs.WaffoReturnUrl || '' });
+      options.push({
+        key: 'WaffoNotifyUrl',
+        value: inputs.WaffoNotifyUrl || '',
+      });
+      options.push({
+        key: 'WaffoReturnUrl',
+        value: inputs.WaffoReturnUrl || '',
+      });

      // 保存支付方式列表
      options.push({
@@ -205,8 +235,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
        });
      } else {
        showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
-        setOriginInputs({ ...inputs });
        props.refresh?.();
      }
    } catch (error) {
@@ -218,7 +246,12 @@ export default function SettingsPaymentGatewayWaffo(props) {
  // 打开新增弹窗
  const openAddPayMethodModal = () => {
    setEditingPayMethodIndex(-1);
-    setPayMethodForm({ name: '', icon: '', payMethodType: '', payMethodName: '' });
+    setPayMethodForm({
+      name: '',
+      icon: '',
+      payMethodType: '',
+      payMethodName: '',
+    });
    setPayMethodModalVisible(true);
  };

@@ -324,19 +357,32 @@ export default function SettingsPaymentGatewayWaffo(props) {
        onValueChange={handleFormChange}
        getFormApi={(api) => (formApiRef.current = api)}
      >
-        <Form.Section text={t('Waffo 设置')}>
-          <Text>
-            {t('Waffo 是一个支付聚合平台，支持多种支付方式。')}
-            <a href='https://waffo.com' target='_blank' rel='noreferrer'>
-              Waffo Official Site
-            </a>
-            <br />
-          </Text>
+        <Form.Section text={sectionTitle}>
          <Banner
            type='info'
-            description={t(
-              '请在 Waffo 后台获取 API 密钥、商户 ID 以及 RSA 密钥对，并配置回调地址。',
-            )}
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Waffo 密钥、商户和支付方式等设置请
+                <a href='https://waffo.com' target='_blank' rel='noreferrer'>
+                  点击此处
+                </a>
+                进行配置，切换沙盒模式时请同步填写对应环境的密钥。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/waffo/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
+          />
+          <Banner
+            type='warning'
+            icon={<TriangleAlert size={16} />}
+            description={t('请确认商户和所选环境密钥一致。')}
+            style={{ marginBottom: 16 }}
          />

          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
@@ -356,161 +402,188 @@ export default function SettingsPaymentGatewayWaffo(props) {
                size='default'
                checkedText='｜'
                uncheckedText='〇'
-                extraText={t('启用后将使用 Waffo 沙盒环境')}
+                extraText={t('用于切换当前下单和回调校验所使用的环境')}
              />
            </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoApiKey'
-                label={t('API 密钥 (生产)')}
-                placeholder={t('生产环境 Waffo API 密钥')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoSandboxApiKey'
-                label={t('API 密钥 (沙盒)')}
-                placeholder={t('沙盒环境 Waffo API 密钥')}
-                type='password'
-              />
-            </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='WaffoMerchantId'
                label={t('商户 ID')}
-                placeholder={t('Waffo 商户 ID')}
+                placeholder={t('例如：MER_xxx')}
+                extraText={t('当前环境共用同一商户 ID')}
              />
            </Col>
          </Row>

-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoApiKey'
+                label={t('API 密钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境 API 密钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写生产环境对应的 API 密钥')}
+                type='password'
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.TextArea
                field='WaffoPrivateKey'
-                label={t('RSA 私钥 (生产)')}
-                placeholder={t('生产环境 RSA 私钥 Base64 (PKCS#8 DER)')}
+                label={t('API 私钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境私钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写生产环境对应的 API 私钥')}
                type='password'
                autosize={{ minRows: 3, maxRows: 6 }}
              />
            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoSandboxPrivateKey'
-                label={t('RSA 私钥 (沙盒)')}
-                placeholder={t('沙盒环境 RSA 私钥 Base64 (PKCS#8 DER)')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-          </Row>
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.TextArea
                field='WaffoPublicCert'
-                label={t('Waffo 公钥 (生产)')}
-                placeholder={t('生产环境 Waffo 公钥 Base64 (X.509 DER)')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoSandboxPublicCert'
-                label={t('Waffo 公钥 (沙盒)')}
-                placeholder={t('沙盒环境 Waffo 公钥 Base64 (X.509 DER)')}
+                label={t('Waffo 公钥（生产环境）')}
+                placeholder={t(
+                  '填写生产环境 Waffo 公钥，Base64 或 PEM 内容均可',
+                )}
+                extraText={t('用于校验生产环境的 Waffo 回调签名')}
                type='password'
                autosize={{ minRows: 3, maxRows: 6 }}
              />
            </Col>
          </Row>

-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoSandboxApiKey'
+                label={t('API 密钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境 API 密钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写测试环境对应的 API 密钥')}
+                type='password'
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.TextArea
+                field='WaffoSandboxPrivateKey'
+                label={t('API 私钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境私钥，留空表示保持当前不变',
+                )}
+                extraText={t('保存后不会回显，请填写测试环境对应的 API 私钥')}
+                type='password'
+                autosize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.TextArea
+                field='WaffoSandboxPublicCert'
+                label={t('Waffo 公钥（测试环境）')}
+                placeholder={t(
+                  '填写测试环境 Waffo 公钥，Base64 或 PEM 内容均可',
+                )}
+                extraText={t('用于校验测试环境的 Waffo 回调签名')}
+                type='password'
+                autosize={{ minRows: 3, maxRows: 6 }}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.Input
                field='WaffoCurrency'
                label={t('货币')}
+                placeholder='USD'
+                extraText={t('Waffo 当前使用 USD 结算')}
                disabled
              />
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.InputNumber
                field='WaffoUnitPrice'
-                label={t('单价 (USD)')}
-                placeholder='1.0'
+                precision={2}
+                label={t('充值价格（x元/美金）')}
+                placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
                min={0}
-                step={0.1}
-                extraText={t('每个充值单位对应的 USD 金额，默认 1.0')}
              />
            </Col>
            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
              <Form.InputNumber
                field='WaffoMinTopUp'
-                label={t('最低充值数量')}
-                placeholder='1'
+                label={t('最低充值美元数量')}
+                placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
                min={1}
-                step={1}
-                extraText={t('Waffo 充值的最低数量，默认 1')}
              />
            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
              <Form.Input
                field='WaffoNotifyUrl'
-                label={t('回调通知地址')}
-                placeholder={t('例如 https://example.com/api/waffo/webhook')}
-                extraText={t('留空则自动使用 服务器地址 + /api/waffo/webhook')}
+                label={t('回调地址')}
+                placeholder={t('例如：https://example.com/api/waffo/webhook')}
+                extraText={t('留空则自动使用当前站点的默认回调地址')}
              />
            </Col>
            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
              <Form.Input
                field='WaffoReturnUrl'
                label={t('支付返回地址')}
-                placeholder={t('例如 https://example.com/console/topup')}
-                extraText={t('支付完成后用户跳转的页面，留空则自动使用 服务器地址 + /console/topup')}
+                placeholder={t('例如：https://example.com/console/topup')}
+                extraText={t('留空则自动使用当前站点的默认充值页地址')}
              />
            </Col>
          </Row>
+        </Form.Section>

+        <Form.Section text={t('支付方式设置')}>
+          <Text type='secondary'>
+            {t(
+              '这里配置 Waffo 下展示给用户的 Card、Apple Pay、Google Pay 等子支付方式。',
+            )}
+          </Text>
+          <div style={{ marginTop: 12, marginBottom: 12 }}>
+            <Button onClick={openAddPayMethodModal}>{t('新增支付方式')}</Button>
+          </div>
+          <Table
+            columns={payMethodColumns}
+            dataSource={waffoPayMethods}
+            rowKey={(record, index) => index}
+            pagination={false}
+            size='small'
+            empty={
+              <Text type='tertiary'>{t('暂无支付方式，点击上方按钮新增')}</Text>
+            }
+          />
          <Button onClick={submitWaffoSetting} style={{ marginTop: 16 }}>
            {t('更新 Waffo 设置')}
          </Button>
        </Form.Section>
      </Form>

-      {/* 支付方式配置区块（独立于 Form，使用独立状态管理） */}
-      <div style={{ marginTop: 24 }}>
-        <Typography.Title heading={6} style={{ marginBottom: 8 }}>{t('支付方式')}</Typography.Title>
-        <Text type='secondary'>
-          {t('配置 Waffo 充值时可用的支付方式，保存后在充值页面展示给用户。')}
-        </Text>
-        <div style={{ marginTop: 12, marginBottom: 12 }}>
-          <Button onClick={openAddPayMethodModal}>
-            {t('新增支付方式')}
-          </Button>
-        </div>
-        <Table
-          columns={payMethodColumns}
-          dataSource={waffoPayMethods}
-          rowKey={(record, index) => index}
-          pagination={false}
-          size='small'
-          empty={<Text type='tertiary'>{t('暂无支付方式，点击上方按钮新增')}</Text>}
-        />
-        <Button onClick={submitWaffoSetting} style={{ marginTop: 16 }}>
-          {t('更新 Waffo 设置')}
-        </Button>
-      </div>
-
      {/* 新增/编辑支付方式弹窗 */}
      <Modal
-        title={editingPayMethodIndex === -1 ? t('新增支付方式') : t('编辑支付方式')}
+        title={
+          editingPayMethodIndex === -1 ? t('新增支付方式') : t('编辑支付方式')
+        }
        visible={payMethodModalVisible}
        onOk={handlePayMethodModalOk}
        onCancel={() => setPayMethodModalVisible(false)}
@@ -521,14 +594,22 @@ export default function SettingsPaymentGatewayWaffo(props) {
          <div>
            <div style={{ marginBottom: 4 }}>
              <Text strong>{t('显示名称')}</Text>
-              <span style={{ color: 'var(--semi-color-danger)', marginLeft: 4 }}>*</span>
+              <span
+                style={{ color: 'var(--semi-color-danger)', marginLeft: 4 }}
+              >
+                *
+              </span>
            </div>
            <Input
              value={payMethodForm.name}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, name: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, name: val })
+              }
              placeholder={t('例如：Credit Card')}
            />
-            <Text type='tertiary' size='small'>{t('用户在充值页面看到的支付方式名称，例如：Credit Card')}</Text>
+            <Text type='tertiary' size='small'>
+              {t('用户在充值页面看到的支付方式名称，例如：Credit Card')}
+            </Text>
          </div>
          <div>
            <div style={{ marginBottom: 4 }}>
@@ -574,32 +655,44 @@ export default function SettingsPaymentGatewayWaffo(props) {
              )}
            </Space>
            <div>
-              <Text type='tertiary' size='small'>{t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}</Text>
+              <Text type='tertiary' size='small'>
+                {t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}
+              </Text>
            </div>
          </div>
          <div>
            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('Pay Method Type')}</Text>
+              <Text strong>{t('支付方式类型')}</Text>
            </div>
            <Input
              value={payMethodForm.payMethodType}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, payMethodType: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, payMethodType: val })
+              }
              placeholder='CREDITCARD,DEBITCARD'
              maxLength={64}
            />
-            <Text type='tertiary' size='small'>{t('Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）')}</Text>
+            <Text type='tertiary' size='small'>
+              {t(
+                'Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）',
+              )}
+            </Text>
          </div>
          <div>
            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('Pay Method Name')}</Text>
+              <Text strong>{t('支付方式名称')}</Text>
            </div>
            <Input
              value={payMethodForm.payMethodName}
-              onChange={(val) => setPayMethodForm({ ...payMethodForm, payMethodName: val })}
+              onChange={(val) =>
+                setPayMethodForm({ ...payMethodForm, payMethodName: val })
+              }
              placeholder={t('可空')}
              maxLength={64}
            />
-            <Text type='tertiary' size='small'>{t('Waffo API 参数，可空（最多64位）')}</Text>
+            <Text type='tertiary' size='small'>
+              {t('Waffo API 参数，可空（最多64位）')}
+            </Text>
          </div>
        </div>
      </Modal>
@@ -0,0 +1,411 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useRef, useState } from 'react';
+import { Banner, Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import {
+  API,
+  removeTrailingSlash,
+  showError,
+  showSuccess,
+} from '../../../helpers';
+import { useTranslation } from 'react-i18next';
+import { BookOpen, TriangleAlert } from 'lucide-react';
+
+const defaultInputs = {
+  WaffoPancakeEnabled: false,
+  WaffoPancakeSandbox: false,
+  WaffoPancakeMerchantID: '',
+  WaffoPancakePrivateKey: '',
+  WaffoPancakeWebhookPublicKey: '',
+  WaffoPancakeWebhookTestKey: '',
+  WaffoPancakeStoreID: '',
+  WaffoPancakeProductID: '',
+  WaffoPancakeReturnURL: '',
+  WaffoPancakeCurrency: 'USD',
+  WaffoPancakeUnitPrice: 1.0,
+  WaffoPancakeMinTopUp: 1,
+};
+
+const toBoolean = (value) => value === true || value === 'true';
+
+export default function SettingsPaymentGatewayWaffoPancake(props) {
+  const { t } = useTranslation();
+  const sectionTitle = props.hideSectionTitle
+    ? undefined
+    : t('Waffo Pancake 设置');
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState(defaultInputs);
+  const formApiRef = useRef(null);
+
+  useEffect(() => {
+    if (!props.options || !formApiRef.current) return;
+
+    const currentInputs = {
+      WaffoPancakeEnabled: toBoolean(props.options.WaffoPancakeEnabled),
+      WaffoPancakeSandbox: toBoolean(props.options.WaffoPancakeSandbox),
+      WaffoPancakeMerchantID: props.options.WaffoPancakeMerchantID || '',
+      WaffoPancakePrivateKey: props.options.WaffoPancakePrivateKey || '',
+      WaffoPancakeWebhookPublicKey:
+        props.options.WaffoPancakeWebhookPublicKey || '',
+      WaffoPancakeWebhookTestKey:
+        props.options.WaffoPancakeWebhookTestKey || '',
+      WaffoPancakeStoreID: props.options.WaffoPancakeStoreID || '',
+      WaffoPancakeProductID: props.options.WaffoPancakeProductID || '',
+      WaffoPancakeReturnURL: props.options.WaffoPancakeReturnURL || '',
+      WaffoPancakeCurrency: props.options.WaffoPancakeCurrency || 'USD',
+      WaffoPancakeUnitPrice:
+        props.options.WaffoPancakeUnitPrice !== undefined
+          ? parseFloat(props.options.WaffoPancakeUnitPrice)
+          : 1.0,
+      WaffoPancakeMinTopUp:
+        props.options.WaffoPancakeMinTopUp !== undefined
+          ? parseFloat(props.options.WaffoPancakeMinTopUp)
+          : 1,
+    };
+
+    setInputs(currentInputs);
+    formApiRef.current.setValues(currentInputs);
+  }, [props.options]);
+
+  const handleFormChange = (values) => {
+    setInputs(values);
+  };
+
+  const submitWaffoPancakeSetting = async () => {
+    const values = {
+      ...inputs,
+      ...(formApiRef.current?.getValues?.() || {}),
+    };
+    values.WaffoPancakeEnabled = toBoolean(values.WaffoPancakeEnabled);
+    values.WaffoPancakeSandbox = toBoolean(values.WaffoPancakeSandbox);
+    const currentWebhookField = values.WaffoPancakeSandbox
+      ? 'WaffoPancakeWebhookTestKey'
+      : 'WaffoPancakeWebhookPublicKey';
+    const currentWebhookLabel = values.WaffoPancakeSandbox
+      ? t('Webhook 公钥（测试环境）')
+      : t('Webhook 公钥（生产环境）');
+
+      if (values.WaffoPancakeEnabled && !values.WaffoPancakeMerchantID.trim()) {
+      showError(t('请输入商户 ID'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && !values.WaffoPancakeStoreID.trim()) {
+      showError(t('请输入 Store ID'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && !values.WaffoPancakeProductID.trim()) {
+      showError(t('请输入 Product ID'));
+      return;
+    }
+
+    if (
+      values.WaffoPancakeEnabled &&
+      !String(values[currentWebhookField] || '').trim()
+    ) {
+      showError(currentWebhookLabel);
+      return;
+    }
+
+    if (
+      values.WaffoPancakeEnabled &&
+      Number(values.WaffoPancakeUnitPrice) <= 0
+    ) {
+      showError(t('充值价格必须大于 0'));
+      return;
+    }
+
+    if (values.WaffoPancakeEnabled && Number(values.WaffoPancakeMinTopUp) < 1) {
+      showError(t('最低充值美元数量必须大于 0'));
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const options = [
+        {
+          key: 'WaffoPancakeEnabled',
+          value: values.WaffoPancakeEnabled ? 'true' : 'false',
+        },
+        {
+          key: 'WaffoPancakeSandbox',
+          value: values.WaffoPancakeSandbox ? 'true' : 'false',
+        },
+        {
+          key: 'WaffoPancakeMerchantID',
+          value: values.WaffoPancakeMerchantID || '',
+        },
+        {
+          key: 'WaffoPancakeStoreID',
+          value: values.WaffoPancakeStoreID || '',
+        },
+        {
+          key: 'WaffoPancakeProductID',
+          value: values.WaffoPancakeProductID || '',
+        },
+        {
+          key: 'WaffoPancakeReturnURL',
+          value: removeTrailingSlash(values.WaffoPancakeReturnURL || ''),
+        },
+        {
+          key: 'WaffoPancakeCurrency',
+          value: values.WaffoPancakeCurrency || 'USD',
+        },
+        {
+          key: 'WaffoPancakeUnitPrice',
+          value: String(values.WaffoPancakeUnitPrice),
+        },
+        {
+          key: 'WaffoPancakeMinTopUp',
+          value: String(values.WaffoPancakeMinTopUp),
+        },
+      ];
+
+      if ((values.WaffoPancakePrivateKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakePrivateKey',
+          value: values.WaffoPancakePrivateKey,
+        });
+      }
+
+      if ((values.WaffoPancakeWebhookPublicKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakeWebhookPublicKey',
+          value: values.WaffoPancakeWebhookPublicKey,
+        });
+      }
+
+      if ((values.WaffoPancakeWebhookTestKey || '').trim()) {
+        options.push({
+          key: 'WaffoPancakeWebhookTestKey',
+          value: values.WaffoPancakeWebhookTestKey,
+        });
+      }
+
+      const results = await Promise.all(
+        options.map((opt) =>
+          API.put('/api/option/', {
+            key: opt.key,
+            value: opt.value,
+          }),
+        ),
+      );
+
+      const errorResults = results.filter((res) => !res.data.success);
+      if (errorResults.length > 0) {
+        errorResults.forEach((res) => showError(res.data.message));
+        return;
+      }
+
+      showSuccess(t('更新成功'));
+      props.refresh?.();
+    } catch (error) {
+      showError(t('更新失败'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        initValues={inputs}
+        onValueChange={handleFormChange}
+        getFormApi={(api) => (formApiRef.current = api)}
+      >
+        <Form.Section text={sectionTitle}>
+          <Banner
+            type='info'
+            icon={<BookOpen size={16} />}
+            description={
+              <>
+                Waffo Pancake 的商户、商品和签名密钥请
+                <a
+                  href='https://docs.waffo.ai'
+                  target='_blank'
+                  rel='noreferrer'
+                >
+                  点击此处
+                </a>
+                获取，建议先在测试环境完成联调。
+                <br />
+                {t('回调地址')}：
+                {props.options.ServerAddress
+                  ? removeTrailingSlash(props.options.ServerAddress)
+                  : t('网站地址')}
+                /api/waffo-pancake/webhook
+              </>
+            }
+            style={{ marginBottom: 12 }}
+          />
+          <Banner
+            type='warning'
+            icon={<TriangleAlert size={16} />}
+            description={t(
+              '请确认 Merchant、Store、Product 和所选环境密钥一致。',
+            )}
+            style={{ marginBottom: 16 }}
+          />
+          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Switch
+                field='WaffoPancakeEnabled'
+                label={t('启用 Waffo Pancake')}
+                checkedText='｜'
+                uncheckedText='〇'
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Switch
+                field='WaffoPancakeSandbox'
+                label={t('沙盒模式')}
+                checkedText='｜'
+                uncheckedText='〇'
+                extraText={t('用于切换当前下单和回调校验所使用的环境')}
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeCurrency'
+                label={t('货币')}
+                placeholder='USD'
+                extraText={t('默认使用 USD 结算')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeMerchantID'
+                label={t('商户 ID')}
+                placeholder={t('例如：MER_xxx')}
+                extraText={t('请填写当前环境对应的商户 ID')}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeStoreID'
+                label={t('Store ID')}
+                placeholder={t('例如：STO_xxx')}
+                extraText={t('请填写当前环境对应的 Store ID')}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+              <Form.Input
+                field='WaffoPancakeProductID'
+                label={t('Product ID')}
+                placeholder={t('例如：PROD_xxx')}
+                extraText={t('请填写当前环境对应的 Product ID')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakePrivateKey'
+                label={t('API 私钥')}
+                placeholder={t('填写后覆盖当前私钥，留空表示保持当前不变')}
+                extraText={t('保存后不会回显，请填写当前环境对应的 API 私钥')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.Input
+                field='WaffoPancakeReturnURL'
+                label={t('支付返回地址')}
+                placeholder={t('例如：https://example.com/console/topup')}
+                extraText={t('留空则自动使用当前站点的默认充值页地址')}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakeWebhookPublicKey'
+                label={t('Webhook 公钥（生产环境）')}
+                placeholder={t(
+                  '填写后覆盖当前生产环境 Webhook 公钥，留空表示保持当前不变',
+                )}
+                extraText={t('用于校验生产环境的 Waffo Pancake Webhook 签名')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
+              <Form.TextArea
+                field='WaffoPancakeWebhookTestKey'
+                label={t('Webhook 公钥（测试环境）')}
+                placeholder={t(
+                  '填写后覆盖当前测试环境 Webhook 公钥，留空表示保持当前不变',
+                )}
+                extraText={t('用于校验测试环境的 Waffo Pancake Webhook 签名')}
+                type='password'
+                autosize={{ minRows: 4, maxRows: 8 }}
+              />
+            </Col>
+          </Row>
+
+          <Row
+            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
+            style={{ marginTop: 16 }}
+          >
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.InputNumber
+                field='WaffoPancakeUnitPrice'
+                precision={2}
+                label={t('充值价格（x元/美金）')}
+                placeholder={t('例如：7，就是7元/美金')}
+                extraText={t('按 1 美元对应的站内价格填写')}
+                min={0}
+              />
+            </Col>
+            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
+              <Form.InputNumber
+                field='WaffoPancakeMinTopUp'
+                label={t('最低充值美元数量')}
+                placeholder={t('例如：2，就是最低充值2$')}
+                extraText={t('用户单次最少可充值的美元数量')}
+                min={1}
+              />
+            </Col>
+          </Row>
+
+          <Button onClick={submitWaffoPancakeSetting}>
+            {t('更新 Waffo Pancake 设置')}
+          </Button>
+        </Form.Section>
+      </Form>
+    </Spin>
+  );
+}