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

置顶迷彩的博客

已于 2022-07-14 14:09:44 修改

阅读量1.1w

点赞数 7

分类专栏：支付技术文章标签：扫码支付微信扫码支付微信扫码支付页面跳转微信支付完成跳转页面

于 2019-07-08 19:28:41 首次发布

本文为博主原创文章，转载请加上原文链接，谢谢！

本文链接：https://blog.csdn.net/sxdtzhaoxinguo/article/details/95085478

版权

支付技术专栏收录该内容

4 篇文章 2 订阅

订阅专栏

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

一：微信扫码支付流程：

可以看前面写过的文章，具体地址：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();
	}

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

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