扫码支付

       出于安全考虑,代码并不完整,仅提供部分代码以及思路做参考!

js代码:

<script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.qrcode.js" ></script>
        <script type="text/javascript" src="js/qrcode.js" ></script> 
        <script type="text/javascript" src="js/utf.js" ></script>
        <script type="text/javascript" src="js/js.js"></script>
        <script type="text/javascript" src="js/chongzhi.js" ></script>
        <script type="text/javascript">

         function payfor(){
            var username= $("#username").val();
            var num =$('.rechnum').text();
            num = num.substr(0,num.length-4)
            var payType1 = document.getElementById('weixin').alt ; 
            var payType2 = document.getElementById('zhifubao').alt;
            var payType=0;
            if(payType1 == 1){
                payType = 1;
            }else if(payType2 == 1){
                payType = 2;
            }
            if(num != ""){
                body = num;
            }
            if(username.length != 11){
                alert("请输入正确的手机号!");
                return false;
            }
            if(body == 0 || body == undefined){
                alert("请选择充值金额!");
                return false;
            }
            if(payType == 0 || payType == undefined){
                alert("请选择支付类型!");
                return false;
            }
                if(payType == 1){
                    weixinp(username,body,payType);  //微信支付
                }else if(payType == 2){
                    zhifubaop(username,body,payType);//支付宝支付
                }
       } 

       function weixinp(username,body,payType){
               $.ajax({             
                     url:" ",
                    type:"post",
                    data:{username:username,body:body,payType:payType},
                    dataType:"json",
                    success:function(data){    
                        if(data != null){
                            if(data.code != 10001){
                                jQuery('#qrcodeCanvas').qrcode({ //通过id=“qrcodeCanvas”的div来展示二维码
                                     render    : "canvas",
                                     text    : data.message,
                                     width : "180",               //二维码的宽度
                                     height : "180",              //二维码的高度
                                     background : "#ffffff",       //二维码的后景色
                                     foreground : "#000000",        //二维码的前景色
                                     src: "/image/peimide.png"             //二维码中间的图片
                                     }); 
                                     document.getElementById('allpid').style.background = 'url(/image/蒙.png)';//替换背景图片
                                     document.getElementById('pidd').style.display = '';//显示隐藏的二维码背景图片
                                     $("#codesa").val(data.code);  //将返回码放入隐藏输入框,用户判断用户是否扫码 
                            }else{
                                alert(data.message);
                            }
                                 
                        }                                                    
                                                                         
                    }
                     
                 });
       
       
       
       }
       function zhifubaop(username,body,payType){
                   $.ajax({             
                     url:" ",
                    type:"post",
                    data:{username:username,body:body,payType:payType},
                    dataType:"json",
                    success:function(data){    
                        if(data != null){
                            if(data.code != 10001){
                                jQuery('#qrcodeCanvas').qrcode({
                                     render    : "canvas",
                                     text    : data.message,
                                     width : "180",               //二维码的宽度
                                     height : "180",              //二维码的高度
                                     background : "#ffffff",       //二维码的后景色
                                     foreground : "#000000",        //二维码的前景色
                                     src: "/image/peimide.png"             //二维码中间的图片
                                     }); 
                                     document.getElementById('allpid').style.background = 'url(/image/蒙.png)';//替换背景图片
                                     document.getElementById('pidd').style.display = '';//显示隐藏的二维码背景图片
                                     $("#codesa").val(data.code);//将返回码放入隐藏输入框,用户判断用户是否扫码 
                            }else{
                                alert(data.message);
                            }
                                
                        }                                                    
                                                                         
                    }
                     
                 });
       
       }

        var timer = window.setInterval("orderStatus()",5000);
        function orderStatus(){
                var code = $("#codesa").val();//获取隐藏输入框的值
                if(code != "" && code != undefined){//判断用户是否扫码充值
                    $.ajax({             
                     url:"/web/queryorderStatus",
                    type:"post",
                    data:{code:code},
                    dataType:"json",
                    success:function(data){    //查看付费状态(付费后,后台回调改变付费状态)
                        if(data == 10000 ){
                            alert("陪币充值成功!");
                            window.clearInterval(timer);
//                            document.location = "web/chongzhidel";
                            document.location = '/web/chongzhi';//返回页面
                        }                                                    
                                                                         
                    }
                     
                 });
                }
                   
        }

            $(document).ready(function(){
    //加的效果
                $(".add").click(function(){
                    var n=$(this).prev().val();
                    var num=parseInt(n)+1;
                    if(num==0){ return;}
                    var hidbody = parseInt($("#hidbody").val());
                    if(hidbody == 0 || hidbody == undefined){
                        if(num<100000){
                             $(this).prev().val(num);
                             $('.rechnum').text(num+'.00元');
                        }else{
                            $(this).prev().val(100000);
                        }
                    }else{
                        num = hidbody + num;
                        if(num<100000){
                             $(this).prev().val(num);
                             $('.rechnum').text(num+'.00元');
                        }else{
                            $(this).prev().val(100000);
                        }
                        $("#hidbody").val(0);
                    }
                   
                   
                });
    //减的效果
                $(".jian").click(function(){
                    var n=$(this).next().val();
                    n =parseInt(n);
                    var hidbody = parseInt($("#hidbody").val());
                    if(hidbody == 0 || hidbody == undefined){
                        if(n >0){
                        var num=n-1;
                        if(num < 0){ return}
                        $(this).next().val(num);
                        $('.rechnum').text(num+'.00元');
                        }
                    }else{
                        var num = hidbody+n-1;
                        $(this).next().val(num);
                        $('.rechnum').text(num+'.00元');
                         $("#hidbody").val(0);
                    }
                    
                   
                });
            });

        function  number50(){
            document.getElementById('number50').src = "image/a50.png"; //替换img路径
            document.getElementById('number100').src = "image/100.png";
            $('.rechnum').text('50.00元');
            $("#hidbody").val(50);
            $("#num").val(0);
//            var value = document.getElementById('number50').alt;
        }
        function  number100(){
            document.getElementById('number50').src = "image/50.png"; //替换img路径
            document.getElementById('number100').src = "image/a100.png";
            $('.rechnum').text('100.00元');
            $("#hidbody").val(100);
            $("#num").val(0);
        }

        function btext(){
            var body1 =$("#num").val();
            if(body1 == ""||body1 == undefined){
                body1=0;
            }
            body1 = parseInt(body1);
            $('.rechnum').text(body1+'.00元');
            document.getElementById('number50').src = "image/50.png"; //替换img路径
            document.getElementById('number100').src = "image/100.png";
        }
        function weixin(){
            document.getElementById('weixin').src = "image/a微信勾选.png"; //替换img路径
            document.getElementById('zhifubao').src = "image/支付宝勾选.png"; //替换img路径
            document.getElementById('weixin').alt = "1";
            document.getElementById('zhifubao').alt = "0";
        }
        function zhifubao(){
            document.getElementById('weixin').src = "image/微信勾选.png"; //替换img路径
            document.getElementById('zhifubao').src = "image/a支付宝勾选.png"; //替换img路径
            document.getElementById('zhifubao').alt = "1";
            document.getElementById('weixin').alt = "0";
        }

          </script>

html代码:

        <div id="allpid" style="width: 100%;height:100%;background-image: url(image/透明.png);background-size:100%             100%;position:absolute;">
            
            <div style="height: 45vh;margin-top: 34.5vh;margin-left: 29vw;margin-right: 28vw;">
                <div>
                    <input type="text" id="username" maxlength="11" style="width:9vw;height:2.5vh;background-image:url(image/手机输入框.png);background-repeat: no-repeat;line-height: 3vh; padding-left: 2vw;" placeholder="请输入充值手机号" />
                </div>
                <div style="margin-top: 4.5vh;">
                    <img id="number50" οnclick="number50()" style="float: left;width: 6.3vw;height: 5vh;" src="image/50.png" alt="50" />
                    <img id="number100" οnclick="number100()" style="float: left;width: 6.3vw;height: 5vh;margin-left: 1vw;" src="image/100.png" alt="100" />

                </div>
            <div class="gw_num">
                    <em class="jian"><img src="image/减号.png" /></em>
                    <input type="text" value="0" id="num" class="num" max="10000" οninput="if(value>100000)value=100000" onBlur="btext()" οnkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" />
                    <em class="add"><img src="image/加号.png" /></em>
                </div>
                <div style="margin-top: 4.5vh;">
                    <img id="weixin" οnclick="weixin()" style="float: left;width: 6.3vw;height: 5vh;" src="image/微信勾选.png" alt="0" />
                    <img id="zhifubao" οnclick="zhifubao()" style="float: left;width: 6.3vw;height: 5vh;margin-left: 1vw;" src="image/支付宝勾选.png" alt="0" />                
                </div>
                <input type="hidden" id="hidbody" value="0" />
                <div style="width: 100%;height: 6.3vh;margin-top: 10vh;"><p class="rechnum" >0.00元</p></div>
                <div style="width: 100%;margin-top: 2vh;"><input type="button" οnclick="payfor()" style="background-image: url(image/确认支付.png);width: 8vw;height: 5vh;" /></div>
            </div>
            
        </div>
        <div id="pidd" style="width: 1600px;height: 350px;position: absolute;margin-top:27vh;display: none">
            <div>                
                <img style="width: 18vw;margin-left: 40vw" src="image/弹窗.png">
                <img οnclick="fanhui()" style="width: 6vw;margin-top: -1vh;margin-left: -12vw;" src="image/返回.png" />
            </div>
            <div  style="position: absolute;margin-top:-25.5vh;margin-left: 43.25vw;width: 8vw;">
                <div id="qrcodeCanvas" style="width: 150px">
                </div>
            </div>
        </div>
        <input type="hidden" id = "codesa" value=""/>

后台java代码:

  /**微信
     * 生成二维码
     * @param response
     * @throws Exception
     */
    @RequestMapping("paycode")
    @ResponseBody
    public ReturnResult pay2(String username,String body,String payType) throws Exception {
        ReturnResult res = new ReturnResult();
        User u = userService.findByNum(username);
        if(null != u){
            OrderMassages om = new OrderMassages();
            om.setUserId(Integer.valueOf(u.getId()));
            Map<String, String> params = new TreeMap<String, String>();
            om.setTotalAmount(Double.valueOf(body));
            //封装交易订单开始
            /**---------------开始生成订单号 ------------------------**/
            //当前时间 yyyyMMddHHmmss
            String currTime = TenpayUtil.getCurrTime();
            //8位日期
            String strTime = currTime.substring(8, currTime.length());
            //四位随机数
            String strRandom = TenpayUtil.buildRandom(4) + "";
            //10位序列号,可以自行调整
            String strReq = strTime + strRandom;
            //订单号,此处用时间加随机数生成,只要保持全局唯一就行
            String out_trade_no = strReq;
            /**---------------生成订单号 结束 ------------------------**/
//            String date = TenpayUtil.getCurrTimey();
            String date = TenpayUtil.getCurrTimeBanned();
            om.setTime(date);//获取系统当前时间(消费时间))
            out_trade_no = String.valueOf(UUID.next());
            om.setOrderNumber(out_trade_no);
            //订单状态:1为待付款
            om.setTradeStatus("1");
            om.setPayType("微信支付");
            om.setOrderType(0);
            om.setSubject("充值");
            om.setBody("充值!!");
            om.setPayForType(6);
            orderMassagesService.insertSelective(om);
            int total_fee = (int) (Float.valueOf(String.valueOf(om.getTotalAmount())) * 100);
            
            params.put("appid", WXConstantUtil.APP_ID);//公众账号ID
            params.put("mch_id", WXConstantUtil.MCH_ID);//商户号
            params.put("trade_type", "NATIVE");//交易类型
            params.put("out_trade_no", om.getOrderNumber()); //商户系统内部的订单号
            params.put("total_fee", String.valueOf(total_fee));//订单总金额(分)
            params.put("spbill_create_ip",  "");//服务器ip地址(必填)
            params.put("body", om.getBody());    //商品描述。
            params.put("notify_url",  WXConstantUtil.NOTIFY_URL);//通知地址
            params.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串
            String xml = WXPayUtil.generateSignedXml(params,"key");//(map, key) 返回xml
     
            HttpPost post = new HttpPost("https://api.mch.weixin.qq.com/pay/unifiedorder");//统一下单API
            post.setEntity(new StringEntity(xml, "UTF-8"));
            String result = WXPayUtil.doPostWithBrowser(post);
            Map<String, String> map = WXPayUtil.xmlToMap(result);
            String return_code = map.get("return_code");
            if("FAIL".equals(return_code)){
                String return_msg = map.get("return_msg");
                System.err.println("return_code:>>"+return_code+"   return_msg:>>>"+return_msg);
            }
            String result_code = map.get("result_code");
            if("FAIL".equals(result_code)){
                String err_code = map.get("result_code");
                String err_code_des = map.get("err_code_des");
                System.err.println("result_code:>>"+result_code+"   err_code:>>>"+err_code+"   err_code_des:>>>"+err_code_des);
            }
            String payurl = map.get("code_url");
            res.setMessage(payurl);
            res.setCode(om.getOrderNumber());
            //生成二维码
            /* Map<EncodeHintType, Object> hints=new HashMap<EncodeHintType, Object>();
             // 指定纠错等级
             hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.L);
             // 指定编码格式
             hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
             hints.put(EncodeHintType.MARGIN, 1);
             try {
                 BitMatrix bitMatrix = new MultiFormatWriter().encode(payurl, BarcodeFormat.QR_CODE, defaultWidthAndHeight, defaultWidthAndHeight, hints);
                 OutputStream out = response.getOutputStream();
                 MatrixToImageWriter.writeToStream(bitMatrix, "png", out);//输出二维码
                 out.flush();
                 out.close();
      
             } catch (WriterException e) {
                 // TODO Auto-generated catch block
                 e.printStackTrace();
             }*/
        }else{
            res.setMessage("该账号尚未注册。。。");
            res.setCode("10001");
        }
        return res;
    }
    /**支付宝
     * 生成二维码
     * @param response
     * @throws Exception
     */
  //生成有二维码,可供扫码支付的页面
    @RequestMapping(value = "aliPay")
    @ResponseBody
    public ReturnResult aliPay(String username,String body,String payType) throws Exception{
        ReturnResult res = new ReturnResult();
        User u = userService.findByNum(username);
        if( null != u){
            OrderMassages om = new OrderMassages();
            om.setUserId(Integer.valueOf(u.getId()));
            Map<String, String> params = new TreeMap<String, String>();
            om.setTotalAmount(Double.valueOf(body));
            //封装交易订单开始
            /**---------------开始生成订单号 ------------------------**/
            //当前时间 yyyyMMddHHmmss
            String currTime = TenpayUtil.getCurrTime();
            //8位日期
            String strTime = currTime.substring(8, currTime.length());
            //四位随机数
            String strRandom = TenpayUtil.buildRandom(4) + "";
            //10位序列号,可以自行调整
            String strReq = strTime + strRandom;
            //订单号,此处用时间加随机数生成,只要保持全局唯一就行
            String out_trade_no = strReq;
            /**---------------生成订单号 结束 ------------------------**/
//            String date = TenpayUtil.getCurrTimey();
            String date = TenpayUtil.getCurrTimeBanned();
            om.setTime(date);//获取系统当前时间(消费时间))
            out_trade_no = String.valueOf(UUID.next());
            om.setOrderNumber(out_trade_no);
            //订单状态:1为待付款
            om.setTradeStatus("1");
            om.setPayType("支付宝支付");
            om.setOrderType(0);
            om.setSubject("");
            om.setBody("扫码充值!!");
            om.setPayForType(6);
            orderMassagesService.insertSelective(om);
            //获得初始化的AlipayClient
            AlipayClient alipayClient = new DefaultAlipayClient(AlipayConfig.URL,AlipayConfig.APP_ID,AlipayConfig.APP_PRIVATE_KEY,AlipayConfig.FORMAT,AlipayConfig.CHARSET,AlipayConfig.ALIPAY_PUBLIC_KEY,AlipayConfig.SIGNTYPE);
            //设置请求参数
//            AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
            AlipayTradePrecreateRequest request = new AlipayTradePrecreateRequest();    
//          alipayRequest.setReturnUrl(AlipayConfig.return_url+"?chapterId="+chapterId);
            request.setNotifyUrl(AlipayConfig.notify_url);
            request.setReturnUrl(AlipayConfig.return_url);
            //付款ID,必填
//            String out_trade_no = om.getOrderNumber();
            //付款金额,必填
            String total_amount = om.getTotalAmount().toString();
     //       total_amount=URLDecoder.decode(total_amount,"UTF-8");//转码
            //订单名称,必填
            String subject = om.getSubject();
//            subject=URLDecoder.decode(subject,"UTF-8");
            //商品描述,可空
            String body1 = om.getBody();
            request.setBizContent("{" +
                    "    \"out_trade_no\":\""+om.getOrderNumber()+"\"," +
                    "    \"total_amount\":\""+ total_amount +"\"," +
                    "    \"subject\":\""+subject+"\"," +
                    "    \"body\":\""+body1+"\"," +
                    "    \"seller_id\":\""+AlipayConfig.seller_id+"\"," +
//                    "    \"product_code\":\""+AlipayConfig.product_code+"\"," +
                    "    \"store_id\":\"扫码支付\"" +
//                    "    \"timeout_express\":\"5m\"" +
                    "    }");
            AlipayTradePrecreateResponse response = alipayClient.execute(request);
            String qrCode = response.getQrCode();
            res.setMessage(qrCode);
            res.setCode(om.getOrderNumber());
            //请求
     //       String result = alipayClient.pageExecute(alipayRequest).getBody();
                 /*rep.setContentType("text/html; charset=utf-8");  
                PrintWriter out = rep.getWriter();   
                out.println(result);   
                return result;*/
               /* rep.setContentType("text/html;charset=" + AlipayConfig.CHARSET);
                rep.getWriter().write(result);//直接将完整的表单html输出到页面
                rep.getWriter().flush();
                rep.getWriter().close();*/
        }else{
            res.setMessage("该账号尚未注册。。。");
            res.setCode("10001");
        }
        return res;

    }

    //查看付费状态

    @RequestMapping(value = "queryorderStatus")
    @ResponseBody
    public String queryorderStatus(String code){
        OrderMassages om = orderMassagesService.queryorderStatus(code);
        if(om.getTradeStatus() == "2" || "2".equals(om.getTradeStatus())){
            return "10000";
        }else{
            return "10001";
        }
    }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值