最近做完了一个项目,正好没事做,产品经理就给我安排了一个任务。
做一个像收钱吧这样可以统一扫码收钱的功能。
一开始并不知道是怎么实现的,咨询了好几个朋友,才知道大概的业务流程:先是开一个网页用来判断支付平台,是微信还是支付宝,判断过后就好办了,直接照搬微信支付和支付宝的官方文档。不过微信的文档感觉有点坑,得多花点心思。
现在讲讲怎么实现微信支付网页支付,也就是公众号支付:
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