一文快速实现微信公众号支付功能

4.拥有一个正式的应用服务器，而且注册域名
微信支付涉及的私密数据比较多，不容许使用natapp，花生壳之类的内网穿透工具实现，须要有正式的服务器环境，而且要注册域名，不能使用IP。
好比：http://www.baidu.com
5.相关配置
5.1 配置支付受权目录，登陆商户平台——>产品中心——>开发配置
图中配置的例子，表明在项目根路径下，以及web目录下的页面都有支付权限，若是不在该路径的页面，则没法调用支付功能。
若页面地址为：http://mywexx.xxxx.com/web/pa...
则须要配置为：http://mywexx.xxxx.com/web/

5.2 设置API密钥，登陆商户平台——>帐户中心——>API安全——>API密钥
该密钥在后面的代码中计算支付签名的时候须要使用到。

5.3 配置JS接口安全域名与网页受权域名，登陆公众平台——>公众号设置——>功能设置
配置网页受权域名：主要用于获取用户的openId，须要识别这是哪一个人。
若对openID不了解的同窗可先参考微信公众号开发文档：https://mp.weixin.qq.com/wiki
配置JS接口安全域名：要让咱们的页面中弹出输入密码的窗口，须要使用微信提供的JS-SDK工具，若是不配置JS接口安全域名，你的页面没法使用JS-SDK。

公众号支付实现流程
大体流程参考官方提供的时序图：

流程有不少，不一一演示，咱们选取核心部分来实现。
1.提供商城主页，用户进入后经过网页受权获取openid

若是对网页受权不熟悉的同窗先参考这篇文章：
https://www.jianshu.com/p/94b...
访问主页的地址：http://www.wolfcode.cn/index.do
当用户第一次打开主页，默认没有code参数，此时会先重定向到获取受权的地址
（若是只须要获取openid，能够使用scope为snsapi_base静默受权的方式）
通过受权地址再重定向到咱们的index.do时，会带上code参数，此时便可经过接口获取用户的openid
[AppleScript] 纯文本查看 复制代码
?

/sizealign=left@Controller/sizealign=leftpublic class IndexController { /sizealign=left @RequestMapping("index")/sizealign=left public void index(String code, Model model, HttpServletResponse response,HttpServletRequest request) {/sizealign=left //若是有code就能够去获取用户的open id/size[/b] if(code!=null) { //经过code来换取access_token

JSONObject json = WeChatUtil.getWebAccessToken(code);            //获取用户openid
                            String openid = json.getString("openid");            //设置到会话中
                            request.getSession().setAttribute("openid",openid);            //重定向到主页
                            response.sendRedirect("/index.html");
       }else{            //重定向到受权页面
                 response.sendRedirect(WeChatUtil.WEB_REDIRECT_URL.replace("APPID",WeChatUtil.APPID)
                     .replace("REDIRECT_URI", RequestUtil.getUrl(request)));
         }
   }

}

注意： 1. WeChatUtil.getWebAccessToken 方法在网页受权的文章中有介绍。

1. WEB_REDIRECT_URL 是网页受权的地址常量：

public static final String WEB_REDIRECT_URL = "https://open.weixin.qq.com/connect/oauth2/authorize?" +

"appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base#wechat_redirect";

2.点击商品后跳转到商品详细页面
具体页面根据本身的项目添加，主要是页面须要提供一个能够立刻下订单的按钮便可。（这里不演示加入购物车功能）

点击当即购买按钮跳转到后台下单地址，并带上当前商品的id。
[AppleScript] 纯文本查看 复制代码

<script>
$(function () { //当即购买按钮

$("#orderBtn").click(function(){            //获取商品id
      var id = $("#productId").val();            //提交到下单
       window.location.href = "/order.do?productId="+id;
   })

})</script>

3.接收商品参数并调用微信支付统一下单接口
正常的业务流程是在该方法中，获取商品id，再经过id去查询数据库该商品的相关属性，好比名称，价格等等，而后再建立业务订单，再去调用微信支付的统一下单接口（让微信生成预支付单，后续才能够进行支付）。
但此处重点在支付流程，商品的属性值和订单相关值，暂且先使用假数据。
接口以及参数可参考微信官方提供的统一下单文档：https://pay.weixin.qq.com/wik...
根据文档介绍，咱们调用统一下单接口时须要带上相关必填的参数以下：

