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

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

调起付款的步骤

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.参考案例
联科在线(北京)科技有限公司网页支付

总结

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