HTTP API 开发

```支付页面开发提示词
语言：（如 HTML+JS、PHP、NodeJS 等）
技术栈：（如 Vue3+Axios+Vite、React+Axios 等）
包管理：（推荐 Yarn）
UI 及框架：（如 Element-Plus、Antd、TailwindCSS 等）

设计并开发一个在线支付页面，UI 需求：
- 二维码展示（推荐使用 qrcodejs2-fixes 库）
- 支付方式选择
- 支付金额提示
- 取消订单功能
- 显示待支付功能
- 显示已支付功能

页面逻辑步骤：
- 用户输入需要充值的金额（或用户点击触发充值项目）和玩家名称
- 下单处理：
  - 若项目为“点券充值”，则使用`点券充值`接口编写
  - 若项目为“礼包充值”，则使用`礼包充值`接口编写
  - 若不符合上述类型，则使用`普通订单`接口编写
- 执行相关下单接口，获取订单数据
- 进入轮询阶段，推荐 2s 执行轮询，轮询接口为`状态`，若有多个订单状态需要查询，则使用`多订单状态`而非`状态`
- 支付之后，`状态`在`$.code`会返回相关的代码（`多订单状态`在`$.data.status`），其中代码`200`为交易成功（即已支付，并发货）
- 若点击了涉及到取消订单相关的操作，则执行`取消`接口

# 注意
- 轮询时间禁止低于 1s（否则可能会被暂时 IP 封禁）
- 轮询需要设计防抖逻辑
- 若使用`礼包充值`而非`礼包充值 V2`接口，则不支持自定义金额，系统会使用插件同步礼包的金额（如果使用了`礼包充值`可提醒用户）
- 若使用`礼包充值 V2`接口，禁止在前端中使用，只能在后端使用，必要时通知用户进行警告确认
- 若有请求错误，需要友好的页面提示
- 若使用`Authorization`，需要拼接前缀，普通的服务器令牌为`tk_`，如`Authorization: Bearer tk_<服务器令牌>`

# 规范
- 相关的业务响应代码（对应`$.code`），应独立为常量（尽量减少魔法值）管理

# 接口文档
https://s.apifox.cn/11f1fe58-5dd6-49cb-be40-1529014d76a9/llms.txt

# 自我审视
- 接口请求数据和响应数据是否有任何字段不在接口文档中定义（不存在的字段）
- 是否有业务代码不在接口文档中定义（不存在的业务代码）
- 是否有接口不在接口文档中定义（不存在的接口）
- `Header`是否遵循接口定义规范
```