之前在做微信支付的时候,按照微信官方给的统一下单接口文档进行开发时,因为用到统一下单接口的支付方式有很多种,里面的参数有时是必填的有时是非必填的,以及参数形式等各个方面带的模糊带来了很多问题。所以在成功完成支付后写篇文章给刚接触这块的朋友们说明一下问题。
我所使用的统一下单的场景是:在微信中打开有关商品的页面(可以是一个网站链接,可以是公众号里按钮的跳转,总之,是在微信中打开一个网站),点击下单按钮后能够弹出支付框,输入密码后完成支付。(具体场景大家根据需求自己改,这里我只实现在微信中打开链接,点击按钮,调起支付,完成支付一个完整的流程)这里强调一下,如果是想在除微信之外的其他浏览器调用微信支付,使用的是微信的 H5支付 这个产品,并不是统一下单,统一下单功能只针对在微信内打开浏览器实现支付的需求。
准备(重点):一个开通了微信认证的公众号(300块一年那个认证,如果你没交那300块是没法用的),并开通了对应的微信商户平台,然后拿到对应资料 公众号相关资料:appid、apisecret 商户号相关资料 :mch_id、key 商户平台一定要完成支付申请
以上的场景所使用的统一下单接口的支付方式,是需要获取付款用户openid的,不了解的可以去看我另一篇获取微信openid的文章http://blog.csdn.net/z880698223/article/details/78485243
准备好以上信息后我们就可以开始了
首先简单写一个带下单按钮的jsp页面,下单按钮调用js的sub方法。(这个页面各位可以按自己需求显示数据了,比如商品图片啦价格啦之类的然后在sub中的ajax请求参数中附带上就可以,这里只拿价格来做个演示)建议最好在这个页面之前就先获取openid,存到session或者cookie中以便后面使用,因为这里主要介绍支付,我就把我们拿到的openid直接写死在代码里了,大家可以根据需要自己灵活修改
<input type="button" οnclick="sub()" value="下单">
之后是js,这里记得引入jquery的js包
var out_trade_no="";
function sub(){
$.post("WxPayServlet",{price:1},function(data){
var json=eval("("+data+")");
out_trade_no=json.out_trade_no;
var appid=json.appId;
var prepayid=json.package;
var timeStamp=json.timeStamp;
var sign=json.sign;
var nonceStr=json.nonceStr;
//从这里开始就是微信提供的jsapi了,
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();
}
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId" : appid, //公众号appid
"timeStamp":timeStamp, //时间戳,自1970年以来的秒数
"nonceStr" : nonceStr, //随机字符串
"package" : prepayid,
"signType" : "MD5", //微信签名方式:
"paySign" : sign //微信签名
},
function(res){
//支付结果回调,当res.err_msg的值为get_brand_wcpay_request:ok 时即为支付成功
if(res.err_msg == "get_brand_wcpay_request:ok" ) {
$("#refund").show();
alert("支付成功");
}else{
}
}
);