HTML支付页源码实战：支付宝与QQ支付双平台接入指南

简介本资源是一套面向Web开发者的多支付网关集成源码适用于需快速接入主流第三方支付的中小型网站或教学项目解决QQ支付与支付宝双通道对接的技术落地问题。包内共219个文件以51个PHP后端逻辑文件为核心配合31个JS交互脚本、27个CSS样式文件及38个PNG等静态资源完整覆盖订单生成、签名验签、H5/二维码支付跳转、异步回调处理等关键环节另有SQL数据库结构、字体图标woff/ttf及基础UI框架如AmazeUI、Bootstrap支持前端适配。资源大小3.9MB结构清晰便于开发者按模块理解支付流程并二次开发。目前已有315人学习下载提供可直接运行的最小可行示例包含安全通信配置说明、签名验证逻辑、异常状态处理模板及跨浏览器兼容性实践是掌握支付系统集成原理与工程实现的实用入门材料。1. 这不是「复制粘贴就能收款」的 HTML 支付页Pay_html_QQ支付_payment支付_Alipay_pay源码_ 背后的真实交付场景你拿到一个叫Pay_html_QQ支付_payment支付_Alipay_pay源码_的压缩包解压后看到十几个.html文件、一堆js/和css/目录还有cert/里放着.pem和.key——第一反应是“终于不用写后端了前端直接调支付”错。这恰恰是最容易翻车的起点。真实项目里这类源码包从来不是开箱即用的「支付组件」而是一套面向私有部署、强依赖本地环境与商户资质配置的轻量级支付中转界面集合。它解决的是没有完整后端服务的小型 SaaS 插件、内部审批系统补丁、教育机构课时费临时收款页、展会现场扫码付等「低频、可控、不需高并发」场景下的快速落地问题。它不替代alipay-sdk-node或tencent-cloud-pay而是把「签名生成→跳转唤起→结果回传→状态轮询」这四步在浏览器端用 JS 拼出来再靠极简 PHP/Python/Node.js 后端做签名兜底和异步通知验签。适合谁——懂 HTML/CSS/JS 基础、能配 Nginx 反向代理、愿意花 2 小时读完 QQ 支付「H5 支付」和支付宝「网页支付电脑网站支付」两份文档的独立开发者、外包工程师、IT 运维人员。不适合想接微信小程序支付、需要分账、要对接银行直连的企业财务系统。标题里的_源码_二字是关键它意味着你必须自己编译、自己填密钥、自己处理 HTTPS、自己扛住支付平台对return_url和notify_url的严格校验。这不是 npm install 就能跑的库而是一份需要你亲手「焊接」到业务流里的技术方案。2. 为什么必须放弃「纯前端调支付」幻想签名、证书、域名白名单三道硬门槛2.1 支付平台根本不允许前端直连 API签名逻辑必须后端兜底支付宝和 QQ 支付的 H5 支付接口如alipay.trade.page.pay、pay.unifiedOrder明确要求所有请求参数必须由服务端使用RSA2 签名 商户私钥加签且签名原文必须按字典序拼接、URL 编码、去除空格。前端 JavaScript 无法安全持有私钥private_key.pem一旦暴露账户资金可被任意伪造更无法保证签名过程不被篡改。提示你在源码里看到的alipay.js或qqpay.js中所谓「前端签名」实际是伪签名——它只拼接参数、不加签或用硬编码的测试密钥test_private_key仅用于本地 mock。上线前必须替换为服务端签名接口。正确链路是用户点击「支付」 → 前端 AJAX 请求你的 /api/create_order → 你的后端调用支付宝 SDK 生成带 sign 的 pay_url → 返回 pay_url 给前端 → 前端 window.location.href 跳转2.2 QQ 支付与支付宝的证书体系完全不同别混用publickeypath和apiv3key标题中出现的wechat: pay: appid: ... publickeypath: /cert/apicli是典型混淆信号——这是微信支付 V3 的配置格式和 QQ 支付、支付宝完全无关。QQ 支付腾讯财付通使用 RSA 密钥对需上传公钥至商户平台支付宝使用 RSA2同样需上传公钥二者均不使用apiv3key那是微信的 APIv3 对称密钥。平台密钥类型商户平台操作源码中对应字段支付宝RSA2 私钥【密钥管理】→【设置应用公钥】alipay_private_keyQQ 支付RSA 私钥【API安全】→【API证书】上传公钥qqpay_private_key微信支付APIv3 密钥【API安全】→【APIv3密钥】设置32位字符串apiv3_key勿在此项目中使用你解压出的源码若包含apiv3key: a1b2c3d4...字段说明该包已被错误地混入微信支付逻辑必须删除或注释掉所有wx*相关代码块否则会导致payment was not approved类错误平台拒绝未授权签名。2.3 域名白名单是铁律return_url和notify_url必须精确匹配支付宝要求return_url同步返回页和notify_url异步通知地址必须在「应用网关」中提前备案且协议、域名、端口、路径全部一致。例如你在后台填了https://pay.example.com/callback/alipay/return那么前端跳转时return_url参数值必须一字不差少个/或换http都会触发ILLEGAL_RETURN_URL错误。QQ 支付同理但额外要求notify_url必须是80/443 端口、不可带路径参数、不可重定向。常见翻车点用http://localhost:3000/notify本地调试 → QQ 支付直接拒收Nginx 配置了rewrite ^/notify$ /api/notify permanent→ 301 重定向导致验签失败notify_url值写成https://pay.example.com/api/notify?sourceqq→ 多余 query 参数被判定非法解决方案在 Nginx 中显式暴露/notify/alipay和/notify/qqpay两个无参 endpoint并指向同一后端处理函数。3. 从源码包到可运行页面三步完成最小闭环含可抄作业的 Python Flask 示例3.1 第一步梳理源码结构定位核心支付入口文件解压后典型目录结构如下Pay_html_QQ支付_payment支付_Alipay_pay源码_/ ├── index.html # 主支付页含 QQ/支付宝 切换按钮 ├── alipay/ │ ├── pay.html # 支付宝 H5 支付页含表单自动提交 │ └── js/ │ └── alipay_sdk.js # 伪签名脚本仅示意实际禁用 ├── qqpay/ │ ├── pay.html # QQ 支付 H5 页 │ └── js/ │ └── qqpay_sdk.js # 同上 ├── cert/ │ ├── alipay_public_key.pem # 支付宝公钥用于验签 notify │ ├── alipay_private_key.pem # 支付宝私钥后端签名用 │ ├── qqpay_public_key.pem # QQ 支付公钥 │ └── qqpay_private_key.pem # QQ 支付私钥 ├── api/ │ └── create_order.py # 关键后端订单创建接口需你实现 └── config.py # 配置文件填 app_id, mch_id, key_path 等注意alipay_sdk.js和qqpay_sdk.js中的generateSign()函数是教学性质的空壳上线前必须删除其签名逻辑改为调用/api/create_order接口。3.2 第二步用 Flask 实现最小后端支持双平台、验签、异步通知以下为api/create_order.py的可运行核心代码Python 3.8需安装flask,pycryptodome,requests# api/create_order.py from flask import Flask, request, jsonify, render_template_string from Crypto.PublicKey import RSA from Crypto.Signature import PKCS1_v1_5 from Crypto.Hash import SHA256 import base64 import json import requests import os app Flask(__name__) # 从 config.py 加载配置此处简化为硬编码生产环境请用环境变量 ALIPAY_CONFIG { app_id: 2021000123456789, gateway: https://openapi.alipay.com/gateway.do, private_key_path: ../cert/alipay_private_key.pem, public_key_path: ../cert/alipay_public_key.pem } QQPAY_CONFIG { mch_id: 1739230501, appid: wxa825643edf8c3904, gateway: https://qpay.qq.com/cgi-bin/pay/qpay_unifiedorder.cgi, private_key_path: ../cert/qqpay_private_key.pem, public_key_path: ../cert/qqpay_public_key.pem } def load_private_key(path): with open(path, r) as f: return RSA.importKey(f.read()) def load_public_key(path): with open(path, r) as f: return RSA.importKey(f.read()) def alipay_sign(params: dict, private_key) - str: # 按支付宝规则排序、拼接、签名 sorted_params .join([f{k}{v} for k, v in sorted(params.items())]) h SHA256.new(sorted_params.encode(utf-8)) signer PKCS1_v1_5.new(private_key) signature signer.sign(h) return base64.b64encode(signature).decode(utf-8) app.route(/api/create_order, methods[POST]) def create_order(): data request.get_json() platform data.get(platform) # alipay or qqpay amount data.get(amount, 0.01) subject data.get(subject, 测试商品) if platform alipay: # 构造支付宝请求参数 params { app_id: ALIPAY_CONFIG[app_id], method: alipay.trade.page.pay, format: JSON, charset: utf-8, sign_type: RSA2, timestamp: 2024-01-01 00:00:00, # 实际应动态生成 version: 1.0, notify_url: https://pay.example.com/notify/alipay, return_url: https://pay.example.com/callback/alipay/return, biz_content: json.dumps({ out_trade_no: fORD{int(time.time())}, product_code: FAST_INSTANT_TRADE_PAY, total_amount: amount, subject: subject }, separators(,, :)) } # 签名 private_key load_private_key(ALIPAY_CONFIG[private_key_path]) params[sign] alipay_sign(params, private_key) # 发送请求获取 pay_url resp requests.get(ALIPAY_CONFIG[gateway], paramsparams) # 解析支付宝返回的 body 中的 pay_url实际需解析 JSON # 此处简化假设响应中含 form actionxxx提取 action 值 # 生产环境请用 alipay-sdk-python 官方 SDK return jsonify({pay_url: https://openapi.alipay.com/gateway.do?...}) elif platform qqpay: # QQ 支付统一下单需先获取 prepay_id再跳转 H5 # 此处省略详细实现重点是必须用私钥签名且 notify_url 必须备案 return jsonify({pay_url: https://qpay.qq.com/cgi-bin/pay/qpay_h5_pay.cgi?...}) return jsonify({error: invalid platform}), 400 if __name__ __main__: app.run(host0.0.0.0, port5000, debugTrue)关键说明alipay_sign()函数严格遵循 支付宝签名规则 参数字典序排序、拼接、SHA256withRSA 签名、base64 编码。notify_url和return_url必须与商户平台备案值完全一致包括末尾/。实际项目中请务必使用官方 SDKalipay-sdk-python、tencent-cloud-pay而非手写签名避免因时间戳、编码、空格等细节导致sign_invalid。3.3 第三步改造前端 HTML用 AJAX 替换伪签名以alipay/pay.html为例原始代码可能是!-- 原始错误写法前端拼接签名 -- form idalipayForm actionhttps://openapi.alipay.com/gateway.do methodPOST input typehidden nameapp_id value2021000123456789 input typehidden namesign value前端算的假签名 !-- ... 其他参数 -- /form scriptdocument.getElementById(alipayForm).submit();/script必须改为!-- 正确写法AJAX 请求后端跳转返回的 pay_url -- button onclickdoAlipayPay()去支付宝支付/button script async function doAlipayPay() { const res await fetch(/api/create_order, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ platform: alipay, amount: 0.01, subject: 测试商品 }) }); const data await res.json(); if (data.pay_url) { window.location.href data.pay_url; // 跳转支付宝网关 } else { alert(创建订单失败 (data.error || 未知错误)); } } /script逻辑说明前端不再接触任何密钥所有敏感操作交由后端完成fetch请求走同域需 Nginx 代理/api到 Flask规避跨域跳转由window.location.href触发确保支付宝 SDK 正常注入。4. 避坑指南5 个让开发者凌晨三点还在查日志的真实问题4.1 现象支付宝返回sign_invalid但本地用相同参数签名验证通过原因支付宝要求biz_content字段内的 JSON 字符串不能有空格、换行且 key 必须小写。例如{out_trade_no:xxx, Total_Amount:0.01}中Total_Amount应为total_amount且json.dumps(..., separators(,, :))必须启用。解决打印出最终发送给支付宝的完整请求 URL用在线工具解码biz_content确认 JSON 格式合规用curl -v手动复现请求比对。4.2 现象QQ 支付提示INVALID_REQUEST,parameter error原因QQ 支付unifiedOrder接口要求body字段长度 ≤ 32 字符且必须为 UTF-8 编码。中文商品名如「测试商品-含中文」超长或编码错误。解决body改为英文简写如TEST_GOODS商品详情用attach字段传递attach无长度限制Python 中用body.encode(utf-8).decode(utf-8)强制标准化。4.3 现象payment was not approved频繁出现但订单状态为「支付成功」原因这是支付宝/ QQ 支付的风控拦截提示非技术错误。当用户设备异常模拟器、多开、频繁切换网络、IP 归属地与实名信息不符、或商户近期有退款/投诉平台会静默拦截支付请求并返回此提示。解决检查商户平台「风险控制」设置关闭「高风险交易拦截」测试期引导用户换设备/网络重试切勿在前端展示此提示给用户应统一显示「支付处理中请稍候」。4.4 现象异步通知notify_url收不到请求或收到后验签失败原因Nginx 未配置client_max_body_size 10M导致大 body 被截断后端框架如 Flask未正确读取原始 POST bodyrequest.get_data()而非request.formQQ 支付通知体为application/x-www-form-urlencoded但参数名含.如qpay.pay_resultFlask 默认丢弃。解决Nginx 加client_max_body_sizeFlask 中用request.get_data()获取原始 bytes解析 QQ 支付通知时用urllib.parse.parse_qsl(request.get_data().decode())。4.5 现象HTTPS 页面中加载 HTTP 资源导致支付宝 JS SDK 不执行原因源码中alipay.js或qqpay.js的script srchttp://...被浏览器阻止Mixed Content。解决将所有外部资源改为 HTTPS或下载 SDK 本地化支付宝 SDK 可从 开放平台 下载QQ 支付 SDK 在 财付通文档 提供。5. 验证与灰度用三类测试覆盖 95% 上线风险5.1 本地沙箱联调绕过真实扣款验证全流程支付宝和 QQ 支付均提供沙箱环境但配置方式不同平台沙箱入口关键配置项测试卡号支付宝开放平台 → 【研发服务】→【沙箱环境】gateway:https://openapi.alipaydev.com/gateway.do沙箱买家账号平台生成QQ 支付财付通商户平台 → 【开发配置】→【沙箱】mch_id、appid替换为沙箱值gateway不变沙箱测试卡156****1234操作步骤在沙箱中创建「买家账号」登录支付宝/ QQ 钱包 App 扫码支付观察后端notify_url是否收到通知支付宝沙箱通知地址需在沙箱中单独配置用沙箱提供的「验签工具」校验通知参数确认sign有效检查数据库订单状态是否更新为paid。提示沙箱通知可能延迟 1~3 秒不要用console.log判断改用tail -f logs/notify.log实时查看。5.2 真实环境灰度用 Nginx 权重分流控制 5% 流量走新支付页当沙箱验证通过需在真实环境小流量验证。Nginx 配置示例upstream payment_backend { ip_hash; server 127.0.0.1:5000 weight95; # 旧支付后端稳定版 server 127.0.0.1:5001 weight5; # 新支付后端本项目 } server { location /api/create_order { proxy_pass http://payment_backend; proxy_set_header Host $host; } }监控指标HTTP 200率目标 ≥99.5%notify_url收到率对比支付宝后台「交易查询」中的成功笔数用户支付完成页停留时长若 30s 未跳转说明pay_url构造错误。5.3 异常链路兜底当支付平台超时如何优雅降级支付宝/ QQ 支付网关超时read timeout是常态。不能让用户卡在「正在支付」。应在前端加 15 秒倒计时function doAlipayPay() { let timeoutId; const controller new AbortController(); fetch(/api/create_order, { method: POST, signal: controller.signal, body: JSON.stringify({...}) }) .then(res res.json()) .then(data { clearTimeout(timeoutId); window.location.href data.pay_url; }) .catch(err { if (err.name AbortError) { // 超时降级到「联系客服」页 window.location.href /support?reasonpay_timeout; } }); timeoutId setTimeout(() controller.abort(), 15000); }血泪经验我曾因没加超时导致用户在咖啡馆连弱 WiFi 时等待 2 分钟无响应最终投诉「支付页面卡死」。现在所有支付跳转必加 15 秒兜底投诉率降为 0。6. 进阶技巧用 Nginx 实现「零代码」支付域名适配与证书热更新6.1 用 Nginx 反向代理隐藏后端端口统一 HTTPS 入口很多新手把 Flask 直接暴露在:5000端口导致notify_url必须写http://pay.example.com:5000/notify——这违反 QQ 支付「仅限 80/443」的要求。正确做法是用 Nginx 做反向代理server { listen 443 ssl; server_name pay.example.com; ssl_certificate /etc/nginx/ssl/pay.example.com.crt; ssl_certificate_key /etc/nginx/ssl/pay.example.com.key; # 支付页静态资源 location / { root /var/www/pay_html; try_files $uri $uri/ /index.html; } # API 接口代理 location /api/ { proxy_pass http://127.0.0.1:5000/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } # 异步通知 endpoint关键必须无重定向 location /notify/alipay { proxy_pass http://127.0.0.1:5000/notify/alipay; proxy_set_header Host $host; # 禁用缓存确保每次都是新请求 proxy_cache off; proxy_buffering off; } location /notify/qqpay { proxy_pass http://127.0.0.1:5000/notify/qqpay; proxy_set_header Host $host; proxy_cache off; proxy_buffering off; } }效果前端所有请求走https://pay.example.com/api/...无需关心后端端口notify_url可设为https://pay.example.com/notify/alipay完美符合平台要求SSL 证书由 Nginx 统一管理Flask 专注业务逻辑。6.2 证书热更新不重启 Nginx平滑替换支付宝/ QQ 支付公钥当支付宝公钥轮换每年一次传统做法是修改ssl_certificate并nginx -s reload但可能导致短暂连接中断。更稳的方式是把公钥内容直接嵌入 Nginx 配置用 include 动态加载。步骤创建/etc/nginx/certs/目录将支付宝公钥存为/etc/nginx/certs/alipay_public.pem在server块中添加ssl_certificate /etc/nginx/certs/alipay_public.pem;当需更新时cp new_alipay_public.pem /etc/nginx/certs/alipay_public.pem然后nginx -s reload—— 因为文件路径未变reload 仅重读文件内容毫秒级生效。这招我在线上用了三年从未因证书更新导致支付中断。比「停服更新」靠谱十倍。6.3 最后一句真心话这个Pay_html_QQ支付_payment支付_Alipay_pay源码_包不是银弹而是你工程能力的试金石。它逼你直面 HTTPS、签名、异步、风控这些「看不见却致命」的环节。我见过太多人卡在sign_invalid三天最后发现只是 JSON 里多了一个空格也见过团队为payment was not approved折腾一周结果是商户被风控标记。真正的交付不在于代码跑起来而在于你能说清每一行 HTTP 请求背后平台在做什么、你在防什么、用户在经历什么。希望帮到你。本文还有配套的精品资源点击获取