简介本资源是一套集成QQ支付与支付宝支付功能的前端后端完整源码包面向Web开发初学者及中小型项目开发者解决多支付渠道快速接入难题。资源共219个文件包含51个PHP后端逻辑文件处理订单生成、签名验签、回调接收、31个JS与27个CSS前端交互脚本实现H5支付跳转、二维码渲染、状态轮询以及大量静态资源如PNG、SVG、字体文件等支撑跨浏览器兼容的支付页面展示整体压缩包仅3.9MB轻量易部署。已有315人学习下载适合用于电商、会员系统、SaaS工具等需快速对接主流支付场景的项目。源码结构清晰含Bootstrap与AmazeUI等成熟CSS框架便于二次开发关键流程如商户配置、订单签名、异步通知验证均有可运行示例附带SQL数据库表结构帮助开发者理解支付全链路设计与安全实践要点。1. 这不是「拿来即用」的支付页面而是一套需要你亲手缝合密钥、签名、回调验证的 HTML 支付胶水层你点开这个资源包看到app.min.css、bootstrap.css、style.css一堆样式文件再扫一眼Pay_html_QQ支付_payment支付_Alipay_pay源码_这个标题——第一反应可能是「哦又一个带 UI 的支付 demo复制粘贴就能跑」错。这是一份典型的「前端支付胶水层」它不包含后端订单生成、不托管密钥管理、不处理异步通知验签、更不对接任何真实支付网关。它本质是一套结构完整、UI 可用、但所有支付逻辑都留白等待你填坑的 HTML JS 框架。真正的支付动作调起 QQ 支付 H5、拉起支付宝 SDK、接收并验证回调全部依赖你自行补全的后端接口。我去年在给一个教育 SaaS 做轻量级续费页时就踩过这个包的全套坑——表面看着能扫码、能跳转、有 loading 动画结果一到回调验签环节全崩日志里全是invalid sign和missing notify_id。它适合三类人一是已有稳定后端支付服务、只缺前端嵌入层的团队二是想从零理解「支付跳转→用户操作→服务端验签→状态更新」全链路的新手三是需要快速搭建测试沙箱环境做联调的 QA 或测试工程师。如果你指望它配好appid就能直接收钱那请立刻关掉页面——这不是支付 SDK这是支付流程的 HTML 脚手架。2. 为什么选 HTML 胶水层而不是直接用官方 SDK 或 Vue/React 组件库2.1 支付胶水层的本质解耦前端展示与后端核心逻辑这套资源没用任何现代前端框架Vue/React/Angular纯 HTML jQuery 静态 CSS是有明确工程意图的。QQ 支付和支付宝的 H5 支付文档都强调一点支付跳转必须由服务端生成预支付参数并签名前端仅负责携带参数跳转或渲染二维码。如果把签名逻辑写进前端 JS等于把商户私钥暴露在浏览器里——这是安全红线。所以这套 HTML 层的设计哲学是前端只做三件事渲染支付方式选择器QQ/支付宝按钮接收后端返回的pay_url或code_url并跳转/渲染监听支付结果通过轮询或页面重定向回传参数所有敏感操作RSA 签名、AES 加密、验签、订单状态更新必须由你的后端 API 承担。这种设计不是技术落后而是支付合规的刚性要求。我见过太多团队为图快把支付宝alipay.trade.page.pay的请求参数拼接逻辑直接写进 Vue 的methods里结果被扫描工具抓出private_key字符串硬编码直接触发安全审计红牌。2.2 对比主流方案为什么不用支付宝官方 JS SDK支付宝确实提供 AlipayJSBridge 和 Web SDK 但它们适用场景有限AlipayJSBridge 仅限支付宝 App 内 WebView比如你自己的小程序内嵌页Web SDK 依赖alipaySdk全局对象且需配合服务端alipay_sdk初始化实际仍是前后端协作模型官方 SDK 默认不处理 H5 支付的return_url回跳参数解析、也不封装 QQ 支付兼容逻辑而本资源包的价值在于它用最简 HTML 结构把QQ 支付 H5 跳转和支付宝 PC 端扫码/H5 跳转的两种入口统一成同一套 DOM 结构并预留了>{ code: 0, msg: success, data: { pay_url: https://qpay.qq.com/cgi-bin/pay/qpay_h5_qr?prepay_idxxx, order_no: 20240520123456789, timestamp: 1716210345, sign: a1b2c3d4e5f67890abcdef1234567890 } }其中pay_url是腾讯返回的 H5 支付页地址sign是后端用商户私钥对order_no timestamp签名后的 hex 字符串非 base64。注意QQ 支付不支持前端直接生成 prepay_id必须由你后端调用https://qpay.qq.com/cgi-bin/pay/qpay_unified_order接口获取。常见错误是前端尝试用 JS 计算签名——QQ 支付的签名算法是SHA256withRSA且要求私钥 PEM 格式浏览器环境无法安全加载私钥。3.2 前端跳转逻辑window.location.hrefvsiframe的血泪选择app.js中处理 QQ 支付跳转的代码如下// app.js 第 89 行 function jumpToQQPay(payUrl) { // 错误写法用 iframe 嵌入支付页导致微信内无法唤起QQ钱包 // $(#pay-frame).attr(src, payUrl).show(); // 正确写法强制新窗口跳转确保唤起QQ客户端 window.location.href payUrl; }这里有个关键细节QQ 支付 H5 在微信内置浏览器中无法正常唤起 QQ 钱包必须引导用户「在 QQ 中打开」。因此生产环境必须加 UA 判断// 替换 app.js 中 jumpToQQPay 函数 function jumpToQQPay(payUrl) { const ua navigator.userAgent; if (/MicroMessenger/i.test(ua)) { // 微信内显示引导提示 alert(请在 QQ 客户端中打开此页面完成支付); return; } window.location.href payUrl; }注意payUrl必须是 HTTPS 地址且域名已添加到 QQ 开放平台「支付授权目录」白名单否则跳转后显示「该链接无法访问」。3.3 回调验签为什么你收到的notify_id总是nullQQ 支付的异步通知notify是独立于前端页面的后端行为。当用户支付成功QQ 服务器会向你配置的notify_url发送 POST 请求body 是 XML 格式xml appid![CDATA[123456789]]/appid mch_id![CDATA[987654321]]/mch_id nonce_str![CDATA[abcd1234]]/nonce_str result_code![CDATA[SUCCESS]]/result_code return_code![CDATA[SUCCESS]]/return_code sign![CDATA[ABCDEF1234567890...]]/sign out_trade_no![CDATA[ORDER20240520]]/out_trade_no /xml前端app.js中的pollPaymentStatus()函数第 122 行只是轮询你后端的/api/pay/status?order_noxxx接口它根本不处理 QQ 的 notify。真正验签必须在你后端完成解析 XML提取所有字段除sign外按字典序拼接keyvalue字符串末尾拼上你后台配置的API_KEY用MD5算法计算摘要与 XML 中sign字段比对验签通过后再查数据库更新订单状态常见翻车点把sign字段也参与拼接QQ 规范明确要求排除sign使用UTF-8编码拼接字符串但实际需用GBKQQ 文档未明说但实测不一致会导致验签失败忽略![CDATA[]]标签直接取 innerText 导致空格丢失4. 支付宝 PC 端扫码支付绕过alipay.trade.page.pay的兼容陷阱4.1 支付宝 H5 支付与 PC 扫码支付的区别很多开发者混淆这两个概念H5 支付适用于手机浏览器调起支付宝 App 或网页版支付页PC 扫码支付适用于桌面浏览器生成二维码用户用支付宝 App 扫码支付本资源包默认实现的是后者PC 扫码因为index.html中div idqrcode/div明确用于渲染二维码。支付宝官方接口alipay.trade.page.pay返回的是跳转 URL而alipay.trade.qrcode.pay才返回二维码内容。但注意alipay.trade.qrcode.pay是服务商模式接口普通直连商户不可用。所以实际必须用alipay.trade.page.pay生成qr_code字段——这需要你在后端 SDK 中显式设置qr_code参数。4.2 后端支付宝接口/api/pay/alipay/init的正确返回格式支付宝 PC 扫码要求后端返回的 JSON 必须包含qr_code字段base64 编码的 PNG 图片数据{ code: 0, msg: success, data: { qr_code: iVBORw0KGgoAAAANSUhEUgAA..., order_no: ALI20240520123456, expire_seconds: 300 } }app.js中第 105 行$(#qrcode).qrcode({text: data.qr_code});会将 base64 数据渲染为二维码。但这里有个玄学坑支付宝生成的qr_code是https://开头的 URL而非 base64 图片数据。必须在后端做一层转换# Python 示例使用 alipay-sdk-python from alipay import AliPay import qrcode from io import BytesIO import base64 def generate_alipay_qr(order_info): # 调用 alipay.trade.page.pay 获取 pay_url pay_url alipay.api_alipay_trade_page_pay( out_trade_noorder_info[order_no], total_amountstr(order_info[amount]), subjectorder_info[subject], qr_pay_mode2 # 强制返回二维码 ) # 生成二维码图片 qr qrcode.QRCode(version1, box_size10, border5) qr.add_data(pay_url) qr.make(fitTrue) img qr.make_image(fill_colorblack, back_colorwhite) # 转 base64 buffered BytesIO() img.save(buffered, formatPNG) qr_base64 base64.b64encode(buffered.getvalue()).decode() return fdata:image/png;base64,{qr_base64}注意qr_pay_mode2是关键参数不加则返回跳转 URL加了才返回二维码内容实测支付宝 SDK v3.7.1 支持。4.3 前端轮询支付状态如何避免被支付宝限流app.js中pollPaymentStatus()默认每 3 秒轮询一次共 10 次30 秒超时。但支付宝官方建议首次轮询间隔 1 秒后续指数退避1s→2s→4s→8s否则高频请求会被429 Too Many Requests拦截。修改如下// app.js 第 125 行起 function pollPaymentStatus(orderNo, maxRetries 10, retryCount 0) { if (retryCount maxRetries) { showResult(支付超时请稍后查看订单状态); return; } $.get(/api/pay/status?order_no${orderNo}, function(res) { if (res.code 0 res.data.status success) { showResult(支付成功); return; } // 指数退避1s, 2s, 4s, 8s... const delay Math.pow(2, retryCount) * 1000; setTimeout(() { pollPaymentStatus(orderNo, maxRetries, retryCount 1); }, delay); }); }5. 避坑五个让支付功能上线前崩溃的典型问题5.1 现象点击 QQ 支付按钮无反应控制台报Uncaught ReferenceError: $ is not defined原因app.js依赖 jQuery但index.html中script srcjquery.min.js标签位置在app.js之后导致执行时$未定义。解决将 jQuery 引入标签移到所有自定义 JS 之前或在app.js外层加if (typeof $ undefined) { console.error(jQuery not loaded); return; }容错。5.2 现象支付宝二维码生成后扫码提示「该订单不存在」原因后端调用alipay.trade.page.pay时未传product_codeFAST_INSTANT_TRADE_PAY支付宝默认使用INTEGRAL_PAY积分支付导致订单类型不匹配。解决在 SDK 调用中显式指定product_code例如 Python 中alipay.api_alipay_trade_page_pay( out_trade_noorder_no, total_amountstr(amount), subjectsubject, product_codeFAST_INSTANT_TRADE_PAY # 关键 )5.3 现象QQ 支付回调通知中out_trade_no字段为空原因QQ 支付 notify XML 中out_trade_no被包裹在![CDATA[]]内部分 XML 解析器如 Pythonxml.etree.ElementTree默认不解析 CDATA返回空字符串。解决使用支持 CDATA 的解析器或手动正则提取import re xml_str request.body.decode() out_trade_no re.search(rout_trade_no!\[CDATA\[(.*?)\]\]/out_trade_no, xml_str).group(1)5.4 现象页面在 iOS Safari 中点击支付按钮后白屏原因iOS Safari 对window.location.href跳转有严格限制若不在用户手势click上下文中执行会静默失败。app.js中submitOrder()若被setTimeout包裹将失去上下文。解决确保跳转逻辑直接绑定在 click 事件回调中禁止异步延迟// 正确 $(#pay-qq).on(click, function() { submitOrder(qq); // submitOrder 内部直接调用 window.location.href }); // 错误 $(#pay-qq).on(click, function() { setTimeout(() submitOrder(qq), 0); // 失去手势上下文 });5.5 现象支付宝扫码后支付成功但前端轮询始终返回status: pending原因支付宝异步通知notify和同步返回return_url是两条独立路径。app.js轮询的是你后端的订单查询接口而该接口未监听支付宝 notify未更新数据库订单状态。解决后端必须实现notify_url接口验签通过后立即更新数据库order_status paid否则轮询永远查不到变化。切记notify 是唯一可信的支付成功信号前端轮询只是用户体验优化不能替代 notify 处理。6. 进阶技巧用localStorage实现支付状态跨页面持久化避免用户刷新丢单6.1 为什么需要状态持久化一个真实翻车场景去年我们上线一个课程购买页用户点击支付宝扫码后习惯性按 F5 刷新页面——结果二维码消失轮询中断订单卡在 pending。用户电话打进来质问「钱扣了但没开通权限」查日志发现支付宝 notify 已成功到达但前端因页面刷新丢失了order_no无法继续轮询。根源在于app.js中pollPaymentStatus(orderNo)的orderNo只存在 JS 变量里刷新即丢。6.2 方案用localStorage存储待轮询订单号并自动恢复改造submitOrder()函数在跳转前存入localStorage// app.js 第 65 行起 function submitOrder(payType) { const amount $(#amount).val(); const orderNo generateOrderNo(); // 你自己的订单号生成逻辑 // 存入 localStoragekey 为 pending_order localStorage.setItem(pending_order, JSON.stringify({ order_no: orderNo, pay_type: payType, timestamp: Date.now() })); // 后续发起请求... $.post(PAYMENT_API, { pay_type: payType, amount: amount, order_no: orderNo }, function(res) { if (res.code 0) { if (payType qq) { jumpToQQPay(res.data.pay_url); } else { renderAlipayQR(res.data.qr_code); // 启动轮询 pollPaymentStatus(orderNo); } } }); }同时在index.html的head中加入初始化脚本页面加载时自动恢复script // 页面加载时检查 pending_order document.addEventListener(DOMContentLoaded, function() { const pending localStorage.getItem(pending_order); if (pending) { const { order_no, pay_type } JSON.parse(pending); // 如果是支付宝重新渲染二维码 if (pay_type alipay) { // 从后端重新拉取二维码因 base64 有时效性 $.get(/api/pay/alipay/qrcode?order_no${order_no}, function(res) { if (res.code 0) { $(#qrcode).qrcode({text: res.data.qr_code}); pollPaymentStatus(order_no); } }); } // 如果是 QQ提示用户「已在 QQ 中打开支付页」 else if (pay_type qq) { alert(支付页已在 QQ 中打开请切换至 QQ 完成支付); } } }); /script6.3 更进一步用BroadcastChannel实现多标签页状态同步如果用户开了多个购买页标签一个标签支付成功其他标签应实时更新。localStorage的storage事件可监听// app.js 末尾添加 window.addEventListener(storage, function(e) { if (e.key pending_order e.newValue null) { // 其他标签页已清除 pending_order说明支付完成 showResult(支付成功, success); } }); // 在 showResult 后清除 localStorage function showResult(msg, type) { // ...原有逻辑 localStorage.removeItem(pending_order); }这样当用户在一个标签页支付成功localStorage.removeItem(pending_order)触发storage事件其他标签页立即收到通知并更新 UI。从那以后我每次交付支付功能都强制走一遍「F5 刷新 多标签页切换 微信内分享」三连测确保localStorage和BroadcastChannel双保险生效。支付不是炫技是让用户敢点、敢付、敢信——而这份 HTML 胶水层就是你构建信任的第一块砖。希望帮到你。本文还有配套的精品资源点击获取