欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS通过调用微信API实现微信支付功能的方法示例

程序员文章站 2022-06-03 14:07:39
本文实例讲述了js通过调用微信api实现微信支付功能的方法。分享给大家供大家参考,具体如下: 最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定。...

本文实例讲述了js通过调用微信api实现微信支付功能的方法。分享给大家供大家参考,具体如下:

最近在做微信公众号开发,在微信支付上遇到一些问题,困惑了3天,今天终于搞定。期间要感谢一些大神的帮助,趁热下面分享一下我的经验。

在实现微信支付之前,需要到微信开发平台认证,这些认证和配置信息我就不多说了,这里主要从代码层面实现支付。

function onbridgeready(){
  weixinjsbridge.invoke(
    'getbrandwcpayrequest', {
      "appid" : "wx2421b1c4370ec43b",   //公众号名称,由商户传入
      "timestamp":" 1395712654",     //时间戳,自1970年以来的秒数
      "noncestr" : "e61463f8efa94090b1f366cccfbbb444", //随机串
      "package" : "prepay_id=u802345jgfjsdfgsdg888",   //统一订单号
      "signtype" : "md5",     //微信签名方式:
      "paysign" : "70ea570631e4bb79628fbca90534c63ff7fadd89" //支付签名
    },
    function(res){
      alert(res.err_msg);
      if(res.err_msg == "get_brand_wcpay_request:ok" ) {}   // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回  ok,但并不保证它绝对可靠。
    }
  );
}
if (typeof weixinjsbridge == "undefined"){
  if( document.addeventlistener ){
    document.addeventlistener('weixinjsbridgeready', onbridgeready, false);
  }else if (document.attachevent){
    document.attachevent('weixinjsbridgeready', onbridgeready);
    document.attachevent('onweixinjsbridgeready', onbridgeready);
  }
}else{
  onbridgeready();
}

上面的js代码是官方文档上贴出来的,官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7。

下面对js中的几个参数做主要的讲解:

在开发过程中,有4个非常重要的参数:一个是appid,appsecret,apikey和商户号。上面js中的appid就是其中之一。timestamp是一个时间戳,10位数,noncestr是随机数,32位以内,这里最重要的两个参数,也是最容易出错的就是package和paysign了。我一一说来。先说package,这里需要用到prepay_id,这个参数是微信生成的订单号,需要我们调用统一订单接口来获取。官方文档:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1。可以从文档看到,要获取prepay_id,需要很多参数,这里面有一个非常重要的参数就是签名。注意:这里的签名和js中的支付签名和不同的。 签名的算法文档里有,我只是强调两点。一个是参数的顺序,一定一定要按照ascii从小到大拼接,二是apikey一定不能错,这个apikey在哪里呢?登入商户平台就可以设置了。

JS通过调用微信API实现微信支付功能的方法示例

拼接好签名需要的字符串后,进行md5加密就可以得到签名了。然后把签名和前面所有的参数组合成xml格式的字符串,调用给的接口url地址:https://api.mch.weixin.qq.com/pay/unifiedorder就可以返回一个xml结果,解析出其中的prepay_id,这样这个参数就成功获取到了。

下面再说js中的最后一个参数paysign:支付签名。支付签名的算法也是一样,把js中的其他5个参数按照顺序拼接,加上apikey,md5加密,ok。

签名的算法都是一样的,只是参数值不同而已。这里需要注意一点。在支付签名的时候,用到随机数noncestr,时间戳timestamp,而签名时使用的这两个参数和js中的这两个参数的值要是一样的,是同一个随机数,同一个时间戳。为什么呢?虽然文档没说,但是我的理解是:支付签名是通过随机数和时间戳来生成的,然后在支付的时候,把随机数,时间戳,支付签名一起发送过去,那么在微信进行验证的时候,也会根基js中的随机数和时间戳生成签名和你发送的支付签名进行比较,如果你在js中重新获取新的随机数、时间戳,那么算出来的签名和你发送的签名就会不一样,就会报错:签名失败。

到此,代码层面的注意点就这些,当然,还有其他的一些注意点。比如其中有用的openid,这个参数也是需要调用接口获取到的,还有支付授权的目录是否配置正确。

最后一句总结:仔细看文档,最后问别人,可以找微信支付相关的群,里面很多大神的,我之前就是遇到一个问题纠结了2天没解决,(有时候光看文档也不行),

然后怒加了8个微信开发的群,最终在高人的指点下终于搞出来了。再次表示感谢。程序员是一个热爱分享的群体,他们非常乐意把自己知道的东西分享出去。所以不懂的时候,多问问。

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript中json操作技巧总结》、《javascript切换特效与技巧总结》、《javascript错误与调试技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript数学运算用法总结

希望本文所述对大家javascript程序设计有所帮助。