vue整合微信支付

1.准备工作

首先在微信公众平台进行申请 https://mp.weixin.qq.com/ 这里需要几个值 关联的公众号appid、商户号和商户key ,当我们申请通过后就可以拿到这三个数据,就可以集成微信支付功能。

2.微信二维码接口

2.1 安装依赖

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

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 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("?");
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<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;
}
}

View Code

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.根据订单号查询订单信息
QueryWrapper<TOrder> queryWrapper=new QueryWrapper<TOrder>();
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<String, String> 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 用于展示二维码

<template>
<div class="cart py-container">
<!--主内容-->
<div class="checkout py-container  pay">
<div class="checkout-tit">
<h4 class="fl tit-txt"><span class="success-icon"></span><span
class="success-info">订单提交成功,请您及时付款!订单号:{{payObj.out_trade_no}}</span>
</h4>
<span class="fr"><em class="sui-lead">应付金额:</em><em
class="orange money">¥{{payObj.total_fee}}</em></span>
<div class="clearfix"></div>
</div>
<div class="checkout-steps">
<div class="fl weixin">微信支付</div>
<div class="fl sao">
<p class="red">请使用微信扫一扫。</p>
<div class="fl code">
<!-- <img src="http://www.bubuko.com/~/assets/img/erweima.png" > -->
<!-- <qriously value="weixin://wxpay/bizpayurl?pr=R7tnDpZ" :size="338"/> -->
<qriously :value="payObj.code_url" :size="338" />
<div class="saosao">
<p>请使用微信扫一扫</p>
<p>扫描二维码支付</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<!-- <p><a href="http://www.bubuko.com/pay.html" target="_blank">> 其他支付方式</a></p> -->
</div>
</div>
</div>
</template>
<script>
import { createNative,queryPayStatus } from ‘@/api/order‘
export default{
data(){
return{
orderId:‘‘,
payObj:{}
}
},
created(){
this.orderId = this.$route.params.pid
this.createNative()
},
methods:{
createNative(){
createNative(this.orderId).then(res=>{
this.payObj = res.data.data
})
}
}
}
</script>

vue整合微信支付

原文:https://www.cnblogs.com/fqh2020/p/14799730.html

以上是vue整合微信支付的全部内容。
THE END
分享
二维码
)">
< <上一篇
下一篇>>