1.PNG
把必填的参数封装成对应的实体类：

调用接口成功后返回的结果也封装成实体类：

该结果中最重要的是prepay_id参数，在页面中弹出支付窗口时须要用到。

注意：下单的业务逻辑，正常是须要抽取到业务层的，可是此处为了方便阅读代码，直接写到了控制器上。
[Java] 纯文本查看 复制代码

[/b]
[b]@Controller[/b]
[b]public class OrderController { [/b]
[b] @RequestMapping("order") [/b]
[b] public String save(Long productId,Model model,HttpServletRequest request) throws Exception { //根据商品id查询商品详细信息(假数据)

//productService.getProductById(productId)
     double price = 0.01;//(0.01元)
     String productName = "SweetCity";        //生成订单编号
     int number = (int)((Math.random()*9)*1000);//随机数
     DateFormat dateFormat = new SimpleDateFormat("yyyyMMddHHmmss");//时间
     String orderNumber = dateFormat.format(new Date()) + number;        //获取openId
     String openId = (String) request.getSession().getAttribute("openid");        //准备调用接口须要的参数
    WxOrderEntity order = new WxOrderEntity();        //公众号appid
   order.setAppid(WeChatUtil.APPID);        //商户号
   order.setMch_id(WeChatUtil.MCH_ID);        //商品描述
   order.setBody(productName);        //设备号，公众号支付直接填WEB
   order.setDevice_info("WEB");        //交易类型
   order.setTrade_type("JSAPI");        //商户订单号
   order.setOut_trade_no(orderNumber);        //支付金额(单位：分)
   order.setTotal_fee((int)(price*100));        //用户ip地址
   order.setSpbill_create_ip(RequestUtil.getIPAddress(request));        //用户openid
   order.setOpenid(openId);        //接收支付结果的地址
   order.setNotify_url("http://www.wolfcode.com/receive.do");        //32位随机数(UUID去掉-就是32位的)
   String uuid = UUID.randomUUID().toString().replace("-", "");
   order.setNonce_str(uuid);        //生成签名
   String sign = WeChatUtil.getPaySign(order);
   order.setSign(sign);        //调用微信支付统一下单接口,让微信也生成一个预支付订单
   String xmlResult = HttpUtil.post(GET_PAY_URL,XMLUtil.toXmlString(order));        //把返回的xml字符串转成对象
  WxOrderResultEntity entity = XMLUtil.toObject(xmlResult,WxOrderResultEntity.class);        //若是微信预支付单成功建立，就跳转到支付订单页进行支付
  if(entity.getReturn_code().equals("SUCCESS")&&entity.getResult_code().equals("SUCCESS")){            //jssdk权限验证参数
 TreeMap<Object, Object> map = new TreeMap<>();
  map.put("appId",WeChatUtil.APPID);            long timestamp = new Date().getTime();
  map.put("timestamp",timestamp);//全小写
  map.put("nonceStr",uuid);
  map.put("signature",WeChatUtil.getSignature(timestamp,uuid,RequestUtil.getUrl(request)));
  model.addAttribute("configMap",map);            //微信支付权限验证参数
  String prepayId = entity.getPrepay_id();
  TreeMap<Object, Object> payMap = new TreeMap<>();
  payMap.put("appId",WeChatUtil.APPID);
   payMap.put("timeStamp",timestamp);//驼峰
   payMap.put("nonceStr",uuid);
   payMap.put("package","prepay_id="+prepayId);
  payMap.put("signType","MD5");
  payMap.put("paySign",WeChatUtil.getPaySign(payMap));
   payMap.put("packageStr","prepay_id="+prepayId);
   model.addAttribute("payMap",payMap);
 }        //跳转到查看订单页面
   return  "order";

}
}

