摘要:做过微信扫码支付的同学都知道,微信扫码支付完成后,要跳转到指定的页面就比较麻烦了,这里我提供一种比较可行的方案,也许还有其他更多的方案,但是我这里分享下我们当时是怎么处理微信扫码支付完成后,跳转到指定页面的呢。

一:微信扫码支付流程:

       可以看前面写过的文章,具体地址:​​Java之微信支付(扫码支付模式二)案例实战​​ 

二:微信扫码支付完成后页面跳转流程:

2.1.支付订单页面:

Java之微信支付(扫码支付模式二)案例实战-之支付完成后页面跳转方案_微信

2.2.返回微信支付二维码页面:

2.3.扫码支付步骤一:

Java之微信支付(扫码支付模式二)案例实战-之支付完成后页面跳转方案_微信扫码支付_02

2.4.扫码支付步骤二:

Java之微信支付(扫码支付模式二)案例实战-之支付完成后页面跳转方案_微信_03

2.5.扫码支付步骤三:

Java之微信支付(扫码支付模式二)案例实战-之支付完成后页面跳转方案_微信扫码支付_04

2.6.支付完成,跳转购买成功页面:

Java之微信支付(扫码支付模式二)案例实战-之支付完成后页面跳转方案_微信扫码支付_05

三:支付完成,跳转支付成功页面:

这里最关键的是就是调用微信的扫码支付接口后,接收到微信返回的二维码连接后,要同时输出一个页面,并且页面里面要写成一个模板,里面需要定时调用查询订单支付状态的接口,目前是每5s调用一次订单支付状态接口,发现支付状态返回成功,那么就跳转到页面里面配置的URL,也可以是动态URL,具体关键代码就是支付完成后,返回页面的代码,如下:

3.1.支付接口控制类:

@PostMapping("/create")
public String h5Pay(HttpServletRequest request,HttpServletResponse response,ModelMap maps){

String payType = request.getParameter("payType");
String productCode = request.getParameter("productCode");
Map<String, Object> map =new HashMap<String, Object>();
//参数校验
R checkParams = PayServiceHelper.checkParams(request);
if((Integer)checkParams.get("code")==500) {
maps.addAttribute("error",checkParams.get("msg"));
return "error";
}
//订单签名校验
boolean checkOrder = paymentInfoService.checkOrder(request);
if(!checkOrder) {
maps.addAttribute("error","验证签名失败");
return "error";
}

//request 参数封装Map
map = PayServiceHelper.getPayMap(request);
//订单校验是否存在,是否已支付
PaymentInfoEntity queryOrder = paymentInfoService.queryStatus((String)map.get("orderId"));
if(queryOrder!=null) {
maps.addAttribute("error","订单已支付");
return "error";
}
//增加交易记录
String order = paymentInfoService.insert(map);
map.put("order", order);
//发起支付
PayService payService = payServiceFactory.getPayService(payType, productCode);
// 微信扫码支付,需要传客户端IP地址
if (Constant.PayType.WXCODEPAY.getName().equals(payType) && Constant.ProductCode.PC.getName().equals(productCode)) {
String ipAddr = IPUtils.getIpAddr(request);
map.put("ipAddr", ipAddr);

String orderId = request.getParameter("orderId");
map.put("externalId", orderId);
map.put("url", url);
}
payService.h5Pay(map,request, response);

return "success";
}

3.2.支付接口实现类:

