HTML5页面无法直接调用支付接口,必须由后端签名并返回参数;微信H5支付需后端调unifiedorder获取mweb_url跳转,支付宝需后端生成签名表单自动提交;App内H5须通过原生桥接调起SDK;支付结果必须以服务端异步通知验签为准。

HTML5 页面本身不能直接调用支付接口,所有主流支付(微信、支付宝、银联等)都禁止前端 JS 直接发起支付请求,必须由后端签名并返回支付参数,前端再用这些参数唤起支付 SDK 或跳转。这是安全底线,绕不过。
微信 H5 支付:chooseWXPay 不能在普通 HTML5 页面直接用
很多人误以为引入微信 JS-SDK 就能调用 chooseWXPay,但实际前提是:页面域名已配置在公众号「JS 接口安全域名」中,且当前用户已关注该公众号(或通过公众号菜单进入),否则 config 校验失败,chooseWXPay 会静默不执行。
- 真正适用于纯 HTML5(非公众号内)的微信方案是「微信 H5 支付」:后端调用
unifiedorder接口,返回mweb_url,前端用window.location.href跳转过去 - 跳转后由微信客户端唤起支付页,支付完成再重定向回你指定的
redirect_url - 注意:微信 H5 支付有金额限制(单笔 ≥1 元),且需开通「H5 支付」权限(商户平台单独申请,不是默认开通)
- 常见错误:
invalid total_fee(金额单位错,应为分)、invalid trade_type(传了JSAPI而非MWEB)
支付宝手机网站支付:靠后端返回 pay.htm 表单自动提交
支付宝不提供前端 JS SDK 用于 H5 支付,标准流程是后端调用 alipay.trade.wap.pay 接口,拿到一段含隐藏字段的 HTML 表单(pay.htm 内容),前端用 document.write() 或 form.submit() 自动提交到 https://openapi.alipay.com/gateway.do。
- 关键字段必须由后端生成并签名:
app_id、method、charset、sign、biz_content(含subject、out_trade_no、total_amount等) -
total_amount单位是元,保留两位小数(如"9.90"),不能传整数或分 - 前端不要尝试拼接 sign,RSA 签名必须在服务端完成;否则返回
ILLEGAL_SIGN - 跳转后由支付宝页面完成支付,异步通知走后端,前端仅靠同步返回
return_url做轻量提示
App 内嵌 HTML5 怎么调起微信/支付宝?得靠原生桥接
如果 HTML5 运行在 App WebView 中(比如 Cordova、React Native WebView、uni-app),就不能走 H5 支付跳转,而要让原生层提供 JSBridge 接口,例如 window.webkit.messageHandlers.pay.postMessage({...}),由原生调起对应 SDK。
立即学习“前端免费学习笔记(深入)”;
- 微信:iOS 调
sendReq:,Android 调api.sendReq(req),参数必须包含partnerId、prepayId、nonceStr、timeStamp、package、sign - 支付宝:iOS 用
APMobilePaySDK的payOrder:fromScheme:callback:,Android 用AliPay.getInstance().payOrder(...) - 前端无法自行获取
prepayId或支付宝订单字符串,仍需后端统一下单并返回完整参数 - 常见坑:iOS WKWebView 默认禁用
location.href跳转支付宝/微信 URL,必须由原生拦截并处理;Android 需在WebViewClient.shouldOverrideUrlLoading中识别特定协议
真正容易被忽略的是支付结果校验环节——前端看到「支付成功」页面绝不等于交易成功,一切以服务端收到支付平台的异步通知(notify_url)并验签通过为准。跳转页、SDK 回调、前端轮询,都可能被用户中断或伪造。










