vue整合微信支付
1.准备工作
首先在微信公众平台进行申请 这里需要几个值 关联的公众号appid、商户号和商户key ,当我们申请通过后就可以拿到这三个数据,就可以集成微信支付功能。
2.微信二维码接口
2.1 安装依赖
com.github.wxpay wxpay-sdk 0.0.3 com.alibaba fastjson 1.2.76
2.2 生成二维码
步骤:
1.根据订单号查询订单信息
2.根据map设置二维码需要参数
3.发送httpclient请求,传递参数
4.得到发送请求返回结果
1)创建工具类httpclient,用于发送请求
package com.gh.mp.eduOrder.utils; 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.entity.UrlEncodedFormEntity; import org.apache.http.client.methods.*; import org.apache.http.conn.ssl.SSLConnectionSocketFactory; import org.apache.http.conn.ssl.SSLContextBuilder; import org.apache.http.conn.ssl.TrustStrategy; import org.apache.http.entity.StringEntity; import org.apache.http.impl.client.CloseableHttpClient; import org.apache.http.impl.client.HttpClients; import org.apache.http.message.BasicNameValuePair; import org.apache.http.util.EntityUtils; import javax.net.ssl.SSLContext; import java.io.IOException; 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; /** * http请求客户端 * * @author qy * */ public class HttpClient { private String url; private Mapparam; 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 param) { this.url = url; this.param = param; } public HttpClient(String url) { this.url = url; } public void setParameter(Map map) { param = map; } public void addParameter(String key, String value) { if (param == null) param = new HashMap (); 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("?"); else url.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 nvps = new LinkedList (); 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; } }
2)创建生成二维码接口,传递参数是订单号
/** * 生成微信二维码接口,参数是订单号 * @param orderNo * @return */ @GetMapping("createNative/{orderNo}") public R createNative(@PathVariable String orderNo){ Map map= tPayLogService.createNative(orderNo); return R.ok().data(map); }
3)创建service层,用于生成二维码
@Override public Map createNative(String orderNo) { try { //1.根据订单号查询订单信息 QueryWrapperqueryWrapper=new QueryWrapper (); queryWrapper.eq("order_no",orderNo); TOrder order = orderService.getOne(queryWrapper); //2.根据map设置二维码需要参数 Map m = new HashMap(); m.put("appid", "wx74862e0dfcf69954"); m.put("mch_id", "1558950191"); //商户号 m.put("nonce_str", WXPayUtil.generateNonceStr()); //生成随机字符串 m.put("body", order.getCourseTitle()); //生成二维码的名字 m.put("out_trade_no", orderNo); //填写订单号 m.put("total_fee", order.getTotalFee().multiply(new BigDecimal("100")).longValue()+"");//转换价格 m.put("spbill_create_ip", "127.0.0.1"); //ip地址 m.put("notify_url", "http://guli.shop/api/order/weixinPay/weixinNotify\n");//回调地址 m.put("trade_type", "NATIVE"); //支付类型 //3.发送httpclient请求,传递参数 HttpClient client = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder"); //client设置参数 client.setXmlParam(WXPayUtil.generateSignedXml(m, "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb")); client.setHttps(true); //执行请求发送 client.post(); //4.得到发送请求返回结果,返回内容是使用xml格式返回 String xml = client.getContent(); //把xml格式转换成map集合,把map集合返回 Map resultMap = WXPayUtil.xmlToMap(xml); //最终返回数据的封装 Map map = new HashMap(); map.put("out_trade_no", orderNo); map.put("course_id", order.getCourseId()); map.put("total_fee", order.getTotalFee()); map.put("result_code", resultMap.get("result_code"));//返回二维码操作状态码 map.put("code_url", resultMap.get("code_url"));//二维码地址 return map; }catch (Exception e){ e.printStackTrace(); throw new EduException(20001,"获取二维码失败"); } }
4)前端页面
首先通过命令 npm install vue-qriously 安装插件
在配置文件使用插件
import VueQriously from ‘vue-qriously‘ Vue.use(VueQriously)
创建前端页面 _pid.vue 用于展示二维码
class="cart py-container">class="checkout py-container pay">class="checkout-tit">class="fl tit-txt">class="success-icon"><span class="success-info">订单提交成功,请您及时付款!订单号:{{payObj.out_trade_no}}
class="fr">class="sui-lead">应付金额:<em class="orange money">¥{{payObj.total_fee}}class="clearfix">class="checkout-steps">class="fl weixin">微信支付class="fl sao">class="red">请使用微信扫一扫。
class="fl code"> class="saosao">请使用微信扫一扫
扫描二维码支付
class="clearfix">
原文:https://www.cnblogs.com/fqh2020/p/14799730.html