一次痛楚又甜美的微信付出踩坑之旅

2019年8月24日 195次阅读 来源: 夕夏温存

通常和钱打交道的事，没有一样是轻易的。这是我第一次打仗微信付出，发明网上照样有许多同砚在乞助，XXX了怎样办？XXX是什么状况？为了协助更多的小伙伴离开“苦海”，我决议写下此次的踩坑之旅，给更多的人协助。

引见

微信付出体式格局分为刷卡付出、民众号付出、扫码付出、APP付出、H5付出、小顺序付出。

先从运用场景来各自说一说，如许，能够最快的推断出应当挑选哪种付出。

  • 刷卡付出：运用扫描装备（扫描枪）多见于超市、便利店运用
  • 民众号付出：嵌入民众号的H5页面
  • 扫码付出：用户翻开“微信扫一扫”，扫描商户的二维码并付出
  • APP付出：外部APP运用，用户触发付出时，转到微信内完成付出
  • H5付出：非微信内置浏览器请求微信付出
  • 小顺序付出：用户在微信小顺序中运用微信付出

背景

我们公司请求的是微信效劳号，须要微信付出的是嵌入效劳号内部的网页，所以依据引见，应当挑选“民众号付出”。

开辟步骤

起首不要被微信付出的开辟吓着，实在它很简朴。先仔细看民众号付出的文档，看不懂的多看几遍，还看不懂的，着手操纵一下，试一试。

文档在此：
https://pay.weixin.qq.com/wik…

  • 步骤一：一致下单

随着文档，咱一点点来，搞邃晓每一步是为何，就不会模模糊糊搞不清楚了。

起首说一下，这个接口是背景须要完成的，这个接口的目标就是猎取prepay_id,它是预付出生意业务回话标识。将prepay_id传给前台，前台挪用js-sdk，这属于步骤二的范围了，一会讲。

接口链接
URL地点：https://api.mch.weixin.qq.com…

在文档中说清楚明了，必需运用post 要领请求微信给的接口链接，传入的数据也必需是xml花样，返回的也是xml的。醉了？不要醉，微信是如许的，付出宝也是如许的。手动笑容，吸收吧。

接着来。

简朴粗犷贴代码：

// '/addOrder'是留给前台的挪用接口
router.post('/addOrder',(req,res)=>{    
const addOrderUrl = 'https://api.mch.weixin.qq.com/pay/unifiedorder';    
var client_ip = "";    
client_ip = req.body.ipaddr;    
var appid = "1234567890"; // 效劳号|民众号的appid    
var body = "商品简朴形貌-测试"; // 商品简朴形貌    
var mch_id= "1234567890"; // 商户号，请求微信付出，腾讯给的商户号    
// var device_info = "WEB";  
var nonce_str = getRanId(32); // 随机字符串 
var out_trade_no = "" +new Date().getTime() + Math.floor( Math.random() * 10 ); //商户订单号
var total_fee = req.body.total_fee; //付出金额，单元：分    
var sign = "";    
var notify_url = "http://123.456.789"; //异步吸收微信付出效果关照的回调地点    
var trade_type = "JSAPI"; // 生意业务类型    
var openid = req.session.openId;    
console.log(openid);    
var stringA = `appid=${appid}&body=${body}&mch_id=${mch_id}&nonce_str=${nonce_str}&notify_url=${notify_url}&openid=${openid}&out_trade_no=${out_trade_no}&spbill_create_ip=${client_ip}&total_fee=${total_fee}&trade_type=${trade_type}`;    
var stringSighTemp = stringA+"&key=****#####jiaoyuguihuayuan----***"; //32位的商户key,自定义的，这里为了隐私，我用的特殊符号给你们展现   
sign = md5(stringSighTemp).toUpperCase();    
var xml = `<xml>      
<appid>${appid}</appid>      
<body>${body}</body>      
<mch_id>${mch_id}</mch_id>      
<nonce_str>${nonce_str}</nonce_str>      
<notify_url>${notify_url}</notify_url>     
<openid>${openid}</openid>     
<out_trade_no>${out_trade_no}</out_trade_no>    
<spbill_create_ip>${client_ip}</spbill_create_ip>     
<total_fee>${total_fee}</total_fee>  
<trade_type>${trade_type}</trade_type>    
<sign>${sign}</sign>    
</xml>`;
var Res = res;axios({  
    method: 'post',   
    url: addOrderUrl,   
    data: xml,   
    responseType: 'text/xml',   
    headers: {     
       'Content-Type': 'text/xml' 
    }
 }).then( res=>{   
    console.log(res)  
    Res.send(res.data)
 }).catch( err=>{   
    console.log( err)})
})

