微信支付类型
微信支付实际上有很多种不同的类型,详细要利用哪一种就须要根据不同的运用处景来选择,官方给出的参考例子:
刷卡支付:用户打开微信钱包的刷卡的界面,商户扫码后提交完成支付。
"大众年夜众号支付:用户在微信内进入商家H5页面,页面内调用JSSDK完成支付
扫码支付:用户打开\"大众微信扫一扫“,扫描商户的二维码后完成支付
APP支付:商户APP中集成微信SDK,用户点击后跳转到微信内完成支付
H5支付:用户在微信以外的手机浏览器要求微信支付的场景唤起微信支付
小程序支付:用户在微信小程序中利用微信支付的场景
本篇文章实现的是"大众年夜众号支付,会利用到网页授权及微信JS-SDK干系知识,但不再详细先容
建议大家先阅读以下文章理解干系内容:
网页授权:https://www.jianshu.com/p/94b0e53cccc3
微信JS-SDK:https://www.jianshu.com/p/b3c4450f845e
实现效果如下动图:
公众号支付干系配置
本篇文章中实现的是"大众年夜众号支付,实现条件如下:
1.须要一个已经进行微信认证的"大众年夜众号
2.该"大众号须要开通微信支付功能
3.到微信商户平台https://pay.weixin.qq.com 注册一个商户账号,并关联你的"大众年夜众号,如果须要实现小程序支付的,须要关联小程序。
4.拥有一个正式的运用做事器,并且注册域名
微信支付涉及的私密数据比较多,不许可利用natapp,花生壳之类的内网穿透工具实现,须要有正式的做事器环境,并且要注册域名,不能利用IP。
比如:http://www.baidu.com
5.干系配置
5.1 配置支付授权目录,登录商户平台——>产品中央——>开拓配置
图中配置的例子,代表在项目根路径下,以及web目录下的页面都有支付权限,如果不在该路径的页面,则无法调用支付功能。
若页面地址为:http://mywexx.xxxx.com/web/pay.html
则须要配置为: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/94b0e53cccc3
访问主页的地址:http://www.wolfcode.cn/index.do
当用户第一次打开主页,默认没有code参数,此时会先重定向到获取授权的地址
(如果只须要获取openid,可以利用scope为snsapi_base静默授权的办法)
经由授权地址再重定向到我们的index.do时,会带上code参数,此时即可通过接口获取用户的openid
@Controllerpublic class IndexController { @RequestMapping(\"大众index\"大众) public void index(String code, Model model, HttpServletResponse response,HttpServletRequest request) { //如果有code就可以去获取用户的openid 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 方法在网页授权的文章中有先容。 2. 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。
<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/wiki/doc/api/jsapi.php?chapter=9_1
根据文档先容,我们调用统一下单接口时须要带上干系必填的参数如下:
1.PNG
把必填的参数封装成对应的实体类:
调用接口成功后返回的结果也封装成实体类:
该结果中最主要的是prepay_id参数,在页面中弹出支付窗口时须要用到。
把稳:下单的业务逻辑,正常是须要抽取到业务层的,但是此处为了方便阅读代码,直接写到了掌握器上。
@Controllerpublic class OrderController { @RequestMapping(\"大众order\"大众) 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)(price100)); //用户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?t=resource/res_main&id=mp1421141115
pay署名:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3
/ 打算jssdk-config的署名 @param timestamp @param noncestr @param url @return / public static String getSignature(Long timestamp,String noncestr,String url ){ //对所有待署名参数按照字段名的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/b3c4450f845e
在页面中调用微信JS-SDK,通过config接口注入权限验证配置,并且添加支付功能。
<!--jquery--> <script src=\"大众/js/jquery.min.js\"大众 type=\"大众text/javascript\"大众 charset=\公众utf-8\"大众></script> <!--微信的JSSDK--> <script src=\"大众http://res.wx.qq.com/open/js/jweixin-1.2.0.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/wiki/doc/api/jsapi.php?chapter=9_7&index=8
作者:陈惠
链接:https://www.jianshu.com/p/9c322b1a5274