微信扫码支付与生成二维码

Posted 指北的司南

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信扫码支付与生成二维码相关的知识,希望对你有一定的参考价值。

二维码

  (1) 容错级别

    L(低) 7%的码字可以被恢复。

    M级(中) 的码字的15%可以被恢复。

    Q级(四分)的码字的25%可以被恢复。

    H级(高) 的码字的30%可以被恢复。

  (2) 二维码生成插件qrious

    qrious是一款基于html5 Canvas的纯JS二维码生成插件。通过qrious.js可以快速生成各种二维码,你可以控制二维码的尺寸颜色,还可以将生成的二维码进行Base64编码。

    qrious.js二维码插件的可用配置参数如下:

参数

类型

默认值

描述

background

String

"white"

二维码的背景颜色。

foreground

String

"black"

二维码的前景颜色。

level

String

"L"

二维码的误差校正级别(L, M, Q, H)

mime

String

"image/png"

二维码输出为图片时的MIME类型。

size

Number

100

二维码的尺寸,单位像素。

value

String

""

需要编码为二维码的值

 web引入qrious.js

qrious.min.js

微信支付SDK

  (1) 解压WxPayAPI_JAVA_v3.zip

  (2) 将解压的maven工程导入到IDE(eclipse)

  (3) 打成jar包,并安装到maven仓库

mvn install:install-file -Dfile=d:setupwxpay-sdk-0.0.3.jar -DgroupId=com.github.wxpay -DartifactId=wxpay-sdk -Dversion=0.0.3 -Dpackaging=jar

  (4) 在要使用微信扫码支付的工程引入依赖

<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
</dependency>

HttpClient工具类

  HttpClientApache Jakarta Common下的子项目,用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中,比如Apache Jakarta上很著名的另外两个开源项目CactusHTMLUnit都使用了HttpClient

  HttpClient通俗的讲就是模拟了浏览器的行为,如果我们需要在后端向某一地址提交数据获取结果,就可以使用HttpClient.

  关于HttpClient(原生)相对比较麻烦,进行封装,使用封装后的工具类HttpClient(对原生HttpClient进行了封装)

HttpClient工具类使用的步骤 

HttpClient client=new HttpClient(请求的url地址);
client.setHttps(true);//是否是https协议
client.setXmlParam(xmlParam);//发送的xml数据
client.post();//执行post请求
String result = client.getContent(); //获取结果

添加配置文件weixinpay.properties

## 微信公众账号或开放平台APP的唯一标识
appid=****************
## 财付通平台的商户账号
partner=*********
## 财付通平台的商户密钥
partnerkey=*********************************
## 回调地址
notifyurl=http://a31ef7db.ngrok.io/WeChatPay/WeChatPayNotify

将二维码插件QRious拷贝到web plugins目录中

后端代码(ServiceImpl)

@Service
public class WeixinPayServiceImpl implements WeixinPayService {

    @Value("${appid}")
    private String appid;
    
    @Value("${partner}")
    private String partner;
    
    @Value("${partnerkey}")
    private String partnerkey;
    
    /**
     * 生成二维码
     * @return
     */
    public Map createNative(String out_trade_no,String total_fee){
        //1.创建参数
        Map<String,String> param=new HashMap();//创建参数
        param.put("appid", appid);//公众号
        param.put("mch_id", partner);//商户号
        param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串        
        param.put("body", "xxx");//商品描述
        param.put("out_trade_no", out_trade_no);//商户订单号
        param.put("total_fee",total_fee);//总金额(分)
        param.put("spbill_create_ip", "127.0.0.1");//IP
        param.put("notify_url", "http://www.xxx.cn");//回调地址(随便写)
        param.put("trade_type", "NATIVE");//交易类型
        try {
            //2.生成要发送的xml 
            String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey);
            System.out.println(xmlParam);    
            HttpClient client=new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
            client.setHttps(true);
            client.setXmlParam(xmlParam);
            client.post();        
            //3.获得结果 
            String result = client.getContent();
            System.out.println(result);
            Map<String, String> resultMap = WXPayUtil.xmlToMap(result);            
            Map<String, String> map=new HashMap<>();
            map.put("code_url", resultMap.get("code_url"));//支付地址
            map.put("total_fee", total_fee);//总金额
            map.put("out_trade_no",out_trade_no);//订单号
            return map;
        } catch (Exception e) {
            e.printStackTrace();
            return new HashMap<>();
        }            
    }
}

 后端代码(Controller)

/**
 * 支付控制层
 * @author Administrator
 *
 */
@RestController
@RequestMapping("/pay")
public class PayController {
    @Reference
    private  WeixinPayService weixinPayService;
    
    /**
     * 生成二维码
     * @return
     */
    @RequestMapping("/createNative")
    public Map createNative(){
        IdWorker idworker=new IdWorker();        
        return weixinPayService.createNative(idworker.nextId()+"","1");        
    }
}

 前端代码,先引入angular.js

angular.min.js

base.js

var app = angular.module(‘xxx‘, []);

Service.js

app.service(‘payService‘,function($http){
    //本地支付
    this.createNative=function(){
        return $http.get(‘pay/createNative.do‘);
    }    
});

Controller.js

