最近做完了一个项目，正好没事做，产品经理就给我安排了一个任务。

做一个像收钱吧这样可以统一扫码收钱的功能。

一开始并不知道是怎么实现的，咨询了好几个朋友，才知道大概的业务流程：先是开一个网页用来判断支付平台，是微信还是支付宝，判断过后就好办了，直接照搬微信支付和支付宝的官方文档。不过微信的文档感觉有点坑，得多花点心思。

现在讲讲怎么实现微信支付网页支付，也就是公众号支付：

1.判断支付平台，在判断是微信平台时，必须使用window.location打开网页，使用其他方法在IOS版微信无法打开网页，至少现在的新版微信无法打开。对应的连接是请求获取code的链接。第2步会讲到。

判断客户平台

body,td {

font-family: 微软雅黑;

font-size: 10pt;

}

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;

}

}

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.统一下单成功后返回的结果例子：

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 requestMap = new TreeMap();

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 {

}

}

);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

相关文章

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250