SkillAgentSearch skills...

Payone

简单地生成多合一的收款码。SaaS 无需部署，直接生成落地页和图片。

GenerateConvertImprove

Install / Use

/learn @jiusanzhou/Payone
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

<div align="center">

payone

多合一收款码生成器

</div>

✨ 特性

  • 💾 多种存储后端：Cloudflare KV、is.gd、TinyURL
  • 📸 内置截图服务：生成分享图片
  • 🔴 简单高效使用
  • 🌎️ 支持 Vercel + Cloudflare Workers 部署
  • 👆 一键生成收款页面
  • 🖥️ 自动识别并生成对应平台二维码（支付宝自动跳转）
  • 🛠 支持支付宝、微信（受限）、QQ钱包、PayPal、Venmo、Ko-fi、爱发电、加密货币

🖼️ 预览

editor

🏗️ 项目架构

┌─────────────────────────────────────────────────────────────┐
│                         用户                                 │
│                    (支付宝/微信/QQ 扫码)                      │
└─────────────────────┬───────────────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────────────┐
│                    Next.js 前端                             │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  首页      │  │  编辑器    │  │  收款页面   │         │
│  │  /         │  │  /editor   │  │  /s/[code]  │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────┬───────────────────────────────────────┘
                      │
                      ▼
┌─────────────────────────────────────────────────────────────┐
│               Cloudflare Worker API                         │
│  GET  /api/s/:code       → 获取收款码数据/重定向             │
│  POST /api/s/:code       → 创建新收款码                     │
│  GET  /api/supports      → 列出支持的渠道                   │
│  GET  /api/screenshot/:code → 生成分享图片                  │
└─────────────────────┬───────────────────────────────────────┘
                      │
          ┌───────────┴───────────┐
          ▼                       ▼
┌─────────────────────┐   ┌─────────────────────┐
│    存储后端         │   │    截图服务         │
│  ┌───────────────┐  │   │  ┌───────────────┐  │
│  │ Cloudflare KV │  │   │  │ Satori (默认) │  │
│  │ is.gd / v.gd  │  │   │  │ Microlink     │  │
│  │ TinyURL       │  │   │  │ Shotsapi      │  │
│  └───────────────┘  │   │  └───────────────┘  │
└─────────────────────┘   └─────────────────────┘

🔧 技术栈

前端 (web/)

| 技术 | 版本 | 说明 | |------|------|------| | Next.js | 15.x | React 框架，SSR/SSG | | React | 19.x | UI 库 | | Tailwind CSS | 4.x | 原子化 CSS 框架 | | qr-scanner | 1.4.x | 二维码解析 | | qrcode | 1.5.x | 二维码生成 | | react-confetti | 6.x | 创建成功庆祝动画 |

后端 Worker (worker/)

| 技术 | 说明 | |------|------| | Cloudflare Workers | 边缘计算平台 | | cloudworker-router | 路由处理 | | Satori | SVG 渲染引擎 | | Resvg-wasm | SVG 转 PNG | | TypeScript | 类型安全 |

📂 项目结构

payone/
├── README.md
├── channels.json          # 支付渠道配置
├── assets/                # 静态资源
├── web/                   # Next.js 前端应用 (TypeScript)
│   ├── components/        # React 组件 (.tsx)
│   ├── config/           # 配置文件
│   ├── lib/              # 工具库
│   │   ├── api.ts        # API 调用
│   │   ├── config.ts     # 环境配置
│   │   ├── screenshot.ts # 截图服务注册
│   │   ├── server.ts     # 服务端核心逻辑
│   │   ├── store.ts      # 存储后端实现（工厂模式）
│   │   └── utils.ts      # 工具函数
│   ├── pages/            # 页面路由 (.tsx)
│   │   ├── editor.tsx    # 编辑器页面
│   │   ├── s/[code].tsx  # 收款码展示页
│   │   └── usage/        # 使用说明页
│   └── views/            # 视图组件 (.tsx)
└── worker/               # Cloudflare Worker
    ├── src/ts/           # TypeScript 源码
    │   ├── index.ts      # Worker 入口
    │   └── screenshot/   # 截图服务
    │       ├── satori.ts # Satori 渲染
    │       └── external.ts # 外部服务
    └── wrangler.toml     # Wrangler 配置

💳 支持的支付渠道

