两种js方法发起微信支付：WeixinJSBridge，wx.chooseWXPay区别

原文链接：https://www.2cto.com/weixin/201507/412752.html

1.为什么会有两种JS方法可以发起微信支付？

当你登陆微信公众号之后，左边有两个菜单栏，一个是微信支付，一个是开发者中心。

在开发者中心中，有一个微信JS-SDK说明文档。

在此说明文档中，有一个发起微信支付的请求API

wx.chooseWXPay({
    timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    nonceStr: '', // 支付签名随机串，不长于 32 位
    package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
    signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    paySign: '', // 支付签名
    success: function (res) {
        // 支付成功后的回调函数
    }
});

在微信支付菜单栏中，有一个使用教程。里面有一个使用JS API发起支付请求的小菜单。

进入之后，里面一个公众号支付的菜单栏。在里面，有一个H5调起支付API的页面。

它里面发起一个支付的代码是：

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId" : "wx2421b1c4370ec43b",     //公众号名称，由商户传入
           "timeStamp":" 1395712654",         //时间戳，自1970年以来的秒数
           "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串
           "package" : "prepay_id=u802345jgfjsdfgsdg888",
           "signType" : "MD5",         //微信签名方式:
           "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
       },
       function(res){
           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有两种方法可以调起微信支付呢？

我的理解：第一种方法是为了跟其他js API接口统一（里面可以调用很多微信的功能）而提供的。

第二种方法仅仅是针对微信支付这个功能提供的。

也就是说，按照这两种方法来进行微信支付，都是可以的，但是两种方法调用的方式和提供的参数不一样。

2.微信支付有v2和v3版本的区别？

这种区别，是相对于getBrandWCPayRequest方法发起的微信支付。

当你登陆微信公众平台，点击微信支付。如果看到有技术升级的菜单栏，就证明你现在使用的是v2版本，如果你进行技术升级，那么，就会升级到v3版本。

v2版本和v3版本的发起微信支付的方式不一样，因此，如果你之前使用了v2版本进行了微信支付的开发，那么你技术升级到v3版本后，就不能使用原来的v2版本的调用方式了，也就意味着，你的代码需要改动。当然，你不升级的话，是没有问题的。

v3版本比v2版本多了一些功能，比如：红包，券等。

v2版本发起微信支付的方法：

WeixinJSBridge.invoke('getBrandWCPayRequest',{
                        "appId" : getAppId(), //公众号ID
                        "timeStamp" : getTimeStamp(), //时间戳，当前系统的时间，具体格式，请看API
                        "nonceStr" : getNonceStr(), //随机串，具体格式请看API
                        "package" : getPackage(),//扩展包
                        "signType" : "SHA1", //微信签名方式:sha1
                        "paySign" : getSign() //微信签名
                        },function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ) {}
                                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                                //因此微信团队建议，当收到ok返回时，向商户后台询问是否收到交易成功的通知，若收到通知，前端展示交易成功的界面；若此时未收到通知，商户后台主动调用查询订单接口，查询订单的当前状态，并反馈给前端展示相应的界面。
                        }
); 

v3版本发起微信支付的方法跟v2的一样，只是参数不一样。

其中，package的值，v3是通过统一接口调用获取到的。

signType，v3使用的是md5方式。

由于微信支付开发教程，已经按照v3版本的方式给出了，所以v2版本，我们就不说了，接下来，我们详细讲解v3版本的开发方式。

3.v3版本开发步骤

想要在前端发起微信支付，就必须有appId，timeStamp，nonceStr，package，signType，paySign这六个参数。

其中，appid，signType已经直接给出了。

timestamp和noncestr，可以根据文档给出的规则算出来。

package是统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***。

所以，我们先来看下如何获得此prepay_id。

我们先去看统一下单接口：

此接口的调用，是通过服务端的代码进行调用的，也就是你的应用服务器，这里我们假设你使用的是java代码。

接口链接

URL地址：https://api.mch.weixin.qq.com/pay/unifiedorder

请求参数（只考虑必填的）

appid，mch_id，nonce_str，body，out_trade_no，total_fee，notify_url，trade_type，这几个参数，我们可以直接获得。

spbill_create_ip（终端IP）和sign（签名）我们需要采取方式获得。

获取用户的ip地址，前端可以通过以下方式获取，然后传给后台。后台也可以自己获取（对java不熟）。

<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
var returnCitySN = {"cip": "210.21.236.135", "cid": "440300", "cname": "广东省深圳市"};

最后，只剩下sign了。

我们进入到签名算法文档。大家认真仔细的查看此文档，因为此签名算法会使用几次。

此文档中有一个例子，大家按照此例子把自己要请求的参数按照字典序组装起来，最后拼接API秘钥。此秘钥是在商户平台中，账户设置，API安全中自己设置的，此秘钥只能放在服务器端，也就是java代码中，不能进行传输。之前的v2版本，就是放在前端（js代码中的），不安全。

最后，用java代码中的md5方法进行加密，加密完之后，转化成大写，就得到sign了。

最后，通过java代码，把这些参数组成xml文件发给微信服务器（https://api.mch.weixin.qq.com/pay/unifiedorder）。

如果返回成功，就会得到以下这种形式的数据：

<xml>
   <return_code><![CDATA[SUCCESS]]></return_code>
   <return_msg><![CDATA[OK]]></return_msg>
   <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
   <mch_id><![CDATA[10000100]]></mch_id>
   <nonce_str><![CDATA[IITRi8Iabbblz1Jc]]></nonce_str>
   <sign><![CDATA[7921E432F65EB8ED0CE9755F0E86D72F]]></sign>
   <result_code><![CDATA[SUCCESS]]></result_code>
   <prepay_id><![CDATA[wx201411101639507cbf6ffd8b0779950874]]></prepay_id>
   <trade_type><![CDATA[JSAPI]]></trade_type>
</xml>

java代码解析后，把prepay_id返回给前端。

这时，前端要发起微信支付，就只差paySign了。

此paySign，也必须按照签名算法来得到。这里，我们同样在java代码中，按照调起微信支付getBrandWCPayRequest方法的请求参数进行签名算法操作。

这里需要对appId，timeStamp，nonceStr，package，signType这5个请求参数进行组装，然后拼接商户平台秘钥，md5加密，转换成大写，最后返回给前端。

这时，前端就可以调用此接口了。

上面的图，我们省略第二步。

4.按照统一接口实现v3版本的微信支付。

在微信js-sdk中，有详细的说明：所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

这里的参数，我们只有signature不知道。

生成signature之前必须先了解一下jsapi_ticket，jsapi_ticket是公众号用于调用微信JS接口的临时票据。正常情况下，jsapi_ticket的有效期为7200秒，通过access_token来获取。由于获取jsapi_ticket的api调用次数非常有限，频繁刷新jsapi_ticket会导致api调用受限，影响自身业务，开发者必须在自己的服务全局缓存jsapi_ticket 。

1. 参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）：../15/54ce45d8d30b6bf6758f68d2e95bc627.html
2. 用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

按照获取access token的文档，我们可以获得

{"access_token":"ACCESS_TOKEN","expires_in":7200}

此文档很容易看懂，AppID和AppSecret在微信公众平台可获取。

紧接着第二步，就可以获得：

{
"errcode":0,
"errmsg":"ok",
"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}

里面的ticket就是jsapi_ticket。

最后，按照下面的签名算法得到signature。

签名算法

签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。

即signature=sha1(string1)。 示例：

noncestr=Wm3WZYTPz0wzccnW
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
timestamp=1414587457
url=https://mp.weixin.qq.com?params=value

步骤1. 对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=https://mp.weixin.qq.com?params=value

步骤2. 对string1进行sha1签名，得到signature：

0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事项

签名用的noncestr和timestamp必须与wx.config中的nonceStr和timestamp相同。
签名用的url必须是调用JS接口页面的完整URL。
出于安全考虑，开发者必须在服务器端实现签名的逻辑。

如出现invalid signature 等错误详见附录5常见错误及解决办法。

配置完成之后，我们就可以在下面的函数中调用微信支付接口了。

wx.ready(function(){
　　
　　wx.chooseWXPay({
    　　timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
    　　nonceStr: '', // 支付签名随机串，不长于 32 位
    　　package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
    　　signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
    　　paySign: '', // 支付签名
    　　success: function (res) {
        　　// 支付成功后的回调函数
    　　}
　　});
　　// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 

});

然后，这里的支付签名paySign和package按照前面的方式得来就行了。

总结：如果仅仅是实现微信支付这样的功能，还是参考第三项。因为第四项多了一步，v2版本已经淘汰。

如果需要实现微信支付和其他微信功能，那么参考第四项。

里面的坑很多：记住，参数名的大小写要一致，不管是前端还是后台，在签名时，只要大小写不一致，就会出错。