申明

client_ip 参数 是客户端的ip地点，原本我是在背景猎取客户端ip地点的，由于我们运用了nginx代办，req.ip 返回的都是 ::ffff:127.0.0.1 这是IPV6花样的字符串。网上有一个答案对此做出了诠释： stackoverflow.com/questions/2…

在这里，我用的一个网上的剧本在前台猎取的， http://pv.sohu.com/cityjson?i…
运用要领： window.ipaddr = returnCitySN[‘cip’];
其他的参数，都是参考微信付出的请求去写的。

涌现的毛病

  • XML花样毛病

《一次痛楚又甜美的微信付出踩坑之旅》

而检察文档，缘由是如许的
《一次痛楚又甜美的微信付出踩坑之旅》

我：#&(%#@+%)，也不给个详细点的申明…

这类毛病须要“顿悟”，我倏忽发清楚明了我的毛病。是我明白错了！我给body标签加了一个 <![CDATA[]]> 致使我的xml花样毛病，实际上是有detail字段才须要增添 <[CDATA[]]>， 其他的不须要。

我：咳咳，初级毛病。注重看文档，根据请求来，既不多添什么，也不要少什么。

我把<[CDATA[]]>去掉以后，发明果真是这个缘由，不再涌现XML花样毛病了，然则，照样愉快的太早，由于它报了署名毛病。呵呵呵~

  • 署名毛病

文档中说的署名盘算很严厉：
第一步，设一切发送或许吸收到的数据为鸠合M，将鸠合M内非空参数值的参数根据参数名ASCII码从小到大排序（字典序），运用URL键值对的花样（即key1=value1&key2=value2…）拼接成字符串stringA。

特别注重以下主要划定规矩：
第一步，设一切发送或许吸收到的数据为鸠合M，将鸠合M内非空参数值的参数根据参数名ASCII码从小到大排序（字典序），运用URL键值对的花样（即key1=value1&key2=value2…）拼接成字符串stringA。

◆ 参数名ASCII码从小到大排序（字典序）；
◆ 假如参数的值为空不介入署名；
◆ 参数名辨别大小写； （民众号付出满是小写）
◆ 考证挪用返回或微信主动关照署名时，传送的sign参数不介入署名，将天生的署名与该sign值作校验。
◆ 微信接口能够增添字段，考证署名时必需支撑增添的扩大字段

第二步，在stringA末了拼接上key获得stringSignTemp字符串，并对stringSignTemp举行MD5运算，再将获得的字符串一切字符转换为大写，获得sign值signValue。

◆ key设置途径：微信商户平台(pay.weixin.qq.com)–>账户设置–>API平安–>密钥设置

这里我查阅了一些材料，看到过有如许几种毛病状况：
key 看错了，这里应当写商户的key,而这个key 是用户手动设置的，长32位。注重：本身保留一份，由于设置好了以后是没法翻开检察的。

《一次痛楚又甜美的微信付出踩坑之旅》
另有一种毛病，我觉得很离谱啊，body内里不能有中文，然则，我把body中的笔墨改成英文，发明并不能改变现状，实在用中文是能够的。

…

总之，找到的这些毛病，统统对我的状况没用！

然后这又须要“顿悟”，本来stringA字符串我用了换行符把很长的字符离隔，这致使换行符被转换为Ascall码中的 n 写进了署名内里，所以，sign毛病，所以要么，把换行符统统去掉，要么用“”衔接，舍弃。我把换行都去掉以后，就没有署名毛病了。

