关于使用微信公众号后端springboot项目对接微信支付v3 jsapi [前端demo代码支付篇]

前期

请参考上一篇 关于使用微信公众号后端springboot项目对接微信支付v3 jsapi [后端代码支付篇]

环境

最近在学习微信支付这方面的知识，经过重重试错，终于成功，现在分享出来让大家借鉴
ps：我开发的是微信公众号调用jsapi微信支付v3的业务逻辑
JSAPI支付产品介绍
这篇文章 使用的是原生html进行支付请求 【使用vue项目可以参照接口方式来进行相应修改】

html 代码

   <h2>缴费测试</h2>
    <input type="text" class="inpu" id="openId" > 
    <button onclick="buy()" >立即缴费</button>

css 代码

input{
    display: block;
            margin: 10px auto;
            max-width: 100%;
            height: auto;
            width: 250px;
            height: 35px;
            line-height: 35px;
}
        button {
            display: block;
            margin: 0 auto;
            font-size: 1.2em;
            background-color: #f0c14b;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
        }

        button:hover {
            background-color: #ff9900;
        }

javascript

 function buy() {
            let xmlhttp = new XMLHttpRequest();
            var openId= document.querySelector("#openId")
            console.log(openId.value);
            xmlhttp.open('post', "http://ip:8080/test/wxpay/navtivepay") //请修改服务器的项目地址
            let params = {
            	openId: openId.value //这里设置post请求的参数，假设这里是付款金额
            }
            // 设置请求头
            xmlhttp.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
            var token = document.querySelector("#token")  
            xmlhttp.setRequestHeader('Authorization',token.value)  // 如果有token认证的业务逻辑，可以放置在这里
          
            xmlhttp.send(JSON.stringify(params)); // 发送数据
            let num = 0
            xmlhttp.onreadystatechange = () => {
                console.log(xmlhttp.status);
                if (xmlhttp.status == 200 || xmlhttp.status == 304) {
                    num++;
                   if(num == 3){
                    console.log(xmlhttp.responseText);//控制台输出 请求的内容
                    let obq = JSON.parse(xmlhttp.responseText);
                    console.log(obq.data);
                     WeixinJSBridge.invoke( 
                "getBrandWCPayRequest",
                obq.data,
                function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                   
			         console.log("支付成功");
			  		// Toast.success("支付成功");
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                  } else {
                    console.log("支付失败");
                  }
                }
                );
     
                } else {
                    console.log('请求失败');
                    console.log(xmlhttp.responseText);
                }
            }

后端代码

请参考上一篇 关于使用微信公众号后端springboot项目对接微信支付v3 jsapi [后端代码支付篇]

结语 ：

现在整个前后端的代码已经完成了,但是现在调用支付还是会失败的
因为微信支付文档里配置支付目录
写的是

1)商户最后请求拉起微信支付收银台的页面地址我们称之为“支付授权目录”，例如：>https://www.weixin.com/pay.php的支付授权目录为：https://www.weixin.com/。
2)商户实际的支付授权目录必须和在微信支付商户平台设置的一致，否则会报错“当前页面的URL未注册：

可以根据官方文档配置，下一篇我考虑将前端文件部署到服务器并调用微信支付接口的操作流程写一下，还有这个配置支付目录，有时间我也会写文章说说我的配置流程