HTML5页面无法直连支付，必须经HTTPS服务端生成签名参数并中转：微信H5用MWEB模式返回h5_url跳转，支付宝用alipay.trade.page.pay提交表单；所有验签、回调处理、状态确认均须服务端完成。

HTML5 页面本身不能直接接入支付，必须走服务端中转

纯静态 index.html 文件里写再多 fetch 或 XMLHttpRequest，也拿不到支付网关的合法响应——微信/支付宝等平台明确要求：prepay_id、sign、timestamp 等关键参数必须由你自己的服务器生成并签名，且域名需在商户后台白名单中备案。浏览器前端直连支付接口会触发 403 Forbidden 或 INVALID_REQUEST 错误。

• 所有支付 SDK（如微信 JS-SDK、支付宝 AlipayJSBridge）都只负责「唤起收银台」，不负责「生成订单」
• 前端能做的只有：调用你后端 API 获取支付参数 → 触发 SDK 的 chooseWXPay 或 my.pay.requestPayment
• 你的服务端必须部署 HTTPS，且域名与微信公众号/小程序/支付宝开放平台配置的「支付授权目录」完全一致（注意末尾斜杠）

微信 H5 支付必须用 MWEB 模式，不能用 JSAPI

很多人卡在「点击支付没反应」或跳转到「该链接无法访问」，本质是混淆了场景：JSAPI 只适用于公众号内嵌网页（用户已关注公众号且 openid 可获取），而普通手机浏览器打开的 HTML5 页面，必须走 MWEB（即微信内置浏览器外的 H5 支付）。它返回的是一个带 redirect_url 的跳转链接，由你前端重定向过去。

• MWEB 接口地址是 https://api.mch.weixin.qq.com/v3/pay/transactions/h5（v3 版）或旧版 https://api.mch.weixin.qq.com/pay/unifiedorder（v2 版）
• 请求体必须包含 scene_info.h5_info.type = "Wap" 和 scene_info.h5_info.app_name
• 返回的 h5_url 是临时有效链接（通常 5 分钟），需立即 window.location.href = res.h5_url

支付宝网页支付要用 alipay.trade.page.pay，别碰 alipay.wap.trade.pay

支付宝文档里有两个相似接口，但适用场景不同：alipay.trade.page.pay 是标准 H5 支付（适配所有浏览器），而 alipay.wap.trade.pay 是老版本 WAP 支付，2025 年起已逐步下线，调用会返回 INVALID_PARAMETER 或直接拒绝。

• 前端只需构造一个隐藏表单，method="POST" 提交到 https://openapi.alipay.com/gateway.do
• 必填参数包括：app_id、method、format、charset、sign_type、sign、timestamp、version、notify_url、return_url、biz_content（JSON 字符串）
• sign 必须由服务端用 RSA2 私钥生成，前端拼接后无法通过验签

回调验证和订单状态不能靠前端轮询，必须以服务端通知为准

很多开发者在前端用 setInterval 每 2 秒查一次 /api/order/status?sn=xxx，这是危险做法：支付结果可能延迟到达（尤其银行渠道），重复查询浪费资源，且无法防止用户手动篡改状态。微信/支付宝的 notify_url 是唯一可信来源，必须由你服务端接收、验签、更新数据库，并主动推送前端（如 WebSocket 或 Server-Sent Events）。

• 微信 notify 地址必须是公网可访问的 HTTPS 接口，且返回 success（纯文本，无空格无换行），否则微信会持续重试
• 支付宝 notify 中的 trade_status 为 TRADE_SUCCESS 才代表真实到账；return_url 仅作展示，可被用户关闭或伪造
• 前端收到支付完成提示后，仍应调用一次 /api/order/detail?sn=xxx 获取最终状态，但该接口必须校验服务端已标记为「已支付」