现在讲讲怎么实现微信支付网页支付,也就是公众号支付:
1.判断支付平台,在判断是微信平台时,必须使用window.location打开网页,使用其他方法在IOS版微信无法打开网页,至少现在的新版微信无法打开。对应的连接是请求获取code的链接。第2步会讲到。
<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 的参数,
@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后,重定向到支付页面。
@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.在前端支付页面输入要支付的金额,提交到后台
$.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
@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.统一下单成功后返回的结果例子:
<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格式返回到前端。
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,获取对应的值,唤醒微信支付
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("支付失败");
}
},
//微信回调
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 {
}
}
);