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

微信支付

在微信公众号里面的微信支付
以前是通过调用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)
微信支付从前端到后台详细过程_第1张图片

2.设置授权域名

这里设置,要去【微信公众平台】,你的公众号的设置
这里设置要一点后台知识,如果不会的话,可能设置不成功。因为设置时,微信会发起一个对你后台的验证过程。
微信支付从前端到后台详细过程_第2张图片

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

微信支付从前端到后台详细过程_第3张图片

重点看这个过程:
只需要做好前面2点,就能成功支付了
微信支付从前端到后台详细过程_第4张图片

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

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

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

微信支付从前端到后台详细过程_第5张图片

接口说明:
微信支付从前端到后台详细过程_第6张图片

接着1:

微信支付从前端到后台详细过程_第7张图片

接着2:

微信支付从前端到后台详细过程_第8张图片

举例如下:以下是你必填的参数11个
注意下面openid不知道怎么获取的,看我之前录制的这个视频
https://www.bilibili.com/video/BV13W4y1u7fy/?vd_source=125d808bbbad2b8400f221b816a0f674


   wx2421b1c4370ec43b
   10000100
   1add1a30ac87aa2db72f57a2375d8fec
   0CB01533B8C1EF103065174F50BCA001
   话费充值
   1415659990
   1
   14.23.150.211
   https://wxpay.wxutil.com/pub_v2/pay/notify.v2.php
   JSAPI
   oUpF8uMuAJO_M2pxb1Q9zNjWeS6o

接着3:复制上面的参数11个,去看看模拟生成签名的结果

微信支付从前端到后台详细过程_第9张图片

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

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

微信支付从前端到后台详细过程_第10张图片

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

以nodejs为例:

const request = require('request');
const url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
// xml格式数据
const postData =`
   wx2421b1c4370ec43b
   10000100
   1add1a30ac87aa2db72f57a2375d8fec
   0CB01533B8C1EF103065174F50BCA001
   话费充值
   1415659990
   1
   14.23.150.211
   https://wxpay.wxutil.com/pub_v2/pay/notify.v2.php
   JSAPI
   oUpF8uMuAJO_M2pxb1Q9zNjWeS6o
`;

// 配置 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验证不成功,那写代码也肯定不成功

大家不要以为我这里为啥不成功:【我数据都是假的,肯定不成功的】
微信支付从前端到后台详细过程_第11张图片

接着6:如果前面成功了,就能拿到预支付id

微信支付从前端到后台详细过程_第12张图片

此时,本来后台的工作完成了,但前端在拉起支付页面的时候,也要传参,前端也要再次生成【签名】。这里就是有点难理解的,我一开始也转不过来,不是前面已经生成过签名了吗?为啥这里还要再次生成呢?
【没办法,人家腾讯要求你生成,你就必须再次生成】
【腾讯的套路是:你每一次调我的接口时,你都必须重新生成签名。第一次是获取预支付id(prepay_id)生成签名,第二次是前端拉起支付页面也要重新生成签名。】
【腾讯说:你两次是不同的接口,接口参数都不一样,生成两次不同的签名,很合理啊】
再因为,前端无法用md5加密,那就还要拜托后台帮前端生成一次,再传给前端。

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

微信支付从前端到后台详细过程_第13张图片

前端入参
微信支付从前端到后台详细过程_第14张图片

如何生成呢?

第一步:对参数按照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,但并不保证它绝对可靠。
		      } 
	  }); 
}

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

你可能感兴趣的:(微信,前端,微信支付,微信公众号支付,nodejs)