品优购电商系统开发----微信扫码支付（18）
课程目标
目标1：掌握二维码生成插件qrious的使用
目标2：能够说出微信支付开发的整体思路
目标3：能够调用微信支付接口（统一下单）生成支付二维码
目标4：能够调用微信支付接口（查询订单）查询支付状态
目标5：实现支付日志的生成与订单状态的修改
1、二维码
1.1、什么是二维码
二维码又称QR Code，QR全称Quick Response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的Bar Code条形码能存更多的信息，也能表示更多的数据类型。
二维条码/二维码（2-dimensional bar code）是用某种特定的几何图形按一定规律在平面（二维方向上）分布的黑白相间的图形记录数据符号信息的；在代码编制上巧妙地利用构成计算机内部逻辑基础的“0”、“1”比特流的概念，使用若干个与二进制相对应的几何形体来表示文字数值信息，通过图象输入设备或光电扫描设备自动识读以实现信息自动处理：它具有条码技术的一些共性：每种码制有其特定的字符集；每个字符占有一定的宽度；具有一定的校验功能等。同时还具有对不同行的信息自动识别功能、及处理图形旋转变化点。
1.2、二维码的优势
（1）信息容量大, 可以容纳多达1850个大写字母或2710个数字或500多个汉字
（2）应用范围广, 支持文字,声音,图片,指纹等等...
（3）容错能力强, 即使图片出现部分破损也能使用
（4）成本低, 容易制作
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 |
"" |
需要编码为二维码的值 |
下面的代码即可生成一张二维码
二维码入门小demo
![]()
运行效果
大家掏出手机，扫一下看看是否会看到传智播客的官网呢？
2、微信扫码支付简介
2.1、微信扫码支付申请
微信扫码支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。
申请步骤：（了解）
第一步：注册公众号（类型须为：服务号）
请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型。
第二步：认证公众号
公众号认证后才可申请微信支付，认证费：300元/次。
第三步：提交资料申请微信支付
登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。
第四步：开户成功，登录商户平台进行验证
资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。
第五步：在线签署协议
本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。
本课程已经提供好“传智播客”的微信支付账号，学员无需申请。
2.2、开发文档
微信支付接口调用的整体思路：
按API要求组装参数，以XML方式发送（POST）给微信支付接口（URL）,微信支付接口也是以XML方式给予响应。程序根据返回的结果（其中包括支付URL）生成二维码或判断订单状态。
在线微信支付开发文档：
https://pay.weixin.qq.com/wiki/doc/api/index.html
如果你不能联网，请查阅讲义配套资源 （资源\配套软件\微信扫码支付\开发文档）
我们在本章课程中会用到”统一下单”和”查询订单”两组API
（1）appid：微信公众账号或开放平台APP的唯一标识
（2）mch_id：商户号 (配置文件中的partner)
（3）partnerkey：商户密钥
（4）sign:数字签名, 根据微信官方提供的密钥和一套算法生成的一个加密信息, 就是为了保证交易的安全性
2.3、微信支付SDK
微信支付提供了SDK, 大家下载后打开源码，install到本地仓库。
课程配套的本地仓库已经提供jar包，所以安装SDK步骤省略。
使用微信支付SDK,在maven工程中引入依赖
com.github.wxpay
wxpay-sdk
0.0.3
我们主要会用到微信支付SDK的以下功能：
（1）获取随机字符串
WXPayUtil.generateNonceStr()（2）MAP转换为XML字符串（自动添加签名）
WXPayUtil.generateSignedXml(param, partnerkey)（3）XML字符串转换为MAP
WXPayUtil.xmlToMap(result)2.4、HttpClient工具类
HttpClient是Apache Jakarta Common下的子项目，用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包，并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中，比如Apache Jakarta上很著名的另外两个开源项目Cactus和HTMLUnit都使用了HttpClient。
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(); //获取结果
2.5、工程搭建与准备工作
（1）建立支付服务接口模块pinyougou-pay-interface （jar）
（2）建立支付服务实现模块pinyougou-pay-service （war） 依赖pinyougou-pay-interface 和pinyougou-common 、 spring dubbox 相关依赖 、微信SDK （因为不需要连接数据库所以不用引用dao工程）
com.github.wxpay
wxpay-sdk
0.0.3
添加tomcat插件，运行端口为9000
添加spring配置文件 ，参见其它服务工程
（3）在pinyougou-common工程中添加工具类HttpClient.java ，并添加依赖
org.apache.httpcomponents
httpclient
添加配置文件weixinpay.properties
appid=wx8397f8696b538317
partner=1473426802
partnerkey=8A627A4578ACE384017C997F12D68B23
notifyurl=http://a31ef7db.ngrok.io/WeChatPay/WeChatPayNotify
appid： 微信公众账号或开放平台APP的唯一标识
partner：财付通平台的商户账号
partnerkey：财付通平台的商户密钥
notifyurl: 回调地址
（4）pinyougou-cart-web依赖工程pinyougou-pay-service
（5）将二维码插件QRious 拷贝到pinyougou-cart-web 的plugins目录中
3、品优购-微信支付二维码生成
3.1、需求分析与实现思路
（1）需求分析
在支付页面上生成支付二维码，并显示订单号和金额
用户拿出手机,打开微信扫描页面上的二维码,然后在微信中完成支付
（2）实现思路
我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder
具体参数参见“统一下单”API, 构建参数发送给统一下单的url ，返回的信息中有支付url，根据url生成二维码，显示的订单号和金额也在返回的信息中。
3.2、后端代码实现
（1）服务接口层
（a）在pinyougou-pay-interface创建包com.pinyougou.pay.service ，包下建立接口
package com.pinyougou.pay.service;
import java.util.Map;
/**
* 微信支付接口
* @author Administrator
*
*/
public interface WeixinPayService {
/**
* 生成微信支付二维码
* @param out_trade_no 订单号
* @param total_fee 金额(分)
* @return
*/
public Map createNative(String out_trade_no,String total_fee);
}
（2）服务实现层
pinyougou-pay-service创建com.pinyougou.pay.service.impl包，新建类
@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 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 resultMap = WXPayUtil.xmlToMap(result);
Map 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<>();
}
}
}
（3）控制层
pinyougou-cart-web创建PayController.java
/**
* 支付控制层
* @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");
}
}
这里我们订单号通过分布式ID生成器生成，金额暂时写死，后续开发我们再对接业务系统得到订单号和金额
浏览器测试
3.3、前端代码实现
（1）服务层
在pinyougou-cart-web创建 payService.js
app.service('payService',function($http){
//本地支付
this.createNative=function(){
return $http.get('pay/createNative.do');
}
});
（2）控制层
在pinyougou-cart-web 创建payController.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'),
size:250,
level:'H',
value:response.code_url
});
}
);
}
});
（3）页面
修改pay.html ,引入js
指令
设置二维码图片ID
![]()
请使用微信扫一扫
扫描二维码支付
显示订单号
订单号：{{out_trade_no}}显示金额
￥{{money}}元4、品优购-检测支付状态
4.1、需求分析与实现思路
（1）需求分析
当用户支付成功后跳转到成功页面
当返回异常时跳转到错误页面
（2）实现思路
我们通过HttpClient工具类实现对远程支付接口的调用。
接口链接：https://api.mch.weixin.qq.com/pay/orderquery
具体参数参见“查询订单”API, 我们在controller方法中轮询调用查询订单（间隔3秒），当返回状态为success时，我们会在controller方法返回结果。前端代码收到结果后跳转到成功页面。
4.2、检测支付状态-后端代码
（1）服务接口层
在pinyougou-pay-interface的WeixinPayService.java中新增方法定义
/**
* 查询支付状态
* @param out_trade_no
*/
public Map queryPayStatus(String out_trade_no);
（2）服务实现层
在pinyougou-pay-service的WeixinPayServiceImpl.java中实现方法
@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 map = WXPayUtil.xmlToMap(result);
System.out.println(map);
return map;
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
（3）控制层
在pinyougou-cart-web的PayController.java新增方法
/**
* 查询支付状态
* @param out_trade_no
* @return
*/
@RequestMapping("/queryPayStatus")
public Result queryPayStatus(String out_trade_no){
Result result=null;
while(true){
//调用查询接口
Map 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;
}
4.3、检测支付状态-前端代码
（1）服务层
在payService.js新增方法
//查询支付状态
this.queryPayStatus=function(out_trade_no){
return $http.get('pay/queryPayStatus.do?out_trade_no='+out_trade_no);
}
（2）控制层
在payController.js中新增方法
//查询支付状态
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";
}
}
);
}
在createNative方法的回调方法中调用此查询方法
//本地生成二维码
$scope.createNative=function(){
payService.createNative().success(
function(response){
..........
queryPayStatus(response.out_trade_no);//查询支付状态
}
);
}
4.4、查询时间限制
（1）问题分析
如果用户到了二维码页面一直未支付，或是关掉了支付页面，我们的代码会一直循环调用微信接口，这样会对程序造成很大的压力。所以我们要加一个时间限制或是循环次数限制，当超过时间或次数时，跳出循环。
（2）代码完善
（a）修改pinyougou-cart-web工程PayController.java的queryPayStatus方法
@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;
}
（b）修改payController.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=='二维码超时'){
$scope.createNative();//重新生成二维码
}else{
location.href="payfail.html";
}
}
}
);
}
4.5、支付成功页面显示金额
（1）问题分析
现在我们支付成功页面显示的是固定的值，怎么显示真正的支付金额呢？我们这里可以使用angularJS的页面传参来解决。
（2）代码完善
（a）修改payController.js 跳转页面传参
//查询支付状态
queryPayStatus=function(out_trade_no){
payService.queryPayStatus(out_trade_no).success(
function(response){
if(response.success){
location.href="paysuccess.html#?money="+$scope.money;
}else{
if(response.message=='二维码超时'){
$scope.createNative();//重新生成二维码
}else{
location.href="payfail.html";
}
}
}
);
}
（b）在payController.js中引入$location服务 ，新增方法
//获取金额
$scope.getMoney=function(){
return $location.search()['money'];
}
（c）修改页面paysuccess.html ，引入JS (与pay.html相同) ，body添加指令
ng-app="pinyougou" ng-controller="payController"用表达式显示金额
支付金额：￥{{getMoney()}}元
5、品优购-支付日志
5.1、需求分析
我们现在系统还有两个问题需要解决：
（1）系统中无法查询到支付记录
（2）支付后订单状态没有改变
我们现在就来解决这两个问题。
实现思路：
（1）在用户下订单时，判断如果为微信支付，就想支付日志表添加一条记录，信息包括支付总金额、订单ID（多个）、用户ID 、下单时间等信息，支付状态为0（未支付）
（2）生成的支付日志对象放入redis中，以用户ID作为key，这样在生成支付二维码时就可以从redis中提取支付日志对象中的金额和订单号。
（3）当用户支付成功后，修改支付日志的支付状态为1（已支付），并记录微信传递给我们的交易流水号。根据订单ID（多个）修改订单的状态为2（已付款）。
5.2、表结构分析
tb_paylog 支付日志表
| 字段 |
类型 |
长度 |
含义 |
| out_trade_no |
varchar |
30 |
支付订单号 |
| create_time |
datatime |
|
创建时间 |
| pay_time |
datatime |
|
支付完成时间 |
| total_fee |
bigint |
|
支付金额（分） |
| transaction_id |
varchar |
30 |
交易流水号 |
| trade_state |
varchar |
1 |
交易状态 |
| pay_type |
varchar |
1 |
支付类型： 1:微信 2:支付宝 3:网银 |
| order_list |
varchar |
200 |
订单表ID串，用逗号分隔 |
5.3、插入日志记录
修改pinyougou-order-service工程OrderServiceImpl.java 的add方法。
内容：判断如果支付方式为微信支付，向数据库插入支付日志记录，并放入redis存储
@Autowired
private TbPayLogMapper payLogMapper;
/**
* 增加
*/
public void add(TbOrder order) {
List cartList = (List)
redisTemplate.boundHashOps("cartList").get( order.getUserId() );
List 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());
}
5.4、读取支付日志
（1）服务接口层
pinyougou-order-interface 工程的OrderService.java 新增方法
/**
* 根据用户查询payLog
* @param userId
* @return
*/
public TbPayLog searchPayLogFromRedis(String userId);
（2）服务实现层
pinyougou-order-service的OrderServiceImpl.java实现方法
@Override
public TbPayLog searchPayLogFromRedis(String userId) {
return (TbPayLog) redisTemplate.boundHashOps("payLog").get(userId);
}
（3）控制层
修改pinyougou-cart-web工程PayController.java的createNative方法
实现思路：调用获取支付日志对象的方法，得到订单号和金额
@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();
}
}
5.5、修改订单状态
（1）服务接口层
在pinyougou-order-interface的OrderService.java新增方法定义
/**
* 修改订单状态
* @param out_trade_no 支付订单号
* @param transaction_id 微信返回的交易流水号
*/
public void updateOrderStatus(String out_trade_no,String transaction_id);
（2）服务实现层
在pinyougou-order-service工程OrderServiceImpl.java实现该方法.
这个方法主要做三件事：
（a）修改支付日志状态
（b）修改关联的订单的状态
清除缓存中的支付日志对象
@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());
}
（3）控制层
修改pinyougou-cart-web的PayController.java。在微信支付接口有成功返回状态时，调用修改状态的方法
/**
* 查询支付状态
* @param out_trade_no
* @return
*/
@RequestMapping("/queryPayStatus")
public Result queryPayStatus(String out_trade_no){
Result result=null;
int x=0;
while(true){
//调用查询接口
Map 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, "支付成功");
//修改订单状态
orderService.updateOrderStatus(out_trade_no, map.get("transaction_id"));
break;
}
try {
Thread.sleep(3000);//间隔三秒
} catch (InterruptedException e) {
e.printStackTrace();
}
//为了不让循环无休止地运行，我们定义一个循环变量，如果这个变量超过了这个值则退出循环，设置时间为5分钟
......
}
return result;
}