Java-通过thymeleaf模板引擎调用微信JSPAI支付和支付宝小程序支付

最新推荐文章于 2024-03-27 18:53:06 发布

子非衣

最新推荐文章于 2024-03-27 18:53:06 发布

阅读量571

点赞数

分类专栏： Java开发文章标签： html java

本文链接：https://blog.csdn.net/cl617287/article/details/119427126

版权

Java开发专栏收录该内容

43 篇文章 3 订阅

订阅专栏

最近在做一个三码合一支付的需求（目前只对接了支付宝和微信，云闪付还未对接），需要在网页端调用微信和支付宝jspai支付的需求，因为功能比较简单，所以决定前后端放在一起，一直以来都是做后端写接口，所以前端不是很熟练，后台对接微信和支付宝支付的网上很多就不放代码了，这里只展示页面怎么拉起支付组件。
微信前端拉起支付代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>微信支付</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
</head>

<style>
    .main {
        font-size: 16px;
        margin-top: 35%;
    }

    .condition {
        padding-top: 20px;
        padding-bottom: 20px;
        width: 86%;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }

    .condition div {
        padding: 10px 0;
        text-align: center;
    }

    .fee {
        font-size: 25px;
        color: red;
    }

    .btnbox {
        margin-top: 30px;
        text-align: center;
    }

    .confirmBtn {
        display: inline-block;
        width: 86%;
        padding: 10px 0;
        margin: 0 auto;
        color: #fff;
        background: #36a7e7;
        border-radius: 6px;
        text-align: center;
        letter-spacing: 4px;
    }
</style>

<body>

<div class="main">
    <div class="condition">
        <div>[[${mchName}]]</div>
        <div id="fee" class="fee">￥ [[${totalFee}]]</div>
    </div>
    <div class="btnbox" onclick="tradePay()">
        <span class="confirmBtn">立即支付</span>
    </div>
</div>

</body>

<script type="text/javascript">

    function tradePay() {
        appId = '[[${appId}]]';
        console.log(appId)
        timeStamp = '[[${timeStamp}]]';
        nonceStr = '[[${nonceStr}]]';
        package = '[[${package}]]';
        signType = '[[${signType}]]';
        paySign = '[[${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();
        }

        function onBridgeReady() {
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                    "appId": appId,     //公众号名称,由商户传入
                    "timeStamp": timeStamp,         //时间戳,自1970年以来的秒数
                    "nonceStr": nonceStr, //随机串
                    "package": package,
                    "signType": signType,         //微信签名方式：
                    "paySign": paySign //微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        console.log('支付成功');
                        //支付成功后跳转的页面
                    } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                        console.log('支付取消');
                    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                        console.log('支付失败');
                        WeixinJSBridge.call('closeWindow');
                    } //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
                });
        }
    }

</script>

</html>

注意下面这块的参数都是后端请求微信支付接口返回的
在这里插入图片描述
后端传参代码如下：

	@RequestMapping(value = "unificationPay", method = RequestMethod.GET)
	public String unificationPay(Model model) throws Exception{
		JSONObject strJson = new JSONObject();
		strJson.put("orderPayNo", "202108041534297203826323902");
		String paystr = payService.unificationPay(strJson.toJSONString());

		JSONObject payJson = JSONObject.parseObject(paystr);

		model.addAttribute("mchName", "深圳市XX科技有限公司");
		model.addAttribute("totalFee", "1000");
		model.addAttribute("appId", payJson.getString("appId"));
		model.addAttribute("timeStamp", payJson.getString("timeStamp"));
		model.addAttribute("nonceStr", payJson.getString("nonceStr"));
		model.addAttribute("package", payJson.getString("package"));
		model.addAttribute("signType", payJson.getString("signType"));
		model.addAttribute("paySign", payJson.getString("paySign"));

		return "wxpay";
	}

页面效果如下：
在这里插入图片描述
点击支付按钮就会拉起微信支付，需要注意的是WeixinJSBridge只有在微信的浏览器里面才能用，所以需要用微信打开才行，支付宝的也是一样需要在支付宝里面打开才能拉起支付组件。
支付宝拉起支付组件前端代码如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>支付宝支付</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
</head>

<style>
    .main{
        font-size: 16px;
        margin-top: 35%;
    }
    .condition{
        padding-top: 20px;
        padding-bottom: 20px;
        width: 86%;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    .condition div{
        padding: 10px 0;
        text-align: center;
    }
    .fee{
        font-size: 25px;
        color: red;
    }
    .btnbox{
        margin-top: 30px;
        text-align: center;
    }
    .confirmBtn{
        display: inline-block;
        width: 86%;
        padding:10px 0;
        margin: 0 auto;
        color:#fff;
        background: #36a7e7;
        border-radius: 6px;
        text-align: center;
        letter-spacing: 4px;
    }
</style>

<body>

<div class="main">
    <div class="condition">
        <div>[[${mchName}]]</div>
        <div id="fee" class="fee">￥ [[${totalFee}]]</div>
    </div>
    <div class="btnbox" onclick="tradePay()">
        <span class="confirmBtn" >立即支付</span>
    </div>
</div>

</body>

<script type="text/javascript">

    // 由于js的载入是异步的，所以可以通过该方法，当AlipayJSBridgeReady事件发生后，再执行callback方法
    function ready(callback) {
        if (window.AlipayJSBridge) {
            callback && callback();
        } else {
            document.addEventListener('AlipayJSBridgeReady', callback, false);
        }
    }

    function tradePay() {
        var tradeNO = '[[${tradeNo}]]';
        ready(function(){
            // 通过传入交易号唤起快捷调用方式(注意tradeNO大小写严格)
            AlipayJSBridge.call("tradePay", {
                tradeNO: tradeNO
            }, function (data) {
                log(JSON.stringify(data));
                if ("9000" == data.resultCode) {
                    log("支付成功");
                }
            });
        });
    }

</script>

</html>

后端传参和微信方式一样，都是通过model.addAttribute(“tradeNo”, “2021080522001413441455203431”);的方式传递的，不过支付宝的参数比较少，只需要一个tradeNo就可以拉起支付了，点击立即支付按钮就会拉起支付，效果如下：
在这里插入图片描述
对了，页面需要引入jquery的js<script th:src="@{/js/jquery-1.9.1.min.js}"></script>