品优购14—微信扫码支付


阅读数: 次   

EverydayOneCat

Do Not Swim🚫

939e50505b4a0c57ded5e607cd757e63c67cc4e5

微信扫码支付简介

1.二维码

1.1什么是二维码

二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。

二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。

1.2二维码优势

  • 信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
  • 应用范围广, 支持文字,声音,图片,指纹等等…
  • 容错能力强, 即使图片出现部分破损也能使用
  • 成本低, 容易制作

1.3二维码容错级别

L级（低） 7％的码字可以被恢复。
M级（中） 的码字的15％可以被恢复。
Q级（四分）的码字的25％可以被恢复。
H级（高） 的码字的30％可以被恢复。

1.4二维码生成插件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 “地址” 需要编码为二维码的值

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>二维码入门小demo</title>
</head>
<body>
<img id="qrious">
<script src="qrious.min.js"></script>
<script>
 var qr = new QRious({
	   element:document.getElementById('qrious'),
	   size:250, 
       level:'H',	
       value:'http://www.itcast.cn'
	});
</script>
</body>
</html>

2.微信支付

2.1开发文档

在线微信支付开发文档：https://pay.weixin.qq.com/wiki/doc/api/index.html

微信支付接口调用的整体思路：
按API要求组装参数，以XML方式发送（POST）给微信支付接口（URL）,微信支付接口也是以XML方式给予响应。程序根据返回的结果（其中包括支付URL）生成二维码或判断订单状态。

需要四个参数：

  1. appid：微信公众账号或开放平台APP的唯一标识

  2. mch_id：商户号 (配置文件中的partner)

  3. partnerkey：商户密钥

  4. sign:数字签名, 根据微信官方提供的密钥和一套算法生成的一个加密信息, 就是为了保证交易的安全性

2.2微信支付SDK

使用微信支付SDK,在maven工程中引入依赖

1
2
3
4
5
<dependency>
    <groupId>com.github.wxpay</groupId>
    <artifactId>wxpay-sdk</artifactId>
    <version>0.0.3</version>
</dependency>

我们主要会用到微信支付SDK的以下功能：

1
2
3
4
5
6
//（1）获取随机字符串
WXPayUtil.generateNonceStr()
//（2）MAP转换为XML字符串（自动添加签名）
WXPayUtil.generateSignedXml(param, partnerkey)
//（3）XML字符串转换为MAP 
WXPayUtil.xmlToMap(result)

2.3HttpClient工具类

之前的博客中已经有过对HttpClient有过介绍，这里就简单说一下使用方法：

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

品优购实现微信支付

1.微信支付二维码生成

我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder
具体参数参见“统一下单”API, 构建参数发送给统一下单的url ，返回的信息中有支付url，根据url生成二维码，显示的订单号和金额也在返回的信息中。

1.1服务层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@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", "品优购");//商品描述
		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://test.itcast.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<>();
		}			
	}
}

1.2控制层

这里我们订单号通过分布式ID生成器生成，金额暂时写死，后续开发我们再对接业务系统得到订单号和金额

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
 * 支付控制层
 * @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");		
	}
}

1.3前端实现

创建payService.js

1
2
3
4
5
6
app.service('payService',function($http){
	//本地支付
	this.createNative=function(){
		return $http.get('pay/createNative.do');
	}	
});

创建payController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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'),
		 		   size:250,
		 		   level:'H',
		 		   value:response.code_url
		 		});				
			}
		);		
	}		
});

设置二维码图片的ID

1
2
3
4
5
6
7
8
9
<p class="red"></p>                      
         <div class="fl code">
              <img id="qrious"><!--id和js中定义的一样-->
              <div class="saosao">
                  <p>请使用微信扫一扫</p>
                  <p>扫描二维码支付</p>
         </div>
</div>

2.检测支付状态

我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/orderquery
具体参数参见“查询订单”API, 我们在controller方法中轮询调用查询订单（间隔3秒），当返回状态为success时，我们会在controller方法返回结果。前端代码收到结果后跳转到成功页面。

