端到后台详细过程"/>
微信支付从前端到后台详细过程
微信支付
在微信公众号里面的微信支付
以前是通过调用jsApi来拉起支付页面的
现在改成直接通过函数调用了2023.08.07
在这中间如果有任何问题，可以咨询我微信号yizheng369
注意：必须要公司的【商户号】才能调通，个人是没有权限调这个支付接口的。但你可以先了解。
前言
说实话，微信里面的很多功能，通过官方文档都是很难看得懂的，有时候真想骂人，tmd，我前前后后经过了3年左右，才陆续掌握微信接口的套路，也通过b站和csdn的很多网友的文章，学会了很多，今天将这个微信支付的详细过程分享给大家。希望大家少走弯路。这过程真的太痛苦了！
常规报错
40001：你的公众号appid,appSecret没写对
签名验证错误：你的支付密码key不对，key还有版本v2和v3两种，选一种就行（本文用v2），或者拼接顺序不对，等等。
细节太多了，大家耐心，细心对比官方文档，就能成功哈。
一、直接从支付接口文档说起
微信支付官方文档：.php?chapter=7_1
1.设置支付目录
这里设置要去【微信支付商户平台】（pay.weixin.qq）
2.设置授权域名
这里设置，要去【微信公众平台】，你的公众号的设置
这里设置要一点后台知识，如果不会的话，可能设置不成功。因为设置时，微信会发起一个对你后台的验证过程。
3.前面设置完了，往下看
重点看这个过程：
只需要做好前面2点，就能成功支付了
3.1 商户server调用统一下单接口请求订单，api参见公共api【统一下单API】
这一点是后台做的，这一点最重要，也是难度最大的。
具体看这个文档【统一下单API】： .php?chapter=9_1
接口说明：
接着1：
接着2：
举例如下：以下是你必填的参数11个
注意下面openid不知道怎么获取的，看我之前录制的这个视频
/?vd_source=125d808bbbad2b8400f221b816a0f674
<xml><appid>wx2421b1c4370ec43b</appid><mch_id>10000100</mch_id><nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str><sign>0CB01533B8C1EF103065174F50BCA001</sign><body>话费充值</body><out_trade_no>1415659990</out_trade_no><total_fee>1</total_fee><spbill_create_ip>14.23.150.211</spbill_create_ip><notify_url>.v2.php</notify_url><trade_type>JSAPI</trade_type><openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>
</xml>
接着3：复制上面的参数11个，去看看模拟生成签名的结果
接着4：真正生成签名的写法
注意：这一步非常重要，如果错了，没法继续走下去。
要用前面的【必填的参数11个】排列好的字符串，和支付密码key，来生成签名
接着5：假如你在前面顺利生成签名，并且和验证的一样，那么就调【统一下单】接口即可
以nodejs为例：
const request = require('request');
const url = '';
// xml格式数据
const postData =`<xml><appid>wx2421b1c4370ec43b</appid><mch_id>10000100</mch_id><nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str><sign>0CB01533B8C1EF103065174F50BCA001</sign><body>话费充值</body><out_trade_no>1415659990</out_trade_no><total_fee>1</total_fee><spbill_create_ip>14.23.150.211</spbill_create_ip><notify_url>.v2.php</notify_url><trade_type>JSAPI</trade_type><openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>
</xml>`;// 配置 POST 请求的选项
const options = {url: url,method: 'POST',headers: {'Content-Type': 'application/xml'},json: true,body: postData
};// 发送 POST 请求并处理响应
request(options, function(error, response, body) {if (!error && response.statusCode === 200) {console.log('success:', body);} else {console.error('err:', error);}
});
接着5.1：postman直接验证：如果postman验证不成功，那写代码也肯定不成功
大家不要以为我这里为啥不成功：【我数据都是假的，肯定不成功的】
接着6：如果前面成功了，就能拿到预支付id
此时，本来后台的工作完成了，但前端在拉起支付页面的时候，也要传参，前端也要再次生成【签名】。这里就是有点难理解的，我一开始也转不过来，不是前面已经生成过签名了吗？为啥这里还要再次生成呢？
【没办法，人家腾讯要求你生成，你就必须再次生成】
【腾讯的套路是：你每一次调我的接口时，你都必须重新生成签名。第一次是获取预支付id(prepay_id)生成签名，第二次是前端拉起支付页面也要重新生成签名。】
【腾讯说：你两次是不同的接口，接口参数都不一样，生成两次不同的签名，很合理啊】
再因为，前端无法用md5加密，那就还要拜托后台帮前端生成一次，再传给前端。
接着7：后台帮前端生成签名
前端入参
如何生成呢？
第一步：对参数按照key=value的格式，并按照参数名ASCII字典序排序如下：
nonceStr:这个是随机字符串，可以和timeStamp一样就行，
用timeStamp = Date.now()生成
stringA="appid=wxd930ea5d5a258f4f&nonceStr=1691420246454&package=prepay_id=123456789&signType=MD5&timeStamp=1691420246454";
第二步：拼接API密钥：
MD5签名方式：
这里的MD5可以通过
// 安装md5工具
npm install md5;
var md5 = require('md5');
md5('message')stringSignTemp=stringA+"&key=192006250b4c09247ec02edce69f6a2d" //注：key为商户平台设置的密钥key
sign=md5(stringSignTemp).toUpperCase()="9A0A8659F005D6984697E2CA0A9CF3B7"
这样就生成第二次签名了。到此，后台任务全部完成，将参数传给前端即可。轮到前端登场了。
3.2 商户server可通过【JSAPI调起支付API】调起微信支付，发起支付请求。
这个是前端做的，比较简单，只需要拿到后台的配置数据，调用微信提供的方法传参即可
先引入如下JS文件，否则函数调用会报错：
在需要调用JS接口的页面引入如下JS文件，（支持https）：.6.0.js
function onBridgeReady(obj){// obj为后台传回来的对象，参数全部用后台传回来的，注意大小写WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": obj.appid, //公众号ID，由商户传入 "timeStamp": obj.timeStamp, //时间戳，自1970年以来的秒数 "nonceStr": obj.nonceStr, //随机串 "package": obj.package, "signType": obj.signType, //微信签名方式： "paySign": obj.paySign //微信签名 },function(res){if(res.err_msg == "get_brand_wcpay_request:ok" ){// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。} });
}
到此就成功了。完
大家在这个过程中，如果有问题，注意对比官方文档和我文章的细节，看看是否参数个数和值是否正确。自己先搞两天，还不行可以通过文章开头微信找我。
更多推荐
微信支付从前端到后台详细过程
发布评论