摘要：做過微信掃碼支付的同學都知道，微信掃碼支付完成後，要跳轉到指定的頁面就比較麻煩了，這裏我提供一種比較可行的方案，也許還有其他更多的方案，但是我這裏分享下我們當時是怎麼處理微信掃碼支付完成後，跳轉到指定頁面的呢。
一：微信掃碼支付流程：
可以看前面寫過的文章，具體地址：Java之微信支付(掃碼支付模式二)案例實戰
二：微信掃碼支付完成後頁面跳轉流程：
2.1.支付訂單頁面：
2.2.返回微信支付二維碼頁面：
2.3.掃碼支付步驟一：
2.4.掃碼支付步驟二：
2.5.掃碼支付步驟三：
2.6.支付完成，跳轉購買成功頁面：
三：支付完成，跳轉支付成功頁面：
這裏最關鍵的是就是調用微信的掃碼支付接口後，接收到微信返回的二維碼連接後，要同時輸出一個頁面，並且頁面裏面要寫成一個模板，裏面需要定時調用查詢訂單支付狀態的接口，目前是每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();
}
最關鍵是就是最後一個方法，這裏就是輸出一個頁面，裏面有個定時器定時調用訂單支付狀態接口，如果返回支付成功，那麼就跳轉的購買成功頁面，以上就是關於微信掃碼支付完成後，跳轉購買成功頁面的解決方案，歡迎大家一起討論，如果大家有更好的方案，歡迎留言，謝謝！