微信扫码支付与生成二维码
二维码
(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:\setup\wxpay-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工具类
HttpClient是Apache Jakarta Common下的子项目,用来提供高效的、最新的、功能丰富的支持HTTP协议的客户端编程工具包,并且它支持HTTP协议最新的版本和建议。HttpClient已经应用在很多的项目中,比如Apache Jakarta上很著名的另外两个开源项目Cactus和HTMLUnit都使用了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");//IPparam.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 {@Referenceprivate 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="xxx" 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)
@Overridepublic Map queryPayStatus(String out_trade_no) {Map param=new HashMap();param.put("appid", appid);//公众账号IDparam.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)
@Overridepublic Map closePay(String out_trade_no) {Map param=new HashMap();param.put("appid", appid);//公众账号IDparam.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方法
转载于:https://www.cnblogs.com/lin-nest/p/10320053.html
微信扫码支付与生成二维码相关推荐
- 微信小程序业务-字符串生成二维码(weapp-qrcode)
微信小程序业务-字符串生成二维码(weapp-qrcode) 前言 邂逅weapp-qrcode 基本使用 详细参数 小程序组件中使用 image属性详解 想使用网络图片? 参考地址 前言 在小程序项 ...
- Android超方便 集成 Zxing实现扫一扫,闪光灯,生成二维码图片,解析二维码(条码)等功能
之前我写过一篇博客是关于如何将zxing集成到Android Studio中,以及简单的实现扫一扫功能. 详情请看:Android Studio集成Zxing扫一扫 但是,上面那篇博客只有有一个扫一扫 ...
- 微信小程序使用weapp-qrcode生成二维码
<canvas style="width:108rpx;height:108rpx; canvas-id='qrcode'></canvas> // weapp-qr ...
- 微信内置浏览器动态生成二维码并长按识别
现如今围绕微信生态相关开发已经非常常见,本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存 说几个知识点 微信 ...
- 二维码相关---java生成二维码名片,并且自动保存到手机通讯录中...
二维码相关---java生成二维码名片,并且自动保存到手机通讯录中... 技术qq交流群:JavaDream:251572072 1.首先介绍一个api. Zxing是Google提供的关于条码 ...
- 二维码接口B生成二维码
二维码接口B生成二维码 一.将小程序发布 二.获取access_token 代码如下: getaccess() {var that = this;wx.request({url: 'https://a ...
- 二维码相关---java生成二维码名片,而且自己主动保存到手机通讯录中...
版权声明:本文为博主原创文章,未经博主credreamer 同意不得转载 违者追究法律责任. https://blog.csdn.net/lidew521/article/details/244418 ...
- 做微信扫码支付接口,二维码图片显示的是二进制文件的解决方案
先说一下我的配置 centos 7.0 jdk 1.7 apache tomcat 7.0 spring mvc 4.0 做微信扫码支付遇到一个很严重的问题 二维码在本地可以正常的在jsp上显示,部署 ...
- 【vue+pc端】实现微信扫码登录pc端,后端通过微信开发平台,前端生成二维码(仅供参考)
这两周的需求是通过微信扫码登录pc端,刚定下需求原型图还没出来前,后端特意发了微信开发平台的链接给我,关于如何生成二维码的文档,以及扫码跳转后如何传code给他. 请戳这里准备工作|微信开放文档 我最 ...
最新文章
- 使用四种框架分别实现百万websocket常连接的服务器
- 手机版python配置_appium+python 连接手机设备的yaml配置文件
- MySQL服务迁移到opt_mysql文件*.opt *.frm *.MYI *.MYD的迁移
- NBU计算机专业期末考试记录
- 常见的技术类英文字母含义总结,Localhost、SDK、URL 等(持续更新中)
- 钢琴块2电脑版_云上钢琴学生端电脑版|云上钢琴学生端 V2.3.1 最新PC版 下载_当下软件园...
- java面试之闭包(closure)
- ns手柄pc驱动_功能特点可以打满屏!北通宙斯白金版无线游戏手柄体验
- vue-pdf插件import引入时报错
- 《软件架构评估》学习笔记
- 【CVPR2021】AdderSR: Towards Energy Efficient Image Super-Resolution
- 通过docker搭建lamp+wordpress+ELK监控
- C语言实现背单词软件(系统级别)
- 前端小白也能快速学会的博客园博客美化全攻略[附源码]
- lol12月25服务器维护,英雄联盟12月25日更新到几点 LOL更新维护公告
- 在线考试系统计时方法
- UGtoNREC安装教程
- Linux命令-ping
- 计算机工程与应用退修后重审,《计算机工程与应用》退修意见
- 测试花别人钱案例,离奇事件:班费去哪里了