网页调起支付宝付款和微信付款
昨天在指导客户制作付款网页的时候写了部分说明文档,觉得其中有很多对第一次接触这方面的人能有所帮助,在此分享一下
调起付款的步骤
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.参考案例
总结
不管是微信还是支付宝,其文档总是说的不甚明了,所以我在第一次接触这一块的时候也走了很多弯路,但是程序员不就是在一次次走弯路中成长的吗?加油哦!!!