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

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

48304ba5e6f9fe08f3fa1abda7d326ab.png

判断客户平台

}

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扫码');

}

}

functionisWeiXin(){

varua =window.navigator.userAgent.toLowerCase();

if(ua.match(/MicroMessenger/i) == 'micromessenger'){

return true;

}else{

return false;

}

}

functionisZFB(){

varua =window.navigator.userAgent.toLowerCase();

if(ua.match(/AlipayClient/i) =='alipayclient'){

return true;

}else{

return false;

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

2.这里是获取code,回调地址必须使用URLEncoder的utf-8编码,这里最终只获取openid,需要获取UserInfo其他信息的自行测试,只需要修改一下 scope 的参数,

48304ba5e6f9fe08f3fa1abda7d326ab.png

@RequestMapping({ "code"})

public voidgetCode(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();

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

3.里面有一个codeid的参数,不要在意这个,是用来测试用的。这里只需要openid,下面是使用get方法获取json返回结果,获取到openid后,重定向到支付页面。

48304ba5e6f9fe08f3fa1abda7d326ab.png

@RequestMapping({ "openid"})

public voidgetOpenid(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 = newGson().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();

}

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

4.在前端支付页面输入要支付的金额,提交到后台

48304ba5e6f9fe08f3fa1abda7d326ab.png

$.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);

}, },});

48304ba5e6f9fe08f3fa1abda7d326ab.png

5.后端获取金额然后在后端统一下单,公众号支付有两个地方不一样,一是支付类型要改为 JSAPI,二是需要获取openid

48304ba5e6f9fe08f3fa1abda7d326ab.png

@RequestMapping({ "weixinPay"})

public voidweixinPay(HttpServletRequest request,

HttpServletResponse response) {

String value = request.getParameter("value");

WechatTradeTest wechat = newWechatTradeTest();

String json =wechat.testunifiedOrder(Integer.valueOf(value), OPEN_ID);

//这里返回json到前端

write(json, response);

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

6.统一下单成功后返回的结果例子:

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

7.返回的参数需要重新签名并返回到前端,签名方法与统一下单时的签名是一样的!签名时必须要带上微信商户返回是以Json格式返回到前端。

48304ba5e6f9fe08f3fa1abda7d326ab.png

public String testunifiedOrder(intfee,String openid) {

WechatUnifiedOrder request = newWechatUnifiedOrder();

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 = newWeichatData();

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 newGson().toJson(data);

}

48304ba5e6f9fe08f3fa1abda7d326ab.png

8.前端需要解析json,获取对应的值,唤醒微信支付

48304ba5e6f9fe08f3fa1abda7d326ab.png

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("支付失败");

}

},

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

//微信回调

functiononBridgeReady(){

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{

}

}

);

48304ba5e6f9fe08f3fa1abda7d326ab.png

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