| 渠道 | URL 模式 | 状态 | 说明 | |------|----------|------|------| | 支付宝 | https://qr.alipay.com/ | ✅ 完美支持 | 自动重定向，体验最佳 | | 微信支付 | wxp:// | ⚠️ 受限 | 微信屏蔽了转账码识别，需长按保存后扫一扫 | | QQ钱包 | https://i.qianbao.qq.com/ | ✅ 支持 | | | PayPal | https://paypal.me/ | ✅ 支持 | 跳转 PayPal.Me 链接 | | Venmo | https://venmo.com/ | ✅ 支持 | 美国用户常用 | | Ko-fi | https://ko-fi.com/ | ✅ 支持 | 创作者打赏平台 | | 爱发电 | https://afdian.com/a/ | ✅ 支持 | 国内创作者打赏平台 | | Bitcoin | bitcoin: | ✅ 支持 | 加密货币 | | Ethereum | ethereum: | ✅ 支持 | 加密货币 | | USDT (TRC20) | tron: | ✅ 支持 | 稳定币，TRC20 网络 |

⚠️ 微信支付限制说明

由于微信官方限制，个人转账二维码（wxp:// 协议）在微信内被屏蔽识别，无法实现扫码直接支付。

目前可行的方案：

  1. 用户用微信扫码后，显示引导页面
  2. 提示用户"长按保存图片，返回微信首页扫一扫"
  3. 用户从相册识别二维码完成支付

如需微信内直接支付，需申请微信支付商户（需企业资质）或开发小程序承接。

🚀 快速开始

前端开发

cd web
npm install
npm run dev

Worker 开发

cd worker
npm install
npm run build
npm run cf:dev  # 本地开发

🔧 部署指南

前端部署

方式一：Vercel 部署（推荐）

  1. Fork 本仓库到你的 GitHub
  2. 在 Vercel 导入项目
  3. 设置根目录为 web
  4. 配置环境变量（见下文）
  5. 部署

方式二：自托管

cd web
npm install
npm run build
npm run start

前端环境变量

| 变量名 | 说明 | 默认值 | 示例 | |--------|------|--------|------| | WORKER_API_URL | Worker API 地址 | http://localhost:8787 | https://your-worker.workers.dev | | SCREENSHOT_PROVIDER | 截图服务提供者 | microlink | microlink / worker / thumio |

在 web/.env.local 中配置：

WORKER_API_URL=https://your-worker.workers.dev
SCREENSHOT_PROVIDER=microlink

Worker 部署

1. 安装 Wrangler CLI

npm install -g wrangler
wrangler login

2. 配置 wrangler.toml

复制示例配置并修改：

cd worker
cp wrangler.example.toml wrangler.toml

编辑 wrangler.toml：

name = "payone"
main = "src/ts/index.ts"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

[vars]
SCREENSHOT_PROVIDER = "satori"  # 截图服务
BASE_URL = "https://your-domain.com"  # 你的域名

[[kv_namespaces]]
binding = "PAYONE_KV"  # 绑定名称必须是 PAYONE_KV
id = "你的KV命名空间ID"

注意：binding 必须设置为 PAYONE_KV，不要在 [vars] 中设置 PAYONE_KV，否则会覆盖 KV 绑定。

3. 创建 KV 命名空间（如使用 Cloudflare KV）

wrangler kv:namespace create PAYONE_KV

将输出的 id 填入 wrangler.toml。

4. 部署

npm run build
wrangler deploy

💾 存储后端配置

项目支持多种存储后端，通过 KV 绑定或 STORE_TYPE 环境变量配置。代码会优先检查 PAYONE_KV 绑定，如果存在则使用 Cloudflare KV，否则根据 STORE_TYPE 选择其他存储后端。

Cloudflare KV（推荐）

最稳定可靠的存储方案。

# wrangler.toml
[vars]
SCREENSHOT_PROVIDER = "satori"
BASE_URL = "https://your-domain.com"

[[kv_namespaces]]
binding = "PAYONE_KV"  # 必须使用此名称
id = "你的KV命名空间ID"

特点：

  • 读写速度快，全球边缘节点
  • 支持 list/count 操作
  • 需要 Cloudflare Workers 计划

is.gd / v.gd（免费）

使用短链接服务存储数据，无需付费。不配置 KV 绑定时使用。

# wrangler.toml
[vars]
STORE_TYPE = "isgd"
SCREENSHOT_PROVIDER = "satori"
BASE_URL = "https://your-domain.com"

# 不配置 [[kv_namespaces]]

特点：

  • 完全免费
  • 无需额外配置
  • 短码只允许 a-z、0-9、下划线
  • 依赖第三方服务稳定性

TinyURL

使用 TinyURL 短链接服务。不配置 KV 绑定时使用。

# wrangler.toml
[vars]
STORE_TYPE = "tinyurl"
TINYURL_API_TOKEN = "你的API令牌"  # 可选，使用官方API时需要
SCREENSHOT_PROVIDER = "satori"
BASE_URL = "https://your-domain.com"