下面是jssdk中config权限使用到的的签名，以及微信支付使用的签名的算法代码。
官方文档参考：
config签名：https://mp.weixin.qq.com/wiki...
pay签名：https://pay.weixin.qq.com/wik...

[Java] 纯文本查看 复制代码
?

/**

* 计算jssdk-config的签名
* @param timestamp
* @param noncestr
* @param url
* @return
*/

public static String getSignature(Long timestamp,String noncestr,String url ){ [/b]
[b] //对全部待签名参数按照字段名的ASCII 码从小到大排序（字典序）
Map<String,Object> map = new TreeMap<>();
map.put("jsapi_ticket",getTicket());
map.put("timestamp",timestamp);
map.put("noncestr",noncestr);
map.put("url",url); //使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1
StringBuilder sb = new StringBuilder();
Set<String> set = map.keySet(); for (String key : set) {
sb.append(key+"="+map.get(key)).append("&");

}        //去掉最后一个&符号

String temp = sb.substring(0,sb.length()-1); //使用sha1加密
return SecurityUtil.SHA1(temp);
} /**

* 计算微信支付的签名
* @param obj
* @return
* @throws IllegalAccessException
*/

public static String getPaySign(Object obj) throws IllegalAccessException, IOException {
StringBuilder sb = new StringBuilder(); //把对象转为TreeMap集合(按照key的ASCII 码从小到大排序)
TreeMap<String, Object> map; if(!(obj instanceof Map)) {
map = ObjectUtils.objectToMap(obj);

}else{

map = (TreeMap)obj;

}

Set<Map.Entry<String, Object>> entrySet = map.entrySet(); //遍历键值对
for (Map.Entry<String, Object> entry : entrySet) { //若是值为空，不参与签名
if(entry.getValue()!=null) { //格式key1=value1&key2=value2…
sb.append(entry.getKey() + "=" + entry.getValue() + "&");
}
} //最后拼接商户的API密钥
String stringSignTemp = sb.toString()+"key="+WeChatUtil.KEY; //进行md5加密并转为大写
return SecurityUtil.MD5(stringSignTemp).toUpperCase();
}

4.提供订单展现页面

若对微信JS-SDK不了解的同窗可先参考该文章：
https://www.jianshu.com/p/b3c...
在页面中调用微信JS-SDK，经过config接口注入权限验证配置，而且添加支付功能

[AppleScript] 纯文本查看 复制代码
?

<!--jquery-->
<script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<!--微信的JSSDK-->
<script src="http://res.wx.qq.com/open/js/...;></script>
<script>
$(function() {
<!--经过config接口注入权限验证配置-->

wx.config({                debug: true, // 开启调试模式
appId: '${configMap.appId}', // 公众号的惟一标识
timestamp: '${configMap.timestamp}', // 生成签名的时间戳
nonceStr: '${configMap.nonceStr}', // 生成签名的随机串

signature: '${configMap.signature}',// 签名
jsApiList: ['chooseWXPay'] // 填入须要使用的JS接口列表，这里是先声明咱们要用到支付的JS接口

});            <!-- config验证成功后会调用ready中的代码 -->

wx.ready(function(){
//点击立刻付款按钮
$("#payBtn").click(function(){
//弹出支付窗口
wx.chooseWXPay({
timestamp: '${payMap.timeStamp}', // 支付签名时间戳，
nonceStr: '${payMap.nonceStr}', // 支付签名随机串，不长于 32 位
package: '${payMap.packageStr}', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=xxxx）
signType: '${payMap.signType}', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '${payMap.paySign}', // 支付签名
success: function (res) {
// 支付成功后的回调函数
alert("支付成功！");
}
});
})
});
}); </script>

点击立刻付款后可弹出支付窗口：

支付完成：

5.支付结果的处理
当用户支付后，微信会把支付结果发送到咱们前面指定的notify_url地址，咱们能够根据支付结果的参数来作相关的业务逻辑，但这里暂不实现，具体支付通知结果的参数可参考官方文章：
https://pay.weixin.qq.com/wik...

做者：陈惠
连接：https://www.jianshu.com/p/9c3...