公众号H5支付流程前端weixin47000834的博客-

公众号支付(H5页面支付流程)
在做H5页面支付前期准备工作:

1. 需要准备两个域名(域名必须通过ICP备案)
   例如: www.baidu.com(生产环境)
   www.baidu.com(测试环境)
   appId: “wx1231313131231123”, //公众号ID
   secret: “f759f131313131312313131312313121”, //公众号开发密码

公众号后台进行相应配置
2. 登录微信支付商户平台（pay.weixin.qq.com）–>产品中心–>开发配置。
3. 设置授权目录(确保在该目录下可以访问到支付界面，在访问界面需先下载微信提供的.txt文件，将其放到域名指定的服务器上，保证可以访问。)

设置授权域名
开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。

4. 配置获取授权是的IP(此IP是公网可以访问的IP地址，用来接收微信平台返回的access_token)
5. 确保公众号对微信开放平台进行绑定。
6. 在H5界面进行获取授权操作。
   在获取授权分四步:
   第一步：用户同意授权，获取code
   (1) 在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：
   (2) https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redire
   
   以上地址标红字段是需要填写公众号ID以及获取授权之后要跳转到界面
   Appid：公众号ID
   Redirect_uri：前端需要通过encodeURIComponent（Url）进行编码

通过以上操作会获取到Code
通过接口将code传给后台获取用户信息并进行展示。

第二步：通过code换取网页授权access_token
后台同学通过传过来的code获取到access_token oppenid 获取用户信息
通过code换取网页授权access_token

获取code后，请求以下链接获取access_token： https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

第三步：拉取用户信息(需scope为 snsapi_userinfo)
如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。
请求方法
http：GET（请使用https协议） https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

前端同学进行网页支付代码
window.WeixinJSBridge.invoke(
‘getBrandWCPayRequest’, {
“appId”: “wx4c1bd0dabeb65e97”, //公众号名称，由商户传入
“timeStamp”: res.data.payment.timeStamp, //时间戳，自1970年以来的秒数
“nonceStr”: res.data.payment.nonceStr, //随机串
“package”: res.data.payment.prepayId,
“signType”: res.data.payment.signType, //微信签名方式：
“paySign”: res.data.payment.paySign //微信签名
},
function (resBody) {
if (resBody.err_msg == “get_brand_wcpay_request:ok”) {
that.paymentEnd()
that.setState({
isDisplay:true
})
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}else if(resBody.err_msg ==“get_brand_wcpay_request:fail”){
alert(‘支付失败，请稍后重试或联系客服部门寻求帮助。’);
}
});