一个基于 Next.js 的 302AI 支付平台集成示例项目，展示了完整的支付流程实现，包括订单创建、签名验证和 Webhook 回调处理。

在线预览

• 🔐 HMAC-SHA256 签名验证 - 确保支付请求的安全性和完整性
• 💳 完整支付流程 - 从订单创建到支付完成的端到端实现
• 🔔 Webhook 回调处理 - 接收并处理 302AI 平台的支付状态通知
• 🎨 现代化 UI - 基于 Tailwind CSS 的响应式界面
• 📱 移动端适配 - 完美支持移动设备访问
• ⚡ 实时状态更新 - 支付状态实时反馈

• Next.js 16 - React 全栈框架
• React 19 - 用户界面库
• TypeScript 5 - 类型安全的 JavaScript
• Tailwind CSS 4 - 原子化 CSS 框架

• Next.js API Routes - 服务端 API 接口
• Node.js Crypto - 签名生成和验证

git clone <repository-url>
cd paywith302-demo

npm install
# 或
yarn install
# 或
pnpm install

创建 .env.local 文件并配置以下环境变量：

# 302AI 支付平台配置
PAY302_APP_ID=你的应用ID
PAY302_SECRET=你的应用密钥
PAY302_API_URL=https://api.302.ai/v1/checkout

# 调试模式 (可选)
IS_DEBUG=true

npm run dev
# 或
yarn dev
# 或
pnpm dev

打开浏览器访问 http://localhost:3000

pnpm run build
pnpm run start

项目已经实现了 HMAC-SHA256 签名算法：

核心特性：

• ✅ 空值过滤 (过滤 null、undefined、空字符串、空对象、空数组)
• ✅ 递归对象键排序 (确保 JSON 序列化的确定性)
• ✅ 自动排除 signature 和 secret 字段

使用示例：

import { SignatureValidator } from '@/app/utils/signature-validator';

const validator = new SignatureValidator('your-secret-key');

// 生成签名
const params = {
  app_id: 'your-app-id',
  amount: 39.99,
  email: 'user@example.com'
};
const signature = validator.generateSignature(params);

// 验证签名
const isValid = validator.validate(params, receivedSignature);

API 端点： POST /api/payment/create

请求体：

{
  "user_name": "用户名",
  "email": "user@example.com",
  "amount": 39.99,
  "back_url": "http://localhost:3000",
  "fail_url": "http://localhost:3000/payment/fail",
  "suc_url": "http://localhost:3000/payment/success",
  "extra": {
    "order_id": "ORDER_1234567890",
    "source": "web"
  }
}

响应：

{
  "success": true,
  "url": "https://...",
  "payment_order": "..."
}

API 端点： POST /api/payment/checkout

302 平台回调数据：

{
  "extra": {
    "source": "web",
    "order_id": "ORDER_1762399109268"
  },
  "payment_order": "302平台生成的支付订单号",
  "payment_fee": "0.0",
  "payment_amount": 39.99,
  "payment_status": 1,
  "app_id": "你的应用ID",
  "signature": "HMAC-SHA256签名字符串"
}

支付状态码：

• 0 - 未支付
• 1 - 支付完成
• -1 - 支付失败
• -2 - 支付超时

MIT License

• GitHub: 项目地址
• 问题反馈: Issues