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

yuanyi正

已于 2023-08-07 23:48:02 修改

阅读量991

点赞数 3

文章标签：微信前端微信支付微信公众号支付 nodejs

于 2023-08-07 23:45:00 首次发布

本文链接：https://blog.csdn.net/yuan_618859/article/details/132157182

版权

微信支付

在微信公众号里面的微信支付
以前是通过调用jsApi来拉起支付页面的
现在改成直接通过函数调用了2023.08.07
在这中间如果有任何问题，可以咨询我微信号yizheng369
注意：必须要公司的【商户号】才能调通，个人是没有权限调这个支付接口的。但你可以先了解。

前言

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

常规报错

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

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

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

1.设置支付目录

这里设置要去【微信支付商户平台】（pay.weixin.qq.com）
在这里插入图片描述

2.设置授权域名

这里设置，要去【微信公众平台】，你的公众号的设置
这里设置要一点后台知识，如果不会的话，可能设置不成功。因为设置时，微信会发起一个对你后台的验证过程。
在这里插入图片描述

3.前面设置完了，往下看

在这里插入图片描述

重点看这个过程：
只需要做好前面2点，就能成功支付了
在这里插入图片描述

3.1 商户server调用统一下单接口请求订单，api参见公共api【统一下单API】

这一点是后台做的，这一点最重要，也是难度最大的。

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

在这里插入图片描述

接口说明：
在这里插入图片描述

接着1：

在这里插入图片描述

接着2：

在这里插入图片描述

举例如下：以下是你必填的参数11个
注意下面openid不知道怎么获取的，看我之前录制的这个视频
https://www.bilibili.com/video/BV13W4y1u7fy/?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>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：真正生成签名的写法

注意：这一步非常重要，如果错了，没法继续走下去。
要用前面的【必填的参数11个】排列好的字符串，和支付密码key，来生成签名

在这里插入图片描述

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

以nodejs为例：

const request = require('request');
const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
// 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>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

在这里插入图片描述

此时，本来后台的工作完成了，但前端在拉起支付页面的时候，也要传参，前端也要再次生成【签名】。这里就是有点难理解的，我一开始也转不过来，不是前面已经生成过签名了吗？为啥这里还要再次生成呢？
【没办法，人家腾讯要求你生成，你就必须再次生成】
【腾讯的套路是：你每一次调我的接口时，你都必须重新生成签名。第一次是获取预支付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）：http://res.wx.qq.com/open/js/jweixin-1.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，但并不保证它绝对可靠。
		      } 
	  }); 
}

到此就成功了。完
大家在这个过程中，如果有问题，注意对比官方文档和我文章的细节，看看是否参数个数和值是否正确。自己先搞两天，还不行可以通过文章开头微信找我。