2.1服务层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@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;
    }	
}

2.2控制层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
	 * 查询支付状态
	 * @param out_trade_no
	 * @return
	 */
@RequestMapping("/queryPayStatus")
public Result queryPayStatus(String out_trade_no){
    Result result=null;		
    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();
        }							
    }
    return result;
}

2.3前端实现

payService.js新增方法

1
2
3
4
//查询支付状态
this.queryPayStatus=function(out_trade_no){
    return $http.get('pay/queryPayStatus.do?out_trade_no='+out_trade_no);
}

payController.js中新增方法

1
2
3
4
5
6
7
8
9
10
11
12
//查询支付状态 
queryPayStatus=function(out_trade_no){
    payService.queryPayStatus(out_trade_no).success(
        function(response){
            if(response.success){
                location.href="paysuccess.html";
            }else{					
                location.href="payfail.html";								
            }				
        }
    );
}

2.4查询时间限制

如果用户到了二维码页面一直未支付，或是关掉了支付页面，我们的代码会一直循环调用微信接口，这样会对程序造成很大的压力。所以我们要加一个时间限制或是循环次数限制，当超过时间或次数时，跳出循环。

修改pinyougou-cart-web工程PayController.java的queryPayStatus方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@RequestMapping("/queryPayStatus")
public Result queryPayStatus(String out_trade_no){
    Result result=null;		
    int x=0;		
    while(true){
        //调用查询接口
        .......		
            try {
                Thread.sleep(3000);//间隔三秒
            } catch (InterruptedException e) {
                e.printStackTrace();
            }	
        //为了不让循环无休止地运行，我们定义一个循环变量，如果这个变量超过了这个值则退出循环，设置时间为5分钟
        x++;
        if(x>=100){
            result=new  Result(false, "二维码超时");
            break;
        }
    }
    return result;
}

修改payController.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//查询支付状态 
queryPayStatus=function(out_trade_no){
    payService.queryPayStatus(out_trade_no).success(
        function(response){
            if(response.success){
                location.href="paysuccess.html";
            }else{
                if(response.message=='二维码超时'){
                    $scope.createNative();//重新生成二维码					
                }else{
                    location.href="payfail.html";
                }					
            }				
        }
    );
}

2.5支付成功页面显示金额

现在我们支付成功页面显示的是固定的值，怎么显示真正的支付金额呢？我们这里可以使用angularJS的页面传参来解决。

修改payController.js 跳转页面传参

1
2
3
if(response.success){
    location.href="paysuccess.html#?money="+$scope.money;
}

在payController.js中引入$location服务 ，新增方法

1
2
3
4
//获取金额
$scope.getMoney=function(){
    return $location.search()['money'];
}

用表达式显示金额

1
<p>支付金额：￥{{getMoney()}}元</p>

3.支付日志

3.1实现思路

（1）在用户下订单时，判断如果为微信支付，就想支付日志表添加一条记录，信息包括支付总金额、订单ID（多个）、用户ID 、下单时间等信息，支付状态为0（未支付）

（2）生成的支付日志对象放入redis中，以用户ID作为key，这样在生成支付二维码时就可以从redis中提取支付日志对象中的金额和订单号。

（3）当用户支付成功后，修改支付日志的支付状态为1（已支付），并记录微信传递给我们的交易流水号。根据订单ID（多个）修改订单的状态为2（已付款）。

3.2插入日志记录

修改pinyougou-order-service工程OrderServiceImpl.java 的add方法。
内容：判断如果支付方式为微信支付，向数据库插入支付日志记录，并放入redis存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
@Autowired
private TbPayLogMapper payLogMapper;
/**
	 * 增加
	 */
