微信扫码支付demo

一、了解二维码

1.什么是二维码（百度）

2.二维码的容错级别

L级（低） 7％的码字可以被恢复。

M级（中）的码字的15％可以被恢复。

Q级（四分）的码字的25％可以被恢复。

H级（高）的码字的30％可以被恢复。

3.二维码生成插件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	""	需要编码为二维码的值

4.demo1、生成一张二维码

qriousjs下载地址：点击下载

<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.baidu.com'});
</script>
</body>
</html>

二、微信扫码支付简介

2.1微信扫码支付申请

步骤：

（1）注册公众号(类型必须为：服务号)

请根据营业执照类型选择以下主体注册：个体工商户| 企业/公司| 政府| 媒体| 其他类型。

（2）认证公众号

公众号认证后才可申请微信支付，认证费：300元/次。

（3）提交资料申请微信支付

登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。

（4）开户成功，登录商户平台进行验证

资料审核通过后，请登录联系人邮箱查收商户号和密码，并登录商户平台填写财付通备付金打的小额资金数额，完成账户验证。

（5）在线签署协议

本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。

2.2微信支付开发文档

地址：https://pay.weixin.qq.com/wiki/doc/api/index.html

2.3微信支付SDK

先将Java版SDK下载到本地，然后进行安装，然后在自己项目中引入依赖

        <dependency><groupId>com.github.wxpay</groupId><artifactId>wxpay-sdk</artifactId><version>0.0.3</version></dependency>

我们会用到微信支付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。

<groupId>org.apache.httpcomponents</groupId>

<artifactId>httpclient</artifactId>

</dependency>

HttpClient工具类