# 不配置 [[kv_namespaces]]

特点：

  • 基础功能免费
  • API 访问需要令牌
  • 自定义短码可能受限

git.io（已废弃）

⚠️ GitHub 已停止 git.io 新链接创建，仅保留用于读取历史数据。

[vars]
STORE_TYPE = "gitio"

📸 截图服务配置

项目支持为收款码生成分享图片，通过 SCREENSHOT_PROVIDER 配置：

Microlink（默认）

使用 Microlink 截图服务，真实浏览器渲染。

SCREENSHOT_PROVIDER=microlink

特点：

  • 真实浏览器渲染
  • 免费额度有限
  • 无需配置即可使用

Worker / Satori

使用 Satori + Resvg 在 Worker 内直接渲染，无外部依赖。

SCREENSHOT_PROVIDER=worker

特点：

  • 速度快，无外部 API 调用
  • 支持 SVG 和 PNG 格式
  • 完全离线运行

Thum.io（免费）

完全免费的截图服务，无需注册。

SCREENSHOT_PROVIDER=thumio

特点：

  • 完全免费，无限制
  • 无需 API Key
  • 支持自定义尺寸

Shotsapi

使用 screenshotapi.net 服务。

SCREENSHOT_PROVIDER=shotsapi

特点：

  • 高质量截图
  • 需要 API 密钥（付费）

ApiFlash

使用 ApiFlash 截图服务（100次/月免费）。

SCREENSHOT_PROVIDER=apiflash
APIFLASH_ACCESS_KEY=your_access_key

特点：

  • 100次/月免费额度
  • 需要注册获取 API Key
  • 高质量 Chrome 渲染

🖼️ 截图 API 使用

生成收款码分享图片：

GET /api/screenshot/:code
GET /api/screenshot/:code.png
GET /api/screenshot/:code-banner.png

参数：

| 参数 | 说明 | 默认值 | |------|------|--------| | width | 图片宽度 | 640（banner: 1200） | | height | 图片高度 | 960（banner: 630） | | format | 输出格式 png/svg | png | | banner | 是否为横幅模式 | false |

示例：

# 默认尺寸
curl https://your-worker.dev/api/screenshot/mycode.png

# 自定义尺寸
curl "https://your-worker.dev/api/screenshot/mycode?width=800&height=600"

# Banner 模式（适合社交分享）
curl https://your-worker.dev/api/screenshot/mycode-banner.png

⚙️ 完整配置示例

wrangler.toml（使用 Cloudflare KV）

name = "payone"
main = "src/ts/index.ts"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

[build]
command = ""

[vars]
SCREENSHOT_PROVIDER = "satori"
BASE_URL = "https://payone.your-domain.com"

# 注意：不要在 [vars] 中设置 PAYONE_KV，否则会覆盖下面的 KV 绑定

[[kv_namespaces]]
binding = "PAYONE_KV"
id = "你的KV命名空间ID"

[[rules]]
type = "CompiledWasm"
globs = ["**/*.wasm"]

wrangler.toml（使用 is.gd 免费存储）

name = "payone"
main = "src/ts/index.ts"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

[build]
command = ""

[vars]
STORE_TYPE = "isgd"
SCREENSHOT_PROVIDER = "satori"
BASE_URL = "https://payone.your-domain.com"

[[rules]]
type = "CompiledWasm"
globs = ["**/*.wasm"]

web/.env.local

# Worker API 地址
WORKER_API_URL=https://payone.your-domain.workers.dev

# 截图服务提供者: microlink (默认) | worker | thumio | shotsapi | apiflash
SCREENSHOT_PROVIDER=microlink

🔌 API 参考

| 端点 | 方法 | 说明 | |------|------|------| | /api/s/:code | GET | 获取收款码数据或重定向到支付页面 | | /api/s/:code?type=json | GET | 以 JSON 格式返回收款码数据 | | /api/s/:code | POST | 创建新收款码 | | /api/supports | GET | 获取支持的支付渠道列表 | | /api/stat | GET | 获取存储后端统计信息 | | /api/screenshot/:code | GET | 生成收款码截图 |

❤️ 鼓励

<img width="200" src="https://payone.wencai.app/s/zoe.png" alt="鼓励一下由 https://payone.wencai.app 赞助">

鼓励一下由 https://payone.wencai.app 赞助

📄 License

LA2

jiusanzhou

View profile

View on GitHub
GitHub Stars43
CategoryDevelopment
Updated1mo ago
Forks7
jiusanzhou/payone

Languages

TypeScript

Security Score

80/100

Audited on Feb 22, 2026

No findings