铛铛铛铛 ~

《一次痛楚又甜美的微信付出踩坑之旅》

终究完成了第一步，背景胜利的返回了我们须要的prepay_id

这里为了平安，关于返回sign，和发送的sign举行对照，完整相称以后，才能把效果返回给前台。

  • 步骤二：挪用微信js-sdk接口

微信付出

提议一个微信付出请求

前台收到的是xml数据，要先剖析一下，获得prepay_id

然后挪用微信付出js-sdk，为了人人少走一些弯路，我先来准确的写法，关键步骤以下：

var {prepay_id,appid} = getInfo(res.data); //从背景数据中猎取appid 和 prepay_id
nonceStr = getRanId(32);
timeStamp = new Date().getTime();
var stringA = "appId="+appid+"&nonceStr="+nonceStr+"&package=prepay_id="+prepay_id+"&signType=MD5&timeStamp="+timeStamp;
var stringSignTemp = stringA+"&key=****#####jiaoyuguihuayuan----***";
paySign = md5(stringSignTemp).toUpperCase();
window.wx.chooseWXPay({    
timestamp: timeStamp, // 付出署名时刻戳，注重微信jssdk中的一切运用timestamp字段均为小写。但最新版的付出背景天生署名运用的timeStamp字段名需大写个中的S字符    
nonceStr: nonceStr, // 付出署名随机串，不善于 32 位    
package: "prepay_id=" + prepay_id, // 一致付出接口返回的prepay_id参数值，提交花样如：prepay_id=\*\*\*）    
signType: 'MD5', // 署名体式格局，默以为'SHA1'，运用新版付出需传入'MD5'    
paySign: paySign, // 付出署名 
success: function (res) {        
// 付出胜利后的回调函数        
    console.log(res)   
 },   
fail: function(err){     
    console.log(err)  
}});

备注：prepay_id 经由过程微信付出一致下单接口拿到，paySign 采纳一致的微信付出 Sign 署名天生要领，注重这里 appId 也要介入署名，appId 与 config 中传入的
appId 一致，即末了介入署名的参数有appId, timeStamp, nonceStr,
package, signType。

注重，我要讲个坑点~

挪用js-sdk时，署名中的字段都是小驼峰的写法，timeStamp是如许写的，然则wx.config中，timestamp 是全小写的，所以，亲们，万万不要搞错了，我在这里就被坑了好一会呢。

写完署名以后，当你用微信web开辟者东西去测试的话，就会看到，“不支撑模仿”如许的提醒。这个时刻，不要犹疑，直接上真机去测试，这并非我们的顺序涌现了题目。

小tips: 在真机上，我们是没有办法看到console出的一些调试信息，所以，要想个办法，能够用alert，也能够把调试信息打印在屏幕上面，我挑选打印在屏幕上。这里要说一些，微信给的文档没有那末完全，有一些是要尝尝才指点的，比方wx.config中的success和fail函数，参数信息怎样打印，实际上是res.errMsg和err.errMsg.

上面我说的这些你都注重到了，然则微信付出的控件你依旧变更不起来的话，多是微信商户平台的开辟设置涌现了题目，在产品中间-开辟设置-付出设置-民众号付出
中举行设置，设置的时刻，注重肯定要到末了一级目次，比方我要在cms.123.456/book/list/index.html页面中去举行微信付出，那末你的设置应当是 cms.123.456/book/list/

好了，开辟中基本上一切的坑都提到了，这是竖立在你设置没有失足的状况下。接下来，看看究竟能不能真的付出。

完成

《一次痛楚又甜美的微信付出踩坑之旅》
《一次痛楚又甜美的微信付出踩坑之旅》

功德圆满，让我想起了，近来盛行的一句话，你这磨人的小妖精，微信付出！

愿望能给你们带来协助~

    原文作者：夕夏温存
    原文地址: https://segmentfault.com/a/1190000013460422
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