public void add(TbOrder order) {
    List<Cart> cartList = (List<Cart>) 
        redisTemplate.boundHashOps("cartList").get( order.getUserId() );
    List<String> orderIdList=new ArrayList();//订单ID列表
    double total_money=0;//总金额 （元）
    for(Cart cart:cartList){
        long orderId = idWorker.nextId();
        ......			
            orderIdList.add(orderId+"");//添加到订单列表	
        total_money+=money;//累加到总金额 
    }
    if("1".equals(order.getPaymentType())){//如果是微信支付		
        TbPayLog payLog=new TbPayLog();
        String outTradeNo=  idWorker.nextId()+"";//支付订单号
        payLog.setOutTradeNo(outTradeNo);//支付订单号
        payLog.setCreateTime(new Date());//创建时间
        //订单号列表，逗号分隔
        String ids=orderIdList.toString().replace("[", "").replace("]", "").replace(" ", "");
        payLog.setOrderList(ids);//订单号列表，逗号分隔
        payLog.setPayType("1");//支付类型
        payLog.setTotalFee( (long)(total_money*100 ) );//总金额(分)
        payLog.setTradeState("0");//支付状态
        payLog.setUserId(order.getUserId());//用户ID			
        payLogMapper.insert(payLog);//插入到支付日志表			
        redisTemplate.boundHashOps("payLog").put(order.getUserId(), payLog);//放入缓存			
    }		
    redisTemplate.boundHashOps("cartList").delete(order.getUserId());		
}

3.3读取支付日志

OrderServiceImpl.java实现方法

1
2
3
4
@Override
public TbPayLog searchPayLogFromRedis(String userId) {
    return (TbPayLog) redisTemplate.boundHashOps("payLog").get(userId);		
}

修改PayController.java的createNative方法
实现思路：调用获取支付日志对象的方法，得到订单号和金额

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@Reference
private OrderService orderService;
/**
	 * 生成二维码
	 * @return
	 */
@RequestMapping("/createNative")
public Map createNative(){
    //获取当前用户		
    String userId=SecurityContextHolder.getContext().getAuthentication().getName();
    //到redis查询支付日志
    TbPayLog payLog = orderService.searchPayLogFromRedis(userId);
    //判断支付日志存在
    if(payLog!=null){
        return weixinPayService.createNative(payLog.getOutTradeNo(),payLog.getTotalFee()+"");
    }else{
        return new HashMap();
    }		
}

3.4修改订单状态

服务层OrderServiceImpl.java实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
	 * 修改订单状态
	 * @param out_trade_no 支付订单号
	 * @param transaction_id 微信返回的交易流水号
	 */
@Override
public void updateOrderStatus(String out_trade_no, String transaction_id) {
    //1.修改支付日志状态
    TbPayLog payLog = payLogMapper.selectByPrimaryKey(out_trade_no);
    payLog.setPayTime(new Date());
    payLog.setTradeState("1");//已支付
    payLog.setTransactionId(transaction_id);//交易号
    payLogMapper.updateByPrimaryKey(payLog);		
    //2.修改订单状态
    String orderList = payLog.getOrderList();//获取订单号列表
    String[] orderIds = orderList.split(",");//获取订单号数组

    for(String orderId:orderIds){
        TbOrder order = orderMapper.selectByPrimaryKey( Long.parseLong(orderId) );
        if(order!=null){
            order.setStatus("2");//已付款
            orderMapper.updateByPrimaryKey(order);
        }			
    }
    //清除redis缓存数据		
    redisTemplate.boundHashOps("payLog").delete(payLog.getUserId());
}

控制层PayController.java。在微信支付接口有成功返回状态时，调用修改状态的方法

1
2
3
4
5
6
if(map.get("trade_state").equals("SUCCESS")){//如果成功				
    result=new  Result(true, "支付成功");
    //修改订单状态
    orderService.updateOrderStatus(out_trade_no, map.get("transaction_id"));
    break;
}

结语

冷知识：LPL至今还没队伍在入围赛出局过
《空ban》真的是经典 LGD又要创造历史了？🐂

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

很惭愧<br><br>只做了一点微小的工作<br>谢谢大家