微信支付从前端到后台详细过程

微信支付从前端到后台详细过程微信支付从前端到后台的详细过程分享给大家 40001 签名错误

大家好,欢迎来到IT知识分享网。

微信支付

前言

说实话,微信里面的很多功能,通过官方文档都是很难看得懂的,有时候真想骂人,tmd,我前前后后经过了3年左右,才陆续掌握微信接口的套路,也通过b站和csdn的很多网友的文章,学会了很多,今天将这个微信支付的详细过程分享给大家。希望大家少走弯路。这过程真的太痛苦了!

常规报错

40001:你的公众号appid,appSecret没写对
签名验证错误:你的支付密码key不对,key还有版本v2和v3两种,选一种就行(本文用v2),或者拼接顺序不对,等等。
细节太多了,大家耐心,细心对比官方文档,就能成功哈。

一、直接从支付接口文档说起

微信支付官方文档:https://pay.weixin..com/wiki/doc/api/jsapi.php?chapter=7_1

1.设置支付目录
2.设置授权域名
3.前面设置完了,往下看

在这里插入图片描述

3.1 商户server调用统一下单接口请求订单,api参见公共api【统一下单API】
这一点是后台做的,这一点最重要,也是难度最大的。 

具体看这个文档【统一下单API】: https://pay.weixin..com/wiki/doc/api/jsapi.php?chapter=9_1

在这里插入图片描述

接着1:

在这里插入图片描述

接着2:

在这里插入图片描述

<xml> <appid>wx2421b1c4370ec43b</appid> <mch_id></mch_id> <nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str> <sign>0CB01533B8C1EFF50BCA001</sign> <body>话费充值</body> <out_trade_no></out_trade_no> <total_fee>1</total_fee> <spbill_create_ip>14.23.150.211</spbill_create_ip> <notify_url>https://wxpay.wxutil.com/pub_v2/pay/notify.v2.php</notify_url> <trade_type>JSAPI</trade_type> <openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid> </xml> 
接着3:复制上面的参数11个,去看看模拟生成签名的结果

在这里插入图片描述

接着4:真正生成签名的写法

在这里插入图片描述

接着5:假如你在前面顺利生成签名,并且和验证的一样,那么就调【统一下单】接口即可

以nodejs为例:

const request = require('request'); const url = 'https://api.mch.weixin..com/pay/unifiedorder'; // xml格式数据 const postData =`<xml> <appid>wx2421b1c4370ec43b</appid> <mch_id></mch_id> <nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str> <sign>0CB01533B8C1EFF50BCA001</sign> <body>话费充值</body> <out_trade_no></out_trade_no> <total_fee>1</total_fee> <spbill_create_ip>14.23.150.211</spbill_create_ip> <notify_url>https://wxpay.wxutil.com/pub_v2/pay/notify.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

在这里插入图片描述

接着7:后台帮前端生成签名

在这里插入图片描述

前端入参
在这里插入图片描述

如何生成呢?

stringA="appid=wxd930ea5d5a258f4f&nonceStr=54&package=prepay_id=&signType=MD5&timeStamp=54"; 

第二步:拼接API密钥:

// 安装md5工具 npm install md5; var md5 = require('md5'); md5('message') stringSignTemp=stringA+"&key=b4c09247ec02edce69f6a2d" //注:key为商户平台设置的密钥key sign=md5(stringSignTemp).toUpperCase()="9A0A8659F005DE2CA0A9CF3B7" 

这样就生成第二次签名了。到此,后台任务全部完成,将参数传给前端即可。轮到前端登场了。

3.2 商户server可通过【JSAPI调起支付API】调起微信支付,发起支付请求。
这个是前端做的,比较简单,只需要拿到后台的配置数据,调用微信提供的方法传参即可 
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,但并不保证它绝对可靠。 } }); } 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/126675.html

(0)
上一篇 2025-09-16 20:15
下一篇 2025-09-16 20:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信