React Native微信支付开发爬坑之旅

1,244 阅读6分钟

       早闻微信支付一直为移动开发者所诟病,这次公司项目新增微信支付需求,一试果然是一把辛酸泪,从配置到与后台调试真是一波三折,整整花了一天的时间才从坑里爬出来,效率也是低。所以有必要做下总结,日后再有微信支付,三两下便可完事。   因为公司项目是RN写的,我这边选用了目前在RN上使用较广泛的微信支付组件,基本上都封装好了,github直通车:react-native-wechat        我们只需要实现两步就可以调起微信支付:

  • 在应用启动的时候注册APPID
 WeChat.registerApp('appid');
  • 在跳转到微信支付的点击事件中配置参数:
 wechat.isWXAppInstalled().then( ( isInstalled ) => {
       if ( isInstalled ) {       //判断手机是否有安装微信
           wechat.pay({
                 partnerId: wxinfo.mch_id,  // 商家向财付通申请的商家id
                 prepayId: wxinfo.prepay_id,   // 预支付订单
                 nonceStr: wxinfo.nonce_str,   // 随机串,防重发
                 timeStamp: result.data.time.toString()    ,  // 时间戳,防重发.
                 package: 'Sign=WXPay',    // 商家根据财付通文档填写的数据和签名
                 sign: result.data.sign        // 商家根据微信开放平台文档对数据做的签名
                 }).then((requestJson)=>{
                           //支付成功回调
                           console.log("----微信支付成功----",requestJson);
                           if (requestJson.errCode=="0"){
                            //回调成功处理
                           }
                       }).catch((err)=>{
                           toastShort('支付失败')
                       })
                   } else {
                       toastShort( '没有安装微信软件,请您安装微信之后再试' );
                   }
               } );

       以上就是react native调用微信支付的过程,使用的开源库已经帮我们封装好了其他的一些配置,用起来也是非常的方便。        接下来就是在手机上跑一遍,鲁迅说过:“新鲜事物第一次尝试就想要成功,几率还是很小的”。当我点击微信支付,期待着跳出熟悉的微信支付界面时,出现了令我失望的结果:屏幕闪了一下,然后,然后就没有然后了,what the f...,好,稳定下情绪,开始我的爬坑之旅。   首先,我先来到这个开源库的文档中寻找下是否有我遗漏的地方,在最后看到了一句话,仿佛看到了曙光:

在安卓机上测试的同学经常会遇到比如调用微信支付时闪一下就没了的问题,这个问题100%跟签名有关,请检查你的签名。 debug版本和release版本的签名是不同的,请注意

       从这段话中,从100%这个字眼我读出了作者坚定的语气,自信的情感。于是我立马让运营小哥查看当时他申请微信支付用的签名,结果一对证,我c...,好,稳定下情绪,果然真是签名不对,当时给了一个dubug的签名,后面我让他换成release的签名,没换过来。好在微信开放平台是支持修改的,而且即时生效。这下应该没问题了吧。。。   不可能的,不存在的,前方路漫漫。。这时候我的心态还是很好的。   依然还是屏幕闪了一下,一只乌鸦带着省略号飞过。。所以说凡事不要说什么100%,接下来,继续我们的爬坑之旅。   排除了权限问题,包括appid,应用签名这些都确定无误,那么问题应该就出在调用微信支付的那些参数上,首先引起我的注意的是sign这个字段,于是来到了微信支付文档(使用第三方,最主要的还是要回归到文档中来),微信支付文档直通车:微信支付开发文档        简单描述下调用流程:

  • app端先调用自家后台的支付接口,把金额,支付类型等一些参数传过去
  • 后台收到这些参数,去调用微信服务端统一下单接口,将金额,商户订单号等等这些传给微信服务端,这时候微信服务端返回成功或失败,成功会附带sign,prepay_id等参数给我们后台。
  • 后台再将微信返回的这些参数返给app端,也就是上文配置中传的那些参数。app端再把这些参数传给微信。整个过程是不是一(fei)气(chang)呵(dan)成(teng)

       那么我们推测问题就出现在这些参数里,让我们一个一个来分析:

  • partnerId 商家ID,这个是申请微信支付的时候,微信分配的ID,直接获取后台返回即可,可以与运营小哥那边再核对下。
  • prepayId 预支付订单,微信服务端返给我们后台的订单,app端直接获取后台返回即可。
  • nonceStr 随机数,没什么好说的,直接获取后台返回即可。
  • timeStamp 时间戳,这是个要小心的地方,之前我们后台没给我返回这个字段,我自以为app端自己获取即时时间戳即可,直接 结果错了,必须使用后台给的时间戳。你说这个锅谁背,55开吧
  • package 文档上说直接写死即可,package: 'Sign=WXPay'
  • sign 这是个大咖,当然计算工作交给后台来做就行,网上看了几篇文章说屏幕一闪,有可能就是sign计算错误,后台小哥跟我讲这个sign是微信返给他的,然后又直接返给我,emmmm,应该有点问题,再去文档看看:微信支付APP端开发步骤,里边第三部有四个字

商户服务器生成支付订单,先调用【统一下单API】生成预付单,获取到prepay_id后将参数再次签名传输给APP发起支付。以下是调起微信支付的

是的,就是这四个字“再次签名”,需要再次签名!!所以我又让后台小哥处理完sign在发给我。   到此,我们把这些参数都给分析了一遍过去,这次要再闪一下我就...我就再找找其他原因,但是事实上,我的app已经成功调起了微信支付,并且成功回调。   好了,这波总结进入尾声了,是不是觉得我写技术文章很啰嗦,就是啰嗦咋滴。不过说回来,还是总结下主题要义:

  • 检查你的APPID,应用签名是否正确
  • 检查你的参数传递是否正确(包括字段大小写),更多地与后台进行调试
  • 以上都确认OK了,重装你的微信再试一遍