最近做完了一个项目,正好没事做,产品经理就给我安排了一个任务。
做一个像收钱吧这样可以统一扫码收钱的功能。
一开始并不知道是怎么实现的,咨询了好几个朋友,才知道大概的业务流程:先是开一个网页用来判断支付平台,是微信还是支付宝,判断过后就好办了,直接照搬微信支付和支付宝的官方文档。不过微信的文档感觉有点坑,得多花点心思。
现在讲讲怎么实现微信支付网页支付,也就是公众号支付:
1.判断支付平台,在判断是微信平台时,必须使用window.location打开网页,使用其他方法在IOS版微信无法打开网页,至少现在的新版微信无法打开。对应的连接是请求获取code的链接。第2步会讲到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
< html > < head > < title >判断客户平台</ title > < basefont face = "微软雅黑" size = "2" /> < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> < meta name = "exporter-version" content = "Evernote Windows/303244 (zh-CN, DDL); Windows/6.1.7601 Service Pack 1 (Win64);" /> < script type = "text/javascript" src = "jquery-3.1.1.min.js" ></ script > < style > body, td { font-family: 微软雅黑; font-size: 10pt; } </ style > </ head > < body > < script type = "text/javascript" > window.onload = function(){ if(isWeiXin()){ window.location='http://www.xxoo.com/InterfaceAPI/code'; } else if(isZFB()){ alert('支付宝即将开放....'); //var p = document.getElementsByTagName('p'); //p[0].innerHTML = window.navigator.userAgent; }else{ alert('请使用微信或者支付宝App扫码'); } } function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } } function isZFB(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/AlipayClient/i) =='alipayclient'){ return true; }else{ return false; } } </ script > </ body ></ html > |
2.这里是获取code,回调地址必须使用URLEncoder的utf-8编码,这里最终只获取openid,需要获取UserInfo其他信息的自行测试,只需要修改一下 scope 的参数,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@RequestMapping ({ "code" }) public void getCode(HttpServletRequest request, HttpServletResponse response) { try { //回调地址 String redirect_uri = URLEncoder.encode( "http://www.xxoo.com/InterfaceAPI/openid?codeID=7837283" , "utf-8" ); String url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WechatConfig.APP_ID + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect" ; response.sendRedirect(url); } catch (Exception e) { e.printStackTrace(); } } |
3.里面有一个codeid的参数,不要在意这个,是用来测试用的。这里只需要openid,下面是使用get方法获取json返回结果,获取到openid后,重定向到支付页面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
@RequestMapping ({ "openid" }) public void getOpenid(String codeID, String code, HttpServletResponse response) { try { String requestUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=" + WechatConfig.APP_ID + "&secret=" + WechatConfig.APP_SECRET + "&code=" + code + "&grant_type=authorization_code" ; if (code != null ) { String json = WebUtils.get(requestUrl, null ); WechatResult result = new Gson().fromJson(json, WechatResult. class ); OPEN_ID = result.getOpenid(); System.out.println( "====OPEN_ID====" + OPEN_ID); response.sendRedirect( "http://www.xxoo.com/InterfaceAPI/pay.html" ); } } catch (Exception e) { e.printStackTrace(); } } |
4.在前端支付页面输入要支付的金额,提交到后台
1
2
3
4
5
6
7
8
9
10
11
12
|
$.ajax({ type: "POST" , dataType: "html" , url: "http://www.xxoo.com/InterfaceAPI/weixinPay" , data: "value=" +self.input.value, timeout:10000, cache: true , async: true , error: function (data){ //alert(data+"---value-->"+self.input.value); }, },}); |
5.后端获取金额然后在后端统一下单,公众号支付有两个地方不一样,一是支付类型要改为 JSAPI,二是需要获取openid
1
2
3
4
5
6
7
8
9
|
@RequestMapping ({ "weixinPay" }) public void weixinPay(HttpServletRequest request, HttpServletResponse response) { String value = request.getParameter( "value" ); WechatTradeTest wechat = new WechatTradeTest(); String json = wechat.testunifiedOrder(Integer.valueOf(value), OPEN_ID); //这里返回json到前端 write(json, response); } |
6.统一下单成功后返回的结果例子:
1
2
3
4
5
6
7
8
9
10
11
12
|
< 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 > < openid > <![CDATA[oUpF8uMuAJO_M2pxb1Q9zNjWeS6o]]> </ openid > < sign > <![CDATA[7921E432F65EB8ED0CE9755F0E86D72F]]> </ sign > < result_code > <![CDATA[SUCCESS]]> </ result_code > < prepay_id > <![CDATA[wx201411101639507cbf6ffd8b0779950874]]> </ prepay_id > < trade_type > <![CDATA[JSAPI]]> </ trade_type > </ xml > |
7.返回的参数需要重新签名并返回到前端,签名方法与统一下单时的签名是一样的!签名时必须要带上微信商户返回是以Json格式返回到前端。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
public String testunifiedOrder( int fee,String openid) { WechatUnifiedOrder request = new WechatUnifiedOrder(); request.setBody( "测试商品" ); request.setDetail( "一个好商品" ); request.setGoods_tag( "测试" ); request.setOut_trade_no(System.currentTimeMillis() + "" ); request.setFee_type( "CNY" ); request.setTotal_fee( 1 ); request.setSpbill_create_ip( "192.168.88.26" ); request.setTime_start(System.currentTimeMillis() + "" ); request.setOpenid(openid); //下单成功后返回 WechatUnifiedOrder.Response response = WechatConfig.getInstance() .unifiedOrder(request); response.setTime_start(request.getTime_start()); WeichatData data = new WeichatData(); data.setAppId(response.getAppid()); data.setTimeStamp(request.getTime_start()); data.setNonceStr(response.getNonce_str()); data.setPrepay_id(response.getPrepay_id()); data.setSignType( "MD5" ); TreeMap<String, String> requestMap = new TreeMap<String, String>(); requestMap.put( "appId" , response.getAppid()); requestMap.put( "timeStamp" , response.getTime_start()); requestMap.put( "nonceStr" , response.getNonce_str()); requestMap.put( "package" , "prepay_id=" +response.getPrepay_id()); requestMap.put( "signType" , "MD5" ); data.setPaySign(sign(requestMap).toUpperCase()); return new Gson().toJson(data); } |
8.前端需要解析json,获取对应的值,唤醒微信支付
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
success: function (data){ if (data!= null ){ var obj=eval( "(" +data+ ")" ); appId = obj[ "appId" ]; //timeStamp = new Date().getTime(); timeStamp = obj[ "timeStamp" ]; nonceStr = obj[ "nonceStr" ]; package = obj[ "prepay_id" ]; paySign = obj[ "paySign" ]; 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(); } } else { alert( "支付失败" ); } }, |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//微信回调 function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest' , { "appId" :appId, "timeStamp" :timeStamp, "nonceStr" :nonceStr, "package" : "prepay_id=" +package, "signType" : "MD5" , "paySign" : paySign }, function (res){ if (res.err_msg == "get_brand_wcpay_request:ok" ) { } else { } } ); |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:http://www.cnblogs.com/tefcricul/p/6344333.html