app.controller(‘payController‘ ,function($scope ,payService){    
    //本地生成二维码
    $scope.createNative=function(){
        payService.createNative().success(
            function(response){
                $scope.money=  (response.total_fee/100).toFixed(2) ;    //金额
                $scope.out_trade_no= response.out_trade_no;//订单号
                //二维码
                var qr = new QRious({
                    element:document.getElementById(qrious),// 根据id选择元素
                    size:250,
                    level:‘H‘,
                    value:response.code_url
                 });                
            }
        );        
    }        
});

html页面

  引入js

<script type="text/javascript" src="plugins/angularjs/angular.min.js">  </script>
    <script type="text/javascript" src="js/base.js">  </script>
    <script type="text/javascript" src="js/service/payService.js">  </script>
    <script type="text/javascript" src="js/controller/payController.js">  </script>
    <script type="text/javascript" src="plugins/qrious.min.js"></script>

  指令

<body ng-app="pinyougou" ng-controller="payController" ng-init="createNative()">

  html代码

<p class="red"></p>                      
         <div class="fl code">
              <img id="qrious">
              <div class="saosao">
                  <p>请使用微信扫一扫</p>
                  <p>扫描二维码支付</p>
         </div>
</div>

 微信扫码支付状态

  后端(ServiceImpl)

@Override
    public Map queryPayStatus(String out_trade_no) {
        Map param=new HashMap();
        param.put("appid", appid);//公众账号ID
        param.put("mch_id", partner);//商户号
        param.put("out_trade_no", out_trade_no);//订单号
        param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串
        String url="https://api.mch.weixin.qq.com/pay/orderquery";        
        try {
            String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey);    
            HttpClient client=new HttpClient(url);
            client.setHttps(true);
            client.setXmlParam(xmlParam);
            client.post();
            String result = client.getContent();            
            Map<String, String> map = WXPayUtil.xmlToMap(result);
            System.out.println(map);
            return map;            
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }    
    }

后端代码(Controller)

/**
     * 查询支付状态
     * @param out_trade_no
     * @return
     */
    @RequestMapping("/queryPayStatus")
    public Result queryPayStatus(String out_trade_no){
        Result result=null;
     int x = 0;     
while(true){ //调用查询接口 Map<String,String> map = weixinPayService.queryPayStatus(out_trade_no); if(map==null){//出错 result=new Result(false, "支付出错"); break; } if(map.get("trade_state").equals("SUCCESS")){//如果成功 result=new Result(true, "支付成功"); break; } try { Thread.sleep(3000);//间隔三秒 } catch (InterruptedException e) { e.printStackTrace(); }
        //为了不让循环无休止地运行,我们定义一个循环变量,如果这个变量超过了这个值则退出循环,设置时间为5分钟
        x++;
        if(x>=100){
          result=new  Result(false, "二维码超时");
          //1.调用微信的关闭订单接口(学员实现)
          Map<String,String> payresult = weixinPayService.closePay(out_trade_no);
          if( !"SUCCESS".equals(payresult.get("result_code")) ){//如果返回结果是正常关闭
            if("ORDERPAID".equals(payresult.get("err_code"))){
              result=new Result(true, "支付成功");
              seckillOrderService.saveOrderFromRedisToDb(userId, Long.valueOf(out_trade_no), map.get("transaction_id"));
              }
          }
          if(result.isSuccess()==false){
            System.out.println("超时,取消订单");
            //2.调用删除
            seckillOrderService.deleteOrderFromRedis(userId, Long.valueOf(out_trade_no));
          }
          break;
        } } return result; }

前端js

  Controller.js

//查询支付状态 
    queryPayStatus=function(out_trade_no){
        payService.queryPayStatus(out_trade_no).success(
            function(response){
                if(response.success){
                    location.href="paysuccess.html";
                }else{
            if(response.message==‘二维码超时‘){
              location.href="payTimeOut.html";
            }else{
              location.href="payfail.html";
            } } } ); }

  Service.js

  修改createNative方法

//本地生成二维码
    $scope.createNative=function(){
        payService.createNative().success(
            function(response){
                ..........                
                 queryPayStatus(response.out_trade_no);//查询支付状态                
            }
        );        
    }

 关闭微信扫码支付

  后端代码(ServiceImpl)

@Override
    public Map closePay(String out_trade_no) {
        Map param=new HashMap();
        param.put("appid", appid);//公众账号ID
        param.put("mch_id", partner);//商户号
        param.put("out_trade_no", out_trade_no);//订单号
        param.put("nonce_str", WXPayUtil.generateNonceStr());//随机字符串
        String url="https://api.mch.weixin.qq.com/pay/closeorder";
        try {
            String xmlParam = WXPayUtil.generateSignedXml(param, partnerkey);
            HttpClient client=new HttpClient(url);
            client.setHttps(true);
            client.setXmlParam(xmlParam);
            client.post();
            String result = client.getContent();
            Map<String, String> map = WXPayUtil.xmlToMap(result);
            System.out.println(map);
            return map;
        } catch (Exception e) {
            e.printStackTrace();
            return null;
        }        
    }

后端代码(Controller)
  修改queryPayStatus方法

 前端代码

  修改queryPayStatus方法


































以上是关于微信扫码支付与生成二维码的主要内容,如果未能解决你的问题,请参考以下文章

微信扫码支付功能---通过谷歌二维码工具生成付款码

微信扫码支付(基于java ssm)

手机微信如何扫码付款

微信扫码支付怎么使用?

pbootcms对接微信扫码登录代码核心片段和步骤(前后端)

php微信扫码支付