package util;import java.io.IOException;
import java.security.GeneralSecurityException;
import java.security.cert.CertificateException;
import java.security.cert.X509Certificate;
import java.text.ParseException;
import java.util.HashMap;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;import javax.net.ssl.SSLContext;
import javax.net.ssl.SSLException;
import javax.net.ssl.SSLSession;
import javax.net.ssl.SSLSocket;
import javax.net.ssl.TrustManager;
import javax.net.ssl.X509TrustManager;import org.apache.http.Consts;
import org.apache.http.HttpEntity;
import org.apache.http.NameValuePair;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.entity.UrlEncodedFormEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpEntityEnclosingRequestBase;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.client.methods.HttpPut;
import org.apache.http.client.methods.HttpUriRequest;
import org.apache.http.conn.scheme.Scheme;
import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
import org.apache.http.conn.ssl.SSLContextBuilder;
import org.apache.http.conn.ssl.SSLSocketFactory;
import org.apache.http.conn.ssl.TrustStrategy;
import org.apache.http.conn.ssl.X509HostnameVerifier;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
import org.apache.http.message.BasicNameValuePair;
import org.apache.http.util.EntityUtils;/*** http请求客户端* * @author Administrator* */
public class HttpClient {private String url;private Map<String, String> param;private int statusCode;private String content;private String xmlParam;private boolean isHttps;public boolean isHttps() {return isHttps;}public void setHttps(boolean isHttps) {this.isHttps = isHttps;}public String getXmlParam() {return xmlParam;}public void setXmlParam(String xmlParam) {this.xmlParam = xmlParam;}public HttpClient(String url, Map<String, String> param) {this.url = url;this.param = param;}public HttpClient(String url) {this.url = url;}public void setParameter(Map<String, String> map) {param = map;}public void addParameter(String key, String value) {if (param == null)param = new HashMap<String, String>();param.put(key, value);}public void post() throws ClientProtocolException, IOException {HttpPost http = new HttpPost(url);setEntity(http);execute(http);}public void put() throws ClientProtocolException, IOException {HttpPut http = new HttpPut(url);setEntity(http);execute(http);}public void get() throws ClientProtocolException, IOException {if (param != null) {StringBuilder url = new StringBuilder(this.url);boolean isFirst = true;for (String key : param.keySet()) {if (isFirst)url.append("?");elseurl.append("&");url.append(key).append("=").append(param.get(key));}this.url = url.toString();}HttpGet http = new HttpGet(url);execute(http);}/*** set http post,put param*/private void setEntity(HttpEntityEnclosingRequestBase http) {if (param != null) {List<NameValuePair> nvps = new LinkedList<NameValuePair>();for (String key : param.keySet())nvps.add(new BasicNameValuePair(key, param.get(key))); // 参数http.setEntity(new UrlEncodedFormEntity(nvps, Consts.UTF_8)); // 设置参数}if (xmlParam != null) {http.setEntity(new StringEntity(xmlParam, Consts.UTF_8));}}private void execute(HttpUriRequest http) throws ClientProtocolException,IOException {CloseableHttpClient httpClient = null;try {if (isHttps) {SSLContext sslContext = new SSLContextBuilder().loadTrustMaterial(null, new TrustStrategy() {// 信任所有public boolean isTrusted(X509Certificate[] chain,String authType)throws CertificateException {return true;}}).build();SSLConnectionSocketFactory sslsf = new SSLConnectionSocketFactory(sslContext);httpClient = HttpClients.custom().setSSLSocketFactory(sslsf).build();} else {httpClient = HttpClients.createDefault();}CloseableHttpResponse response = httpClient.execute(http);try {if (response != null) {if (response.getStatusLine() != null)statusCode = response.getStatusLine().getStatusCode();HttpEntity entity = response.getEntity();// 响应内容content = EntityUtils.toString(entity, Consts.UTF_8);}} finally {response.close();}} catch (Exception e) {e.printStackTrace();} finally {httpClient.close();}}public int getStatusCode() {return statusCode;}public String getContent() throws ParseException, IOException {return content;}}

HttpClient工具类使用步骤

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

2.5 项目添加配置文件weixinpay.properties

appid=微信公众账号或开放平台APP的唯一标识
partner=财付通平台的商户账号
partnerkey=财付通平台的商户密钥
notifyurl=回调地址

2.6 将二维码插件QRious 拷贝到项目js目录中

三、二维码生成需求分析和实现

3.1 需求分析

在支付页面上生成支付二维码，并显示订单号和金额。

用户拿出手机,打开微信扫描页面上的二维码,然后在微信中完成支付

3.2 实现思路

我们通过HttpClient工具类实现对远程支付接口的调用。

接口链接：https://api.mch.weixin.qq.com/pay/unifiedorder

具体参数参见“统一下单”API, 构建参数发送给统一下单的url ，返回的信息中有支付url，根据url生成二维码，显示的订单号和金额也在返回的信息中。

3.3 代码实现

3.3.1 服务接口层

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);
}

3.3.2 服务实现层

@Service
public class WeixinPayServiceImpl implements WeixinPayService {@Value("${appid}")   //注入properties属性文件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");//IPparam.put("notify_url", "http://www.itdx.com");//回调地址(随便写)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<>();}			}
}

3.3.3 控制层

/*** 支付控制层* @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");	//订单号id生成器生成，金额写死	}
}

3.4前端跟页面根据demo自行解决（我用的AngularJS）

3.4.1 payService.js

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

3.4.2 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.4.3 页面

<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><title>微信支付页</title><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></head><body ng-app="demo" ng-controller="payController" ng-init="createNative()"><p class="red"></p>                      <div class="fl code"><img id="qrious"><div class="saosao"><p>请使用微信扫一扫</p><p>扫描二维码支付</p></div></div>
订单号：{{out_trade_no}}
<em  class="orange money">￥{{money}}</em>元</body></html>

四、检测支付状态

4.1 需求分析和实现思路

4.1.1 需求分析

查询订单支付状态，当用户支付成功后跳转成功界面，支付异常跳转错误界面

4.1.2 实现思路

我们通过HttpClient工具类实现对远程支付接口的调用。

接口链接：https://api.mch.weixin.qq.com/pay/orderquery

具体参数参见“查询订单”API,我们在controller方法中轮询调用查询订单（间隔3秒），当返回状态为success时，我们会在controller方法返回结果。前端代码收到结果后跳转到成功页面。

4.2 后端代码实现

4.2.1 WeixinPayService.java 接口中新增方法

         /*** 查询支付状态* @param out_trade_no*/public Map queryPayStatus(String out_trade_no);

4.2.2 服务实现层WeixinPayServiceImpl.java中实现方法

        @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;}	}