@Override
public void h5Pay(Map<String, Object> map, HttpServletResponse response) throws Exception {
BigDecimal bigDecimal = new BigDecimal(100);
String externalId = String.valueOf(map.get("externalId"));
String url = String.valueOf(map.get("url"));
String returnUrl = String.valueOf(map.get("returnUrl"));
String order = (String)map.get("order");
String ipAddr = (String) map.get("ipAddr");
PaymentInfoEntity paymentInfoEntity = paymentInfoService.queryOrder(map);
if(null == paymentInfoEntity) {
return;
}
// 订单实际支付金额
BigDecimal amount = paymentInfoEntity.getAmount();
WxPayUnifiedOrderRequest request = WxPayUnifiedOrderRequest.newBuilder()
.body("药品订单")
.totalFee(amount.multiply(bigDecimal).setScale(0,BigDecimal.ROUND_DOWN).intValue())
.outTradeNo(order)
.spbillCreateIp(ipAddr)
.notifyUrl(wechatAccountConfig.getNotifyUrl())
.tradeType(WxPayConstants.TradeType.NATIVE)
.productId("ydw")
.build();
//1. 统一下单
WxPayNativeOrderResult result = null;
try {
result = wxPayService.createOrder(request);
String codeUrl = result.getCodeUrl();
//增加网关支付请求记录
payGatewayService.insert(order, url);
//生成二维码的图片格式
int width = 300;
int height = 300;
Hashtable hints = new Hashtable();
// 内容所使用编码
hints.put(EncodeHintType.CHARACTER_SET, "utf-8");
BitMatrix bitMatrix = new MultiFormatWriter().encode(codeUrl, BarcodeFormat.QR_CODE, width, height, hints);
BufferedImage bufferedImage = QRUtil.toBufferedImage(bitMatrix);
byte[] data = imageToBytes(bufferedImage, "png");
BASE64Encoder encoder = new BASE64Encoder();
//转换成base64串
String png_base64 = encoder.encodeBuffer(data).trim();
//删除 \r\n
png_base64 = png_base64.replaceAll("\n", "").replaceAll("\r", "");
// 输出二维码的Base64编码到页面
response.setContentType("text/html;charset=" + "UTF-8");
response.getWriter().write(PayServiceHelper.builderWxCodeForm(url, externalId, "data:image/png;base64, " + png_base64));
response.getWriter().flush();
response.getWriter().close();
} catch (WxPayException e) {
e.printStackTrace();
} catch (WriterException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}

3.3.支付接口输出页面的工具类:

public static String builderWxCodeForm(String url, String orderId, String imgUrl) {
StringBuffer sBuffer= new StringBuffer();
sBuffer.append("<!DOCTYPE html>\n" +
"<html>\n" +
" <head> \n" +
" <meta charset=\"utf-8\">\n" +
" <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
" <meta name=\"viewport\" content=\"width=750,user-scalable=no\">\n" +
" <link rel=\"icon\" href=\"static/ydw.ico\">\n" +
" <title>药兜网</title>\n" +
" <script>\n" +
" var lock=window.setInterval(function(){\n" +
" var ajax = new XMLHttpRequest();\n" +
" ajax.open('get','query?orderId='+"+orderId+");\n" +
" ajax.send();\n" +
" ajax.onreadystatechange = function () {\n" +
" console.log(ajax.status);\n" +
" if (ajax.status==200) {\n" +
"     var resText = ajax.responseText;\n" +
"     var data = eval('(' + resText + ')');\n" +
" if (data['status']==1) {\n" +
" window.location.href = \""+url+"/purchaseSuccess?orderId="+orderId+"\"\n" +
" window.clearInterval(lock);\n" +
"    }\n" +
"   }\n" +
" }\n" +
" },2000)\n" +
" \n" +
" </script>\n" +
" <style>\n" +
" #app {\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" position: fixed;\n" +
" top: 0;\n" +
" left: 0;\n" +
" display: flex;\n" +
" flex-direction: row;\n" +
" justify-content: center;\n" +
" align-items: center;\n" +
" }\n" +
" #app .img {\n" +
" vertical-align: middle;\n" +
" }\n" +
"\n" +
" </style>\n" +
"\n" +
" </head>\n" +
" <body style=\"width:750px;margin:0 auto;background: black;\">\n" +
" <div id=\"app\" >\n" +
" <img src=\""+imgUrl+"\"/>\n" +
" </div>\n" +
" </body>\n" +
"</html>");
return sBuffer.toString();
}

最关键是就是最后一个方法,这里就是输出一个页面,里面有个定时器定时调用订单支付状态接口,如果返回支付成功,那么就跳转的购买成功页面,以上就是关于微信扫码支付完成后,跳转购买成功页面的解决方案,欢迎大家一起讨论,如果大家有更好的方案,欢迎留言,谢谢!

如有问题可以加群讨论解决:QQ群好:278298761