H5页面的几种 支付方式
1）微信 H5 支付（trade_type=MWEB）
- 场景：微信外浏览器（Safari、Chrome、系统浏览器、QQ 浏览器等）打开的网页微信支付
- 流程：网页下单→跳微信中间页→唤起微信 APP 付款→返回商户页微信支付
- 关键：需备案域名、商户平台开通 “H5 支付” 并配置域名白名单微信支付
- 注意：公众号内网页不能用这个，公众号内要用 JSAPI 支付
2）支付宝 H5 支付（官方叫 “手机网站支付”）
- 场景：手机浏览器网页，同微信 H5
- 流程：网页下单→跳支付宝中间页→唤起支付宝 APP；没装 APP 则引导下载或网页收银台
- 关键：开放平台开通 “手机网站支付”，配置备案域名与回调地址
3) JSAPI 支付（公众号 H5 支付）
适用场景：
- 微信内置浏览器、公众号、服务号网页
- 特点：
- 必须引入微信 JS-SDK，也就是这个文件：
- <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
- 必须微信授权登录拿
openid - 用
WeixinJSBridge.invoke或wx.chooseWXPay弹窗支付 - 交易类型：
trade_type=JSAPI - 只能在微信里用
一，微信支付
微信内两种 H5 支付的区别:
WeixinJSBridge.invoke（无 config 版）
特点：
- 不用引入微信 jssdk
- 不用 wx.config
- 不用签名、不用传 url、不用配置 js 安全域名
- 纯靠微信内核自带的能力
- 只支持：支付
- 最稳定、最简单、坑最少
需要 wx.config 的版本：wx.chooseWXPay
特点：
- 必须引入 jssdk
- 必须 wx.config 签名
- 必须传当前 url
- 必须配置 js 接口安全域名
- 支持：支付 + 分享 + 扫一扫 + 定位等所有功能
wx.config({
debug: false,
appId: '你的appid',
timestamp: '后端给的',
nonceStr: '后端给的',
signature: '后端给的',
// 支付必须加这个，虽然JS-SDK列表里不显示
jsApiList: ['chooseWXPay']
});
wx.ready(function () {
wx.chooseWXPay({
timestamp: '', nonceStr: '',
package: 'prepay_id=xxx',
signType: 'RSA',
paySign: '',
success() {},
cancel() {},
fail() {}
});
});
wx.checkJsApi
微信官方文档明确写了：支付接口不支持 checkJsApi 判断； 只能检测非支付类接口，例如：
wx.checkJsApi({
jsApiList: ['scanQRCode', 'getLocation', 'chooseImage'],
success: function (res) {
console.log(res.checkResult);
}
});
二，H5支付
1、H5 支付 前置必备条件
- 微信商户平台开通H5 支付权限
- 商户平台配置H5 支付域名、业务域名
- 有：商户号、API 密钥、商户证书（部分接口用）
- 网页是已备案域名，不能 IP、不能localhost
2、完整标准流程（从头到尾）
1. 用户操作
用户手机浏览器 / 微信外扫码 → 打开你的 H5 支付页面
2. 前端页面
- 输入金额 / 选择商品
- 前端把金额、订单号传给后端接口
3. 后端核心步骤（关键）
步骤 1：接收前端参数，生成唯一商户订单号
步骤 2：调用微信【统一下单接口】
请求微信接口地址：
plaintext
https://api.mch.weixin.qq.com/pay/unifiedorder必传参数：
- appid（公众号 / 应用 APPID）
- mch_id 商户号
- nonce_str 随机字符串
- body 订单描述
- out_trade_no 你自己的订单号
- total_fee 支付金额分
- spbill_create_ip 用户真实 IP
- trade_type = MWEB（固定 H5 支付类型）
- scene_info必传，H5 必须传这个固定场景参数
- notify_url 微信异步回调地址（支付结果异步推给你）
- return_url 支付完成跳转回你的页面地址
重点：trade_type 填MWEB才是 H5 支付
步骤 3：微信统一下单返回
返回关键字段：
mweb_url：微信 H5 支付中间跳转地址
步骤 4：后端把mweb_url返回给前端
4. 前端拿到 mweb_url
直接页面跳转：
js
location.href = res.data.mweb_url;浏览器会自动跳转到微信官方支付中间页
5. 用户端操作
跳转后唤起微信 → 输入密码 / 指纹 / 面容 完成付款
6. 支付后自动回流
用户支付成功 / 取消 / 关闭微信会自动跳回你后端配置的return_url页面
7. 前端回流页面处理
在 return_url 结果页：
- 主动请求后端接口查询订单状态
- 展示：支付成功、支付失败、已取消
8. 后端异步回调（最核心、以这个为准）
微信会主动请求你配置的notify_url
- 携带真实支付结果、订单号、金额
- 后端验签、校验金额、订单号
- 校验通过 →修改订单状态、发货、充值、开通权限
- 给微信返回固定 xml 格式成功响应
3、H5 支付 关键特点（必记）
- 前端不能实时拿到支付结果跳转到 mweb_url 后页面离开，JS 暂停，没法即时回调
- 只能靠两个方式拿结果：
- 回流 return_url 前端查状态（给用户看）
- 后端 notify_url 异步回调（业务真正入账）
- 不需要微信授权、不需要 openid和公众号静默授权完全没关系，H5 支付不用 openid
- 只能在外浏览器用，微信内置浏览器不要用 H5，要用 JSAPI
三，支付宝支付
支付宝内置浏览器里，普通 H5 扫码支付「不用授权、不用 user_id」，直接可以支付；只有你要「拿到用户信息 / 登录」时才需要授权。
1）使用场景：用户用支付宝 “扫一扫” 扫你的码（H5 链接）
- 二维码内容：你的 H5 页面地址（https://xxx.com/pay）
- 用户扫码 →支付宝内置浏览器打开你的页面
- 你在页面里放一个 “去支付宝付款” 按钮 → 后端生成alipay.trade.wap.pay（手机网站支付）的表单 / 链接 → 前端跳转
- 跳到支付宝收银台 →直接输密码 / 指纹付款
- ✅全程不需要授权、不需要 alipay_user_id、不需要拿到用户信息
$.ajax({
url: "你的后端接口地址",
type: 'POST',
dataType: 'json',
data: data,
success: function(res){
if(res.code === 200 && res.data){
//若后端返回form表单字符串
let alipayFormHtml = res.data;
function submitAlipayForm(formStr) {
// 插入到页面
document.getElementById('payBox').innerHTML = formStr;
// 自动提交表单
setTimeout(() => {
document.forms[0].submit();
}, 100);
}
submitAlipayForm(alipayFormHtml);
//如果返回的是url地址则直接跳转到该地址即可
}else{
alert(res.msg || '创建订单失败');
}
},
error: function(){
alert('网络请求失败');
}
});