4.2.3控制层PayController.java新增

	/*** 查询支付状态* @param out_trade_no* @return*/@RequestMapping("/queryPayStatus")public Result queryPayStatus(String out_trade_no){Result result=null;		while(true){//调用查询接口Map<String,String> map = weixinPayService.queryPayStatu(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 前端代码

payService.js新增

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

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);//查询支付状态				});		}

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

做双眼皮岁数
...
2024/4/20 14:17:51
做三点式双眼皮后悔了
...
2024/5/1 13:14:54
Angular----样式
本篇根据Angular官网提供的例子，对Angular涉及到的样式绑定进行说明。一、提供的CSS样式 1 .red{2 color:red;3 }4 .green{5 color: green;6 }7 .yellow{8 color: yellow;9 } 10 .size{ 11 font-size: 20px; 12 } 13 .back{ 14 background-color: gray; …...
2024/4/21 16:40:32
CSS内联样式的使用，算法太TM重要了
前端的现状提到现状，必须先提到一个概念大前端。由于近几年互联网的发展，尤其是移动互联网的发展，有的大前端概念将 Native 归入前端的范畴，有的大前端概念将 Node 甚至只渲染页面的 PHP 归入前端范畴，但不管怎么说…...
2024/4/30 20:53:17
做全切双眼皮的禁忌
...
2024/5/1 9:14:16
做埋线双眼皮能永久么
...
2024/5/1 12:14:37
做了双眼皮用冰敷么
...
2024/5/1 12:33:21
前端开发框架总结之利用Jtopo实现网络拓扑功能（二）
前端开发框架总结之利用Jtopo实现网络拓扑功能（二） 上文我们讲了一些拓扑结点生成的实际场景设计和实现思路以及一些关键技术细节。本文我们继续我们的拓扑管理开发之旅。拓扑连线给拓扑结点添加连线是拓扑管理中必不可少的操作，官网的例…...
2024/5/1 10:52:13
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvas
html页面转换成图片的三种方法——canvas、dom-to-image、html2canvascanvas绘制网络图片报错（跨域）使用canvas将html页面转成图片dom-to-imagehtml2canvas如果需要代码详情请前往下载：https://github.com/LiYaMei94/html_to_image canvas绘…...
2024/5/1 9:23:14
前端AntD框架的upload组件上传图片时遇到的一些坑
前言本文的最新内容，将在GitHub上更新，欢迎 star，和我一起入门和进阶前端。本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 upload 组件。前端做文件上传这个功能，是很有技术难…...
2024/5/1 13:23:09
Ionic3实现图片瀑布流布局
我们先要定义一个container，在container中存在有多个box，box里面放置图片。1、首先获取container中的所有box。2、获取box的宽度和屏幕的宽度。3、获取在当前屏幕宽度下一行可以放置多少个box。4、将所有的box的高度放到一个数组当中。5、遍历数组&#…...
2024/5/1 10:39:49
南丁格尔玫瑰图-修改扇形块的颜色与玫瑰图添加图片与文字
背景：1.依据要求给扇形图分配不同颜色 2.在玫瑰图中间插入数字或图片效果图： 如上一篇所述，首先要给图表一个具备宽高的容器； HTML: <div id"box" style"width: 700px;height: 400px;border:1px solid #e4e…...
2024/5/1 8:53:52
java使用FFmpeg获取rtmp流的一帧作为封面图
背景后台（Spring boot）获取rtmp流地址后返回前端（Angular2）Ckplay插件上播放，由于需要展示多个暂停的媒体窗口封面，前端抓取封面较为困难，后台处理图片返回，于此收录本文以便日后再用…...
2024/5/1 10:42:16
ionic3 图片裁剪 cropper 全过程
准备 corpper.min.css cropper.min.js 开始下载上面两个文件，将文件保存到 src/assets目录下，（只要是你自己项目目录下） 在index.html引入这两个文件在需要上传图片的html页面点击图片进行更改 <div class"logo&qu…...
2024/4/20 14:18:07
使用Dropzone上传图片及回显示例
一、图片上传所涉及到的问题 1、HTML页面中引入这么一段代码 <div class"row"><div class"col-md-12"><form dropzone2 class"dropzone" enctype"multipart/form-data" method"post"></form><…...
2024/5/1 11:32:09
做了双眼皮是永久的吗
...
2024/4/30 21:21:58
做了双眼皮七年
...
2024/5/1 6:49:23
做了双眼皮能吹空调吗
...
2024/5/1 8:58:46
做半永久做了双眼皮15天
...
2024/5/1 7:07:40
左眼双眼皮右眼三眼皮红肿
...
2024/4/21 16:40:18

微信扫码支付demo

相关文章

最新文章