网页调起支付宝付款和微信付款

网页调起支付宝付款和微信付款

昨天在指导客户制作付款网页的时候写了部分说明文档，觉得其中有很多对第一次接触这方面的人能有所帮助，在此分享一下

调起付款的步骤

1.获取微信code（支付宝是auth_code，以下统称code)

不论是微信还是支付宝的code都是需要通过重定向获取的，其中需要拼接进微信公众号的appid（支付宝的需要自己去平台申请），然后 重定向跳转的网址 是你接受重定向信息的地方，网址的域名需要在管理后台的授权回调地址中配置，不然会跳转失败，具体的配置方法可以参考其他的文章，这里不做赘述。

微信重定向网址：“https://open.weixin.qq.com/connect/oauth2/authorize?appid={{APPID}}&redirect_uri={{你的重定向页面网址}}&response_type=code&scope=snsapi_base&state=123&connect_redirect=1#wechat_redirect”
支付宝重定向网址：“https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id={{APPID}}&scope=auth_base&redirect_uri={{你的重定向页面网址}}"

跳转到重定向页面之后，通过getQueryVariable(variable)方法获取code,具体操作如下：

        var code = getQueryVariable("code");
        //这是一个现成的方法，直接拿过去用就行
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

2.通过code获取openid（支付宝叫user_id,以下统称为openid)

这里说明一下，这里的opnid是不能在网页中直接获取的，你可以通过调用你的后端接口获取，不然得到的openid是没用的，我在下面贴上我最近做的一个案例获取openid的方式。

           $.ajax({
                type: "post",
                url: "GetOpenid.ashx",//我把调接口的地方写在这里，调用的是我们公司的后端接口
                contentType: "application/x-www-form-urlencoded;charset=utf-8;",
                data: { auth_code:code,appid:appid},
                dataType: "text",
                success: function (data) {
                    window.openid = data;
                },
                error: function (error) {
                    //alert("error=" + error);
                }
            });

3.获取商户信息

既然是付款，那肯定需要有一个付款的对象，微信和支付宝付款都有商户号这一说的，以下是我获取商户号的代码：（这里因人而异，有些人是不需要获取的，主要看你调起统一下单接口的时候需不需要商户号的相关信息

     $.ajax({
        type: "post",
        url: "GetToken.ashx",
            contentType: "application/x-www-form-urlencoded;charset=utf-8;",
		data: { store_no:store_no},
        dataType: "json",
            success: function (data) {
                $(".shop-name").append(data["store_name"]);
                window.sn = data["store_name"];
                window.merchant_key = data["merchant_key"];
                window.merchant_no = data["merchant_no"];			
        },
        error: function(error) {
            alert( error.responseText);
             }
        });

4.调取统一下单接口获取预支付信息

微信：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
支付宝：https://opendocs.alipay.com/apis/api_49/alipay.open.mini.experience.query/

5.最后一步，调起支付

获取到预支付信息之后再调起支付就很简单了，直接看代码：

      //支付宝
       AlipayJSBridge.call("tradePay", {
                          tradeNO: trade_no
                          },
                          function (data) {
                              if ("9000" == data.resultCode) {
							        alert("支付成功")
                              }
							  else {
                                    alert("支付失败")
                              }
                        });

       //微信
       WeixinJSBridge.invoke(
                          'getBrandWCPayRequest', data,
                           function (res) {
                             if (res.err_msg == "get_brand_wcpay_request:ok") {
                                    alert("支付成功")
                             }
                             else {
                                    alert("支付失败")
                             }
                           }
        );

6.支付成功

微信：

支付宝：

7.参考案例
联科在线(北京)科技有限公司 网页支付

总结

不管是微信还是支付宝，其文档总是说的不甚明了，所以我在第一次接触这一块的时候也走了很多弯路，但是程序员不就是在一次次走弯路中成长的吗？加油哦！！！