devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

spring cloud vue2 实现微信支付功能（全是干货）_vue2接入微信扫码支付

作者：Monodyee | 2024-03-25 07:58:09

赞

踩

vue2接入微信扫码支付

目录

前言：

完整代码：

前端代码：

后端代码：

所需依赖：

代码部分：

config：

service：

创建订单功能详解： 

 创建二维码核心功能：

 返回订单状态核心功能：

成功结果返回核心功能： 

controller层：

 以上的代码还包含与实际业务有关的其他功能 比如rabbitmq的死信队列 分布式feign调用等，可以注释掉不使用

前言：

 点击购买按钮，创建二维码，让用户可以进行扫码支付。具体流程如下图

 

 我们主要负责商户后台系统的编写。

完整代码：

前端代码：

  1.         <!-- 微信支付二维码-->
  2.         <el-dialog :visible.sync="dialogFormVisible" :before-close="cancelOrder" :modal="true" :close-on-click-modal="false" style="width:800px;margin:0px auto;" >
  3.           <h1 style="font-size:30px;color:#00B38A" >微信扫一扫支付</h1>
  4.           <img id="qrcode" :src="wxpayUrl">
  5.           <h2 id="statusText"></h2>
  6.           <p id="closeText"></p>
  7.         </el-dialog>
  8.  
  9.         <!-- 底部购买 -->
  10.         <div
  11.           class="public-class-footer"
  12.           slot="bottom"
  13.           style="border:1px solid #eee; height:60px; text-align:left;"
  14.         >
  15.           <span class="product-descript" style="font-size:.347rem"
  16.             >成就自己</span
  17.           >
  18.           <span class="current-price" style="font-size:28px">
  19.             <span class="current-price-unite" style="font-size:.347rem">
  20.               ￥</span
  21.             >{{course.discounts}}
  22.           </span>
  23.           <span class="current-price price">
  24.             <span class="current-price-unite">￥</span>
  25.              {{course.price}}
  26.           </span>
  27.           <button
  28.             @click="buy(course.id)"
  29.             type="button"
  30.             class="weui-btn purchase-button weui-btn_mini weui-btn_primary"
  31.             style="width:155px;height:45px;font-size:17px;"
  32.           >
  33.             立即购买
  34.             <!-- ::after -->
  35.           </button>
  1.     // 购买课程
  2.     buy() {
  3.       if( this.user != null ){
  4.         this.dialogFormVisible = true; //显示提示框
  5.         //微信下单
  6.         console.log("user.id:"+this.user.id)
  7.         console.log("course.id:"+this.course.id)
  8.         console.log("activityId:"+this.course.activity.id)
  9.         let args = {"userId":this.user.id,"courseId":this.course.id,"activityId":this.course.activity.id,"price":1};
  10.  
  11.         this.axios.post("/wxpay/makeOrder",this.qs.stringify(args))
  12.             .then(res => {
  13.               console.log(res.data);
  14.               //利用返回的code_url，显示支付二维码
  15.               this.wxpayUrl = "http://localhost:9000/wxpay/code?url="+res.data.code_url;
  16.               console.log(this.wxpayUrl);
  17.               //检查后台返回的订单号支付状态
  18.               this.checkOrder(res.data.trade_no);
  19.             });
  20.       }else{
  21.         this.$message.error("购买失败，请先登录！");
  22.       }
  23.     },
  24.  
  25.     //检查订单号支付状态  websocket
  26.     checkOrder(tradeNo){
  27.       console.log("订单的tradeno:"+tradeNo)
  28.       let count = 0;
  29.       //定时1分钟轮询检查
  30.       let timer = setInterval(() =>{
  31.         this.axios.get("/wxpay/checkOrder?tradeNo="+tradeNo)
  32.             .then(res => {
  33.               console.log(res.data +"," + count);
  34.               if(res.data == "SUCCESS"){
  35.                 clearInterval(timer);
  36.                 this.dialogFormVisible = false;
  37.               }
  38.             });
  39.         count++;
  40.         if(count == 10){
  41.           clearInterval(timer);
  42.           this.dialogFormVisible = false;
  43.           this.$message.error("支付超时");
  44.         }
  45.       },6000);
  46.     },

this.axios.post("/wxpay/makeOrder",this.qs.stringify(args))

.then(res => {
  console.log(res.data);
  //利用返回的code_url，显示支付二维码
  this.wxpayUrl = "http://localhost:9000/wxpay/code?url="+res.data.code_url;
  console.log(this.wxpayUrl);
  //检查后台返回的订单号支付状态
  this.checkOrder(res.data.trade_no);
});

 注：估计现在很多人一脸懵逼，二维码怎么莫名其妙生成了，记得往后面看，前端只不过是调接口，后端才是满满干货。

后端代码：

所需依赖：

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>com.dmdd</groupId>
  7.         <artifactId>educate_paopao</artifactId>
  8.         <version>0.0.1-SNAPSHOT</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>edu-pay-service</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>edu-pay-service</name>
  15.     <description>edu-pay-service</description>
  16.     <properties>
  17.         <java.version>8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.         </dependency>
  24.  
  25.         <dependency>
  26.             <groupId>org.springframework.boot</groupId>
  27.             <artifactId>spring-boot-starter-test</artifactId>
  28.             <scope>test</scope>
  29.         </dependency>
  30.         <dependency>
  31.             <groupId>com.github.wxpay</groupId>
  32.             <artifactId>wxpay-sdk</artifactId>
  33.             <version>0.0.3</version>
  34.         </dependency>
  35.  
  36.         <!-- https://mvnrepository.com/artifact/com.google.zxing/core -->
  37.         <dependency>
  38.             <groupId>com.google.zxing</groupId>
  39.             <artifactId>core</artifactId>
  40.             <version>3.3.3</version>
  41.         </dependency>
  42.  
  43.         <!-- https://mvnrepository.com/artifact/com.google.zxing/javase -->
  44.         <dependency>
  45.             <groupId>com.google.zxing</groupId>
  46.             <artifactId>javase</artifactId>
  47.             <version>3.3.3</version>
  48.         </dependency>
  49.         <dependency>
  50.             <groupId>org.springframework.cloud</groupId>
  51.             <artifactId>spring-cloud-config-client</artifactId>
  52.         </dependency>
  53.  
  54.         <dependency>
  55.             <groupId>com.alibaba.cloud</groupId>
  56.             <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
  57.         </dependency>
  58.  
  59.         <dependency>
  60.             <groupId>com.dmdd</groupId>
  61.             <artifactId>common-api</artifactId>
  62.             <version>0.0.1-SNAPSHOT</version>
  63.         </dependency>
  64.  
  65.         <dependency>
  66.             <groupId>com.alibaba.cloud</groupId>
  67.             <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
  68.         </dependency>
  69.  
  70. <!--rabitmq-->
  71.         <dependency>
  72.             <groupId>org.springframework.boot</groupId>
  73.             <artifactId>spring-boot-starter-amqp</artifactId>
  74.         </dependency>
  75.         <dependency>
  76.             <groupId>org.springframework.cloud</groupId>
  77.             <artifactId>spring-cloud-starter-openfeign</artifactId>
  78.         </dependency>
  79.     </dependencies>
  80.  
  81.     <build>
  82.         <plugins>
  83.             <plugin>
  84.                 <groupId>org.springframework.boot</groupId>
  85.                 <artifactId>spring-boot-maven-plugin</artifactId>
  86.             </plugin>
  87.         </plugins>
  88.     </build>
  89.  
  90. </project>

我用的功能比较多，所以依赖有点杂，我把只跟微信支付相关的依赖列出来，并讲解

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

调用微信的api就需要这依赖

<!-- https://mvnrepository.com/artifact/com.google.zxing/core -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>core</artifactId>
    <version>3.3.3</version>
</dependency>

<!-- https://mvnrepository.com/artifact/com.google.zxing/javase -->
<dependency>
    <groupId>com.google.zxing</groupId>
    <artifactId>javase</artifactId>
    <version>3.3.3</version>
</dependency>

这两个依赖是用于生成二维码的，二维码只不过是一个链接，我们扫码，就等于访问一个链接

代码部分：

config：

  1. package com.dmdd.edupayservice.config;
  2.  
  3. import com.github.wxpay.sdk.WXPayConfig;
  4.  
  5. import java.io.InputStream;
  6.  
  7. public class MyWXPayConfig implements WXPayConfig {
  8.     @Override
  9.     public String getAppID() {
  10.         return "wx30************e";
  11.     }
  12.  
  13.     @Override
  14.     public String getMchID() {
  15.         return "15**********81";
  16.     }
  17.  
  18.     @Override
  19.     public String getKey() {
  20.         return "HJd*******************g";
  21.     }
  22.  
  23.     @Override
  24.     public InputStream getCertStream() {
  25.         return null;
  26.     }
  27.  
  28.     @Override
  29.     public int getHttpConnectTimeoutMs() {
  30.         return 0;
  31.     }
  32.  
  33.     @Override
  34.     public int getHttpReadTimeoutMs() {
  35.         return 0;
  36.     }
  37. }

需要向微信申请才可获得

service：

  1. package com.dmdd.edupayservice.service.impl;
  2.  
  3. import com.dmdd.common.entity.UserCourseOrder;
  4. import com.dmdd.edupayservice.config.MyWXPayConfig;
  5. import com.dmdd.edupayservice.config.RabbitMQConfig;
  6. import com.dmdd.edupayservice.feign.CourseServiceFeignClient;
  7. import com.dmdd.edupayservice.feign.OrderServiceFeignClient;
  8. import com.dmdd.edupayservice.service.IWxPayService;
  9. import com.github.wxpay.sdk.WXPay;
  10. import com.github.wxpay.sdk.WXPayUtil;
  11. import com.google.zxing.BarcodeFormat;
  12. import com.google.zxing.EncodeHintType;
  13. import com.google.zxing.MultiFormatWriter;
  14. import com.google.zxing.client.j2se.MatrixToImageWriter;
  15. import com.google.zxing.common.BitMatrix;
  16. import com.google.zxing.qrcode.decoder.ErrorCorrectionLevel;
  17. import lombok.extern.slf4j.Slf4j;
  18. import org.apache.tomcat.util.http.fileupload.util.Streams;
  19. import org.springframework.amqp.rabbit.core.RabbitTemplate;
  20. import org.springframework.beans.factory.annotation.Autowired;
  21. import org.springframework.http.ResponseEntity;
  22. import org.springframework.stereotype.Service;
  23.  
  24. import javax.servlet.http.HttpServletRequest;
  25. import javax.servlet.http.HttpServletResponse;
  26. import java.io.Console;
  27. import java.io.IOException;
  28. import java.sql.Timestamp;
  29. import java.time.LocalDateTime;
  30. import java.util.HashMap;
  31. import java.util.Map;
  32. import java.util.UUID;
  33.  
  34. /**
  35.  * 微信支付Service
  36.  */
  37. @Slf4j
  38. @Service
  39. public class WxPayServiceImpl implements IWxPayService {
  40.     @Autowired
  41.     private CourseServiceFeignClient courseServiceFeignClient;
  42.     @Autowired
  43.     private OrderServiceFeignClient orderServiceFeignClient;
  44.  
  45.  
  46.     @Autowired
  47.     private RabbitTemplate rabbitTemplate;
  48.  
  49.     public static final String DEVICE_INFO = "WEB";
  50.     public static final String BODY = "dmdd";
  51.     public static final String FEE_TYPE = "CNY";
  52.     //回调接口的URL
  53.     public static final String NOTIFY_URL = "http://ygp8pz4342342ee.cc/wxpay/callback";
  54.     public static final String TRADE_TYPE = "NATIVE";
  55.     public static final String SIGN = "5E00F9F72173C9449F802411E362012312312317078";
  56.  
  57.     /**
  58.      * 下单
  59.      */
  60.     public Map<String, String> makeWxOrder(long userId, long courseId, long activityId, long price) throws Exception {
  61.         //创建支付对象
  62.         MyWXPayConfig config = new MyWXPayConfig();
  63.         WXPay wxPay = new WXPay(config);
  64.         //配置微信支付
  65.         Map<String, String> map = new HashMap<>();
  66.         //应用id
  67.         map.put("appid", config.getAppID());
  68.         //商户id
  69.         map.put("mch_id", config.getMchID());
  70.         //device_info web
  71.         map.put("device_info", DEVICE_INFO);
  72.         map.put("nonce_str", WXPayUtil.generateNonceStr());
  73.         map.put("body", BODY);
  74.         //创建随机订单号
  75.         String tradeNo = UUID.randomUUID().toString().replace("-", "");
  76.         map.put("out_trade_no", tradeNo);
  77.         //FEE_TYPE=CNY 代表人民币
  78.         map.put("fee_type", FEE_TYPE);
  79.         //价格
  80.         map.put("total_fee", String.valueOf(price));
  81.         //微信对商户后台的回调接口，更新订单状态
  82.         map.put("notify_url", NOTIFY_URL);
  83.         map.put("trade_type", TRADE_TYPE);
  84.         map.put("product_id", String.valueOf(activityId));
  85.         //执行统一下单
  86.         Map<String, String> result = wxPay.unifiedOrder(map);
  87.         log.info("微信下单:{}", result);
  88.         if (result != null) {
  89.             //保存订单号
  90.             result.put("trade_no", tradeNo);
  91.             //创建课程订单
  92.             Timestamp now = Timestamp.valueOf(LocalDateTime.now());
  93.             UserCourseOrder order = new UserCourseOrder(System.currentTimeMillis(), userId, courseId, activityId, 1L, 0, tradeNo, price, now, now, 0);
  94.             orderServiceFeignClient.makeOrder(order);
  95.             //减少课程库存
  96.             courseServiceFeignClient.reduceStock(activityId);
  97.             //发送订单号，超时会进入死信队列
  98.             rabbitTemplate.convertAndSend(RabbitMQConfig.ORDER_EXCHANGE, RabbitMQConfig.ORDER_QUEUE_KEY, tradeNo,
  99.                     //消息的后置处理
  100.                     message -> {
  101.                         message.getMessageProperties().setMessageId(UUID.randomUUID().toString());
  102.                         //设置消息超时
  103.                         message.getMessageProperties().setExpiration(String.valueOf(30 * 1000));
  104.                         return message;
  105.                     });
  106.             log.info("完成下单，订单：{}", result);
  107.         }
  108.         return result;
  109.     }
  110.  
  111.     @Override
  112.     public void makeQRCode(String url, HttpServletResponse response) {
  113.         //通过支付链接生成二维码
  114.         HashMap<EncodeHintType, Object> hints = new HashMap<>();
  115.         hints.put(EncodeHintType.CHARACTER_SET, "UTF-8");
  116.         hints.put(EncodeHintType.ERROR_CORRECTION, ErrorCorrectionLevel.M);
  117.         hints.put(EncodeHintType.MARGIN, 2);
  118.         try {
  119.             //把code_url包装到二维码图片
  120.             BitMatrix bitMatrix = new MultiFormatWriter().encode(url, BarcodeFormat.QR_CODE, 200, 200, hints);
  121.             MatrixToImageWriter.writeToStream(bitMatrix, "PNG", response.getOutputStream());
  122.             log.info("创建二维码完成");
  123.         } catch (Exception e) {
  124.             e.printStackTrace();
  125.         }
  126.     }
  127.  
  128.     @Override
  129. /**
  130.  * 检查订单状态
  131.  */
  132.     public String checkWxOrder(String tradeNo) throws Exception {
  133.         MyWXPayConfig config = new MyWXPayConfig();
  134.         WXPay pay = new WXPay(config);
  135.         Map<String, String> map = new HashMap<>();
  136.         map.put("appid", config.getAppID());
  137.         map.put("mch_id", config.getMchID());
  138.         map.put("nonce_str", WXPayUtil.generateNonceStr());
  139.         map.put("out_trade_no", tradeNo);
  140.         map.put("sign", SIGN);
  141.         //查询订单
  142.         Map<String, String> res = pay.orderQuery(map);
  143.         String state = res.get("trade_state");
  144.         log.info("订单" + tradeNo + ",状态" + state);
  145.         return state;
  146.     }
  147.  
  148.     @Override
  149.     public void wxpayCallback(HttpServletRequest request, HttpServletResponse response) throws Exception {
  150.         //获得微信传来的xml字符串
  151.         String str = Streams.asString(request.getInputStream());
  152.         //将字符串xml转换为Map
  153.         Map<String, String> map = WXPayUtil.xmlToMap(str);
  154.         //给微信发送消息
  155.         response.getWriter().println("<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>");
  156.         //读取订单号
  157.         String tradeNo = map.get("out_trade_no");
  158.         //查询课程id
  159.         ResponseEntity<UserCourseOrder> entity = orderServiceFeignClient.getOrderByTradeNo(tradeNo);
  160.         UserCourseOrder order = entity.getBody();
  161.         //增加课程销量
  162.         log.info("课程id为" + order.getCourseId());
  163.         log.info("order:" + order);
  164.         courseServiceFeignClient.addCourseSales(order.getCourseId());
  165. //        //修改订单状态为已支付
  166.         order.setStatus(1);
  167.         orderServiceFeignClient.changeOrderStatus(order);
  168.         log.info("支付成功：{}", order);
  169.     }
  170.  
  171.  
  172. }

创建订单功能详解： 

public static final String BODY = "dmdd";

app的名字，随便取。

public static final String FEE_TYPE = "CNY";

表示支付的货币类型是人民币。

//回调接口的URL
public static final String NOTIFY_URL = "http://ygp8pz.natappfree.cc/wxpay/callback";

 

 微信服务会跟我们的后端发送一个一个请求，告诉我们商户支付结果，因为企业内部都是把服务部署到内网里面，所以想要微信访问就得用内网穿透这种技术，顾名思义就是外网可以访问内网。

//微信对商户后台的回调接口，更新订单状态
map.put("notify_url", NOTIFY_URL);

创建订单的时候把回调url的信息也存入订单中

那么如何内网穿透？

到natapp官网申请隧道，下载软件

"http://ygp8pz.natappfree.cc/wxpay/callback"

表示从外网访问 内网7777服务器内的wxpay/callback的请求。

 

 嫌麻烦这一块也可以不搞，不影响微信支付的功能。

订单创建返回结果如下，红色框框勾出来的url就是调用微信支付功能的url，我们需要把这个url转换成二维码

 创建二维码核心功能：

//把code_url包装到二维码图片
BitMatrix bitMatrix = new MultiFormatWriter().encode(url, BarcodeFormat.QR_CODE, 200, 200, hints);
MatrixToImageWriter.writeToStream(bitMatrix, "PNG", response.getOutputStream());
log.info("创建二维码完成");

创建二维码图片的核心功能。

 返回订单状态核心功能：

public static final String SIGN = "5E00F9************************8";

认证签名，只有正确的签名wx才会接受你的返回

WXPay pay = new WXPay(config);
//查询订单
Map<String, String> res = pay.orderQuery(map);

得到wx返回给我们的支付状态，不懂？看下面

支付有没有成功，看上面的打印就知道了。玩过连连看的，应该都看得懂。 

注：大伙应该都点过外卖，在支付超时的时间之内，每隔一段时间就会通知我们支付结果。

成功结果返回核心功能： 

根据自己的实际需求来。

controller层：

  1. package com.dmdd.edupayservice.controller;
  2.  
  3. import com.dmdd.edupayservice.service.IWxPayService;
  4. import lombok.extern.slf4j.Slf4j;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.util.StringUtils;
  7. import org.springframework.web.bind.annotation.PostMapping;
  8. import org.springframework.web.bind.annotation.RequestMapping;
  9. import org.springframework.web.bind.annotation.RestController;
  10.  
  11. import javax.servlet.http.HttpServletRequest;
  12. import javax.servlet.http.HttpServletResponse;
  13. import java.util.Map;
  14. @RestController
  15. @Slf4j
  16. @RequestMapping("wxpay")
  17. public class WXOrderController {
  18. @Autowired
  19. private IWxPayService payService;
  20.  
  21.     /**
  22.      * 微信下单
  23.      */
  24.     @PostMapping("makeOrder")
  25.     public Map<String,String> makeOrder(Long userId, Long courseId, Long activityId, Long price) throws Exception {
  26.         //微信下单
  27.         return payService.makeWxOrder(userId,courseId, activityId, price);
  28.     }
  29.  
  30.     /**
  31.      * 生成支付二维码
  32.      * @param url
  33.      * @param response
  34.      */
  35.     @RequestMapping("code")
  36.     public void createWxPayCode(String url, HttpServletResponse response){
  37.         //创建支付二维码
  38.         payService.makeQRCode(url,response);
  39.         log.info("生成微信支付二维码：{}",url);
  40.     }
  41.  
  42.  
  43.     /**
  44.      * 检查订单状态
  45.      */
  46.     @RequestMapping("checkOrder")
  47.     public String checkOrder(String tradeNo) throws Exception {
  48.         if (StringUtils.isEmpty(tradeNo)) {
  49.             return null;
  50.         }
  51.         String status = payService.checkWxOrder(tradeNo);
  52.         log.info("检查订单{} 状态：{}",tradeNo,status);
  53.         return status;
  54.     }
  55.  
  56.     /**
  57.      * 微信支付平台支付成功的回调
  58.      * @param request
  59.      * @param response
  60.      * @throws Exception
  61.      */
  62.     @RequestMapping("callback")
  63.     public void paySuccessCallback(HttpServletRequest request, HttpServletResponse response) throws Exception {
  64.         payService.wxpayCallback(request,response);
  65.     }
  66. }

 以上的代码还包含与实际业务有关的其他功能 比如rabbitmq的死信队列 分布式feign调用等，可以注释掉不使用

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号