feat(billing): 支付 P5.2 —— 微信支付 Native 渠道（扫码充值）

wechatpay-go v0.2.21。凭据全 env 注入(WECHAT_MCHID/MCH_CERT_SERIAL/ MCH_PRIVATE_KEY/APIV3_KEY/APPID/NOTIFY_URL),缺一渠道即隐藏——半配置/假凭据只打日志不拖垮 gateway(用假私钥实测过降级)。 - internal/payment:Native 下单出 code_url、APIv3 回调验签解密、主动查单, 三者统一收敛为 QueryResult。 - 下单 POST /billing/orders {pack_id}(≥member+审计):金额/积分按在售包服务端锁定进订单行,不信任客户端;渠道下单失败即作废,不留付不了的 pending。 - 到账两条路汇入同一个 MarkOrderPaid 幂等闸(CAS+唯一索引双闸,同 P5.1): ①公开回调路由(验签是唯一的门;金额与订单不符不入账);②前端轮询的 GET /billing/orders/:id 在 pending 时顺路主动查单——本地/内网收不到公网回调也能确认到账,回调只是生产更快的通道。pending 超 30 分钟置 expired。 - Web 面:在售包卡片(渠道亮才出现)→扫码弹窗(qrcode 画 code_url,二维码底色固定纯白——暗色主题下低对比码扫不出来)→2.5s 轮询→到账 toast+刷余额。验证:go/tsc/vitest 全绿;无凭据+假凭据两种降级 live 四连 (channels 只剩 redeem/下单 400 引导兑换码/回调 503/兑换码闭环不受影响)。 ⚠️ 真通道(prepay→扫码→回调/查单→入账)需真实商户号,未 live——用户配好 env 后用小额包实测,建议先配 ¥0.01 测试包走一单。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-17 10:39:24 +08:00
parent 929bbf334b
commit efd185b779
11 changed files with 921 additions and 46 deletions
@@ -9,11 +9,13 @@
      "version": "0.1.0",
      "dependencies": {
        "lucide-react": "^1.17.0",
+        "qrcode": "^1.5.4",
        "react": "^19.0.0",
        "react-dom": "^19.0.0",
        "react-router-dom": "^7.1.0"
      },
      "devDependencies": {
+        "@types/qrcode": "^1.5.6",
        "@types/react": "^19.0.0",
        "@types/react-dom": "^19.0.0",
        "@vitejs/plugin-react": "^4.3.0",
@@ -1841,6 +1843,26 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/node": {
+      "version": "26.1.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-26.1.1.tgz",
+      "integrity": "sha512-nxAkRSVkN1Y0JC1W8ky/fTfkGsMmcrRsbx+3XoZE+rMOX71kLYTV7fLXpqud1GpbpP5TuffXFqfX7fH2GgZREw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~8.3.0"
+      }
+    },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.6.tgz",
+      "integrity": "sha512-te7NQcV2BOvdj2b1hCAHzAoMNuj65kNBMz0KBaxM6c3VGBOhU0dURQKOtH8CFNI/dsKkwlv32p26qYQTWoB5bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
    "node_modules/@types/react": {
      "version": "19.2.17",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
@@ -1968,6 +1990,30 @@
        "url": "https://opencollective.com/vitest"
      }
    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
    "node_modules/any-promise": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
@@ -2126,6 +2172,15 @@
        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
      }
    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -2205,6 +2260,35 @@
        "node": ">= 6"
      }
    },
+    "node_modules/cliui": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.0",
+        "wrap-ansi": "^6.2.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
    "node_modules/commander": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
@@ -2301,6 +2385,15 @@
        }
      }
    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/decimal.js": {
      "version": "10.6.0",
      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.6.0.tgz",
@@ -2325,6 +2418,12 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/dijkstrajs": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
+      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
+      "license": "MIT"
+    },
    "node_modules/dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -2339,6 +2438,12 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "license": "MIT"
+    },
    "node_modules/entities": {
      "version": "8.0.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
@@ -2491,6 +2596,19 @@
        "node": ">=8"
      }
    },
+    "node_modules/find-up": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "5.3.4",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
@@ -2540,6 +2658,15 @@
        "node": ">=6.9.0"
      }
    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
    "node_modules/glob-parent": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2618,6 +2745,15 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/is-glob": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -3023,6 +3159,18 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3175,6 +3323,42 @@
        "node": ">=12.20.0"
      }
    },
+    "node_modules/p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
+      "dependencies": {
+        "p-try": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/parse5": {
      "version": "8.0.1",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-8.0.1.tgz",
@@ -3188,6 +3372,15 @@
        "url": "https://github.com/inikulin/parse5?sponsor=1"
      }
    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/path-parse": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -3242,6 +3435,15 @@
        "node": ">= 6"
      }
    },
+    "node_modules/pngjs": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
+      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.19",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.19.tgz",
@@ -3415,6 +3617,23 @@
        "node": ">=6"
      }
    },
+    "node_modules/qrcode": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
+      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
+      "license": "MIT",
+      "dependencies": {
+        "dijkstrajs": "^1.0.1",
+        "pngjs": "^5.0.0",
+        "yargs": "^15.3.1"
+      },
+      "bin": {
+        "qrcode": "bin/qrcode"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3528,6 +3747,15 @@
        "node": ">=8.10.0"
      }
    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/require-from-string": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
@@ -3538,6 +3766,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
+      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
+      "license": "ISC"
+    },
    "node_modules/resolve": {
      "version": "1.22.12",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
@@ -3710,6 +3944,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "license": "ISC"
+    },
    "node_modules/set-cookie-parser": {
      "version": "2.7.2",
      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
@@ -3747,6 +3987,32 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/sucrase": {
      "version": "3.35.1",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -4024,6 +4290,13 @@
        "node": ">=20.18.1"
      }
    },
+    "node_modules/undici-types": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-8.3.0.tgz",
+      "integrity": "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==",
+      "dev": true,
+      "license": "MIT"
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
@@ -4836,6 +5109,12 @@
        "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
      }
    },
+    "node_modules/which-module": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
+      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
+      "license": "ISC"
+    },
    "node_modules/why-is-node-running": {
      "version": "2.3.0",
      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
@@ -4853,6 +5132,20 @@
        "node": ">=8"
      }
    },
+    "node_modules/wrap-ansi": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/xml-name-validator": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
@@ -4870,12 +5163,53 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
+      "license": "ISC"
+    },
    "node_modules/yallist": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
      "dev": true,
      "license": "ISC"
+    },
+    "node_modules/yargs": {
+      "version": "15.4.1",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
+      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^6.0.0",
+        "decamelize": "^1.2.0",
+        "find-up": "^4.1.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^4.2.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^18.1.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "18.1.3",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
+      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
+      "license": "ISC",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
    }
  }
 }
@@ -12,11 +12,13 @@
  },
  "dependencies": {
    "lucide-react": "^1.17.0",
+    "qrcode": "^1.5.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^7.1.0"
  },
  "devDependencies": {
+    "@types/qrcode": "^1.5.6",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "@vitejs/plugin-react": "^4.3.0",
@@ -256,6 +256,40 @@ export interface TopupOrder {
  created_at: string;
 }

+export interface Pack {
+  id: string;
+  name: string;
+  credits_micro: number;
+  price_fen: number;
+}
+
+// billingPacks 在售积分包 + 可用渠道（服务端配了微信 env 才会出现 "wechat"）。
+export async function billingPacks(): Promise<{ packs: Pack[]; channels: string[] }> {
+  const res = guard401(await fetch(`${GATEWAY}/api/v1/billing/packs`, { headers: bearer() }));
+  if (!res.ok) return { packs: [], channels: [] };
+  const d = (await res.json()) as { packs?: Pack[]; channels?: string[] };
+  return { packs: d.packs ?? [], channels: d.channels ?? [] };
+}
+
+// createWechatOrder 微信 Native 下单：返回订单号 + code_url（渲染成二维码扫码付）。
+export async function createWechatOrder(packId: string): Promise<{ order_id: string; code_url: string; amount_fen: number }> {
+  const res = guard401(
+    await fetch(`${GATEWAY}/api/v1/billing/orders`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...bearer() },
+      body: JSON.stringify({ pack_id: packId }),
+    }),
+  );
+  return jsonOrThrow(res, "下单失败");
+}
+
+// orderStatus 轮询订单态（pending 时服务端顺路主动查单，本地也能确认到账）。
+export async function orderStatus(orderId: string): Promise<TopupOrder> {
+  const res = guard401(await fetch(`${GATEWAY}/api/v1/billing/orders/${orderId}`, { headers: bearer() }));
+  const d = await jsonOrThrow<{ order: TopupOrder }>(res, "查询失败");
+  return d.order;
+}
+
 // redeemCode 核销兑换码，返回入账后的余额。
 export async function redeemCode(code: string): Promise<{ balance_micro: number }> {
  const res = guard401(
@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useState } from "react";
-import { Coins, ReceiptText, Ticket } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import QRCode from "qrcode";
+import { Coins, ReceiptText, Ticket, QrCode } from "lucide-react";
 import { useTenant } from "../shell/AppShell";
-import { myUsage, redeemCode, billingOrders, fmtCredits, type MyUsage, type TopupOrder } from "../api";
-import { Badge, Button, Input, Panel, Table, Tr, Td, cn, useToast } from "../ui";
+import { myUsage, redeemCode, billingOrders, billingPacks, createWechatOrder, orderStatus, fmtCredits, type MyUsage, type TopupOrder, type Pack } from "../api";
+import { Badge, Button, Dialog, Input, Panel, Table, Tr, Td, cn, useToast } from "../ui";

 // 用量与账单：余额 + 兑换码充值(P5.1) + 消耗趋势 + 最近消耗/充值。
 // 微信扫码支付在 P5.2 挂上（渠道适配器已留位），此前不做假支付入口。
@@ -14,10 +15,19 @@ export function Usage() {
  const [orders, setOrders] = useState<TopupOrder[]>([]);
  const [code, setCode] = useState("");
  const [busy, setBusy] = useState(false);
+  const [packs, setPacks] = useState<Pack[]>([]);
+  const [wechatOn, setWechatOn] = useState(false); // 服务端配了商户号才亮
+  const [paying, setPaying] = useState<Pack | null>(null); // 正在扫码支付的包

  const load = useCallback(() => {
    myUsage(days).then(setU).catch(() => {});
    billingOrders().then(setOrders).catch(() => {});
+    billingPacks()
+      .then((r) => {
+        setPacks(r.packs);
+        setWechatOn(r.channels.includes("wechat"));
+      })
+      .catch(() => {});
  }, [days]);
  useEffect(load, [load, ctx?.tenant?.id]);

@@ -65,6 +75,26 @@ export function Usage() {
        </div>
        {canTopup ? (
          <div className="mt-4 border-t border-line pt-4">
+            {/* 微信扫码：服务端配了商户号且有在售包才出现 */}
+            {wechatOn && packs.length > 0 && (
+              <div className="mb-4">
+                <div className="mb-2 flex items-center gap-1.5 text-xs font-medium text-slate-400">
+                  <QrCode className="h-3.5 w-3.5" /> 微信扫码充值
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {packs.map((p) => (
+                    <button key={p.id} onClick={() => setPaying(p)}
+                      className="group rounded-lg border border-line bg-ink-850 px-4 py-2.5 text-left transition-colors hover:border-brand/50">
+                      <div className="text-sm font-medium text-slate-200">{p.name}</div>
+                      <div className="mt-0.5 text-xs text-slate-500">
+                        <span className="tabular-nums text-brand-400">{fmtCredits(p.credits_micro)}</span> 积分 ·
+                        <span className="ml-1 tabular-nums">¥{(p.price_fen / 100).toFixed(2)}</span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
            <div className="mb-2 flex items-center gap-1.5 text-xs font-medium text-slate-400">
              <Ticket className="h-3.5 w-3.5" /> 兑换码充值
            </div>
@@ -79,7 +109,9 @@ export function Usage() {
              <Button variant="primary" onClick={redeem} disabled={busy || !code.trim()}>
                {busy ? "入账中…" : "兑换"}
              </Button>
-              <span className="text-[11px] text-slate-600">微信扫码支付即将上线；兑换码请向平台获取。</span>
+              <span className="text-[11px] text-slate-600">
+                {wechatOn ? "兑换码请向平台获取。" : "微信扫码支付即将上线；兑换码请向平台获取。"}
+              </span>
            </div>
          </div>
        ) : (
@@ -153,6 +185,91 @@ export function Usage() {
          </Table>
        </Panel>
      )}
+
+      {paying && (
+        <PayDialog
+          pack={paying}
+          onClose={(paid) => {
+            setPaying(null);
+            if (paid) {
+              toast.push("success", "支付成功，积分已入账");
+              load();
+              refresh();
+            }
+          }}
+        />
+      )}
    </div>
  );
 }
+
+// PayDialog 微信 Native 扫码支付：下单 → code_url 画二维码 → 轮询单态（2.5s；
+// 服务端 pending 时会顺路主动查单，收不到公网回调的环境也能确认到账）。
+function PayDialog({ pack, onClose }: { pack: Pack; onClose: (paid: boolean) => void }) {
+  const [qr, setQr] = useState("");
+  const [err, setErr] = useState("");
+  const [state, setState] = useState<"creating" | "waiting" | "paid" | "expired">("creating");
+  const orderRef = useRef("");
+
+  useEffect(() => {
+    let alive = true;
+    let timer: number | null = null;
+    (async () => {
+      try {
+        const o = await createWechatOrder(pack.id);
+        if (!alive) return;
+        orderRef.current = o.order_id;
+        setQr(await QRCode.toDataURL(o.code_url, { width: 240, margin: 1 }));
+        setState("waiting");
+        timer = window.setInterval(async () => {
+          try {
+            const s = await orderStatus(orderRef.current);
+            if (!alive) return;
+            if (s.status === "paid") {
+              setState("paid");
+              if (timer) window.clearInterval(timer);
+              window.setTimeout(() => onClose(true), 800);
+            } else if (s.status === "expired" || s.status === "failed") {
+              setState("expired");
+              if (timer) window.clearInterval(timer);
+            }
+          } catch {
+            /* 单次轮询失败忽略，下个 tick 再试 */
+          }
+        }, 2500);
+      } catch (e) {
+        if (alive) setErr((e as Error).message);
+      }
+    })();
+    return () => {
+      alive = false;
+      if (timer) window.clearInterval(timer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pack.id]);
+
+  return (
+    <Dialog open title={`微信扫码 · ${pack.name}`} onClose={() => onClose(state === "paid")}>
+      <div className="flex flex-col items-center gap-3 py-2">
+        {err ? (
+          <p className="text-xs text-danger">{err}</p>
+        ) : state === "creating" ? (
+          <p className="py-16 text-xs text-slate-500">正在生成支付二维码…</p>
+        ) : (
+          <>
+            {/* 二维码底色固定纯白：扫码器对暗色主题下的低对比码识别率差 */}
+            <div className="rounded-lg bg-white p-2">
+              <img src={qr} alt="微信支付二维码" width={240} height={240} />
+            </div>
+            <div className="text-center">
+              <div className="text-lg font-semibold tabular-nums text-slate-100">¥{(pack.price_fen / 100).toFixed(2)}</div>
+              <div className="mt-1 text-xs text-slate-500">
+                {state === "paid" ? "✅ 已支付，入账中…" : state === "expired" ? "订单已过期，请关闭后重新下单" : `微信扫一扫支付，到账 ${fmtCredits(pack.credits_micro)} 积分`}
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </Dialog>
+  );
+}