JS调用微信API实现支付功能详解

微信支付JSAPI调用概述

本文详细介绍在JavaScript中调用微信支付API以实现支付功能的具体方法，供开发者参考。

近期在进行微信公众号开发时，微信支付环节遇到了阻碍，经过三天的排查与调试，最终成功解决。在此感谢相关技术人员的协助，现将具体实现经验整理分享。

实施微信支付前，需完成微信开发平台的认证及相关配置，此处略去基础配置说明，直接聚焦于代码层面的实现逻辑。

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调用中涉及的关键参数。

开发过程中有四个核心参数至关重要：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必须准确无误，该密钥可在商户平台设置界面找到。

将拼接好的签名字符串进行MD5加密即可得到签名值。随后，将签名及前述所有参数组合成XML格式字符串，调用接口地址：https://api.mch.weixin.qq.com/pay/unifiedorder。接口返回XML结果，解析该结果即可获取prepay_id，从而完成该参数的获取。

接下来说明JS中的最后一个参数PaySign（支付签名）。其算法逻辑相同，即将JS中的其他5个参数按顺序拼接，加入apikey，进行MD5加密即可。

签名算法一致，仅参数值不同。需注意，支付签名使用的随机数nonceStr和时间戳timeStamp，必须与JS调用时使用的这两个参数值完全一致，即使用同一个随机数和时间戳。原因在于，虽然文档未明确说明，但推测支付签名由随机数和时间戳生成。支付时，需将随机数、时间戳及支付签名一并发送。微信验证时，会依据JS中的随机数和时间戳重新生成签名，并与发送的支付签名进行比对。若在JS中重新获取新的随机数或时间戳，计算出的签名将与发送的签名不一致，导致“签名失败”报错。

其他注意事项与总结

代码层面的注意事项主要如上所述，此外还有其他注意点，例如openid参数需通过接口获取，以及支付授权目录配置是否正确等。

最后总结：务必仔细阅读官方文档，遇到难题时可寻求他人帮助，可加入微信支付相关交流群，其中不乏技术专家。此前我曾因一个问题纠结两天未果（仅看文档有时不足），

随后加入了8个微信开发群，最终在高手指导下解决问题。再次表示感谢。程序员群体乐于分享，遇到不懂之处应多请教。

感兴趣的读者可查阅本站相关专题：《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容对JavaScript程序设计有所帮助。