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

springboot+Vue项目对接支付宝(最新)_vue+springboot实现支付功能

作者：运维做开发 | 2024-07-10 01:01:50

赞

踩

vue+springboot实现支付功能

 一、需要准备的内容

1.支付宝沙箱环境（需要获取应用ID、应用私钥、支付宝公钥、支付宝网关地址）

在支付宝沙箱网站登录自己的支付宝来获取以上四个参数，网址为https://openhome.alipay.com/develop/sandbox/app

登录进入该网站后

​

点开查看公钥

​

2.内网穿透

网址为https://natapp.cn/，登录进去后申请一个免费的隧道

然后点击客户端下载，根据自己的操作系统进行下载

注意：下载后只有natapp.exe一个文件，点开会闪退，此时还需要配置文件

将本地端口修改后就可以了，点击保存后返回到以上界面复制authtoken，填写至config.ini的相应位置即可

详细内容可以阅读文档https://natapp.cn/article/config_ini

注意：下载config.ini时浏览器可能会显示不安全无法下载，建议使用谷歌浏览器 

下载congfig.ini文件至natapp.exe一个包内，打开config.ini文件配置以下内容

  1. #将本文件放置于natapp同级目录 程序将读取 [default] 段
  2. #在命令行参数模式如 natapp -authtoken=xxx 等相同参数将会覆盖掉此配置
  3. #命令行参数 -config= 可以指定任意config.ini文件
  4. [default]
  5. authtoken=                      #对应一条隧道的authtoken
  6. clienttoken=                    #对应客户端的clienttoken,将会忽略authtoken,若无请留空,
  7. log=none                        #log 日志文件,可指定本地文件, none=不做记录,stdout=直接屏幕输出 ,默认为none
  8. loglevel=ERROR                  #日志等级 DEBUG, INFO, WARNING, ERROR 默认为 DEBUG
  9. http_proxy=                     #代理设置 如 http://10.123.10.10:3128 非代理上网用户请务必留空

保存配置后点击natapp，

 

需要的内容就是红框里面的网址后加  /alipay/notify
 

以上步骤完成后需要在Java项目的application.yml文件当中写入以下内容
 

  1. alipay:
  2.   appId:  #获取到的id
  3.   appPrivateKey:  #自己的应用私钥
  4.   alipayPublicKey:  #支付宝公钥
  5.   notifyUrl:  #
 

​
 

3.jar包的下载
 

下载地址为https://repo1.maven.org/maven2/cn/hutool/hutool-all/5.8.16/hutool-all-5.8.16.jar
 

下载的路径为本地maven包内
 

4.添加依赖项
 

我添加的如下所示
 

  1.         <dependency>
  2.             <groupId>com.alipay.sdk</groupId>
  3.             <artifactId>alipay-sdk-java</artifactId>
  4.             <version>4.35.79.ALL</version>
  5.         </dependency>
  6.  
  7.         <dependency>
  8.             <groupId>cn.hutool</groupId>
  9.             <artifactId>hutool-all</artifactId>
  10.             <version>4.1.2</version>
  11.         </dependency>
 

至此准备工作完成！
 

二、后端代码的编写
 

1.AlipayConfig
 

  1. package com.example.mybatisplus.common.config;
  2.  
  3. import org.springframework.boot.context.properties.ConfigurationProperties;
  4. import org.springframework.stereotype.Component;
  5. @Component
  6. @ConfigurationProperties(prefix = "alipay")
  7. public class AlipayConfig {
  8.     // 支付宝的AppId
  9.     private String appId;
  10.     // 应用私钥
  11.     private String appPrivateKey;
  12.     // 支付宝公钥
  13.     private String appPublicKey;
  14.     //支付宝通知本地的接口完整地址
  15.     private String notifyUrl;
  16.  
  17.     public String getAppId(){
  18.         return appId;
  19.     }
  20.  
  21.     public void setAppId(String appId) {
  22.         this.appId = appId;
  23.     }
  24.  
  25.     public String getAppPrivateKey() {
  26.         return appPrivateKey;
  27.     }
  28.  
  29.     public void setAppPrivateKey(String appPrivateKey) {
  30.         this.appPrivateKey = appPrivateKey;
  31.     }
  32.  
  33.     public String getAppPublicKey() {
  34.         return appPublicKey;
  35.     }
  36.  
  37.     public void setAppPublicKey(String appPublicKey) {
  38.         this.appPublicKey = appPublicKey;
  39.     }
  40.  
  41.     public String getNotifyUrl(){
  42.         return notifyUrl;
  43.     }
  44.  
  45.     public void setNotifyUrl(String notifyUrl) {
  46.         this.notifyUrl = notifyUrl;
  47.     }
  48. }
 

2.AlipayController类
 

  1. package com.example.mybatisplus.web.controller;
  2.  
  3. import cn.hutool.json.JSONObject;
  4. import com.alipay.api.AlipayApiException;
  5. import com.alipay.api.AlipayClient;
  6. import com.alipay.api.DefaultAlipayClient;
  7. import com.alipay.api.internal.util.AlipaySignature;
  8. import com.alipay.api.request.AlipayTradePagePayRequest;
  9. import com.example.mybatisplus.common.config.AlipayConfig;
  10. import com.example.mybatisplus.model.domain.Orders;
  11. import com.example.mybatisplus.service.OrdersService;
  12. import org.springframework.web.bind.annotation.GetMapping;
  13. import org.springframework.web.bind.annotation.PostMapping;
  14. import org.springframework.web.bind.annotation.RequestMapping;
  15. import org.springframework.web.bind.annotation.RestController;
  16.  
  17. import javax.annotation.Resource;
  18. import javax.servlet.http.HttpServletRequest;
  19. import javax.servlet.http.HttpServletResponse;
  20. import java.util.HashMap;
  21. import java.util.Map;
  22.  
  23. @RestController
  24. @RequestMapping("/alipay")
  25. public class AliPayController {
  26.  
  27.     // 支付宝沙箱网关地址
  28.     private static final String GATEWAY_URL = "https://openapi-sandbox.dl.alipaydev.com/gateway.do";
  29.     private static final String FORMAT = "JSON";
  30.     private static final String CHARSET = "UTF-8";
  31.     private static final String SIGN_TYPE = "RSA2";
  32.  
  33.     @Resource
  34.     private AlipayConfig alipayConfig;
  35.  
  36.     @Resource
  37.     private OrdersService ordersService;
  38.  
  39.     @GetMapping("/pay") //alipay/pay?orderNo=xxx
  40.     public void pay(String oid,HttpServletResponse httpResponse) throws Exception {
  41.         //查询订单信息
  42.         Orders orders = ordersService.selectByOrderID(oid);
  43.         if(orders==null) return;
  44.         //1. 创建CLinet，通过SDK提供的Client，负责调用支付宝的API
  45.         AlipayClient alipayClient = new DefaultAlipayClient(GATEWAY_URL, alipayConfig.getAppId(),
  46.                 alipayConfig.getAppPrivateKey(), FORMAT, CHARSET, alipayConfig.getAppPublicKey(), SIGN_TYPE);
  47.  
  48.         //2. 创建Request并设置Request参数
  49.         AlipayTradePagePayRequest request = new AlipayTradePagePayRequest(); //发送请求的类
  50.         request.setNotifyUrl(alipayConfig.getNotifyUrl());
  51.         JSONObject bizContent = new JSONObject();
  52.         bizContent.put("out_trade_no", orders.getOid());  //订单编号
  53.         bizContent.put("total_amount", orders.getPrice());   //订单总金额
  54.         bizContent.put("subject", orders.getHid());  //支付的酒店名
  55.         bizContent.put("product_code", "FAST_INSTANT_TRADE_PAY");
  56.         request.setBizContent(bizContent.toString());
  57.         request.setReturnUrl("http://localhost:3000/#/main/user/myorders"); //支付成功返回至订单界面
  58.         //执行请求，拿到响应的结果，返回浏览器
  59.         String form = "";
  60.         try {
  61.             form = alipayClient.pageExecute(request).getBody();
  62.         } catch (AlipayApiException e) {
  63.             e.printStackTrace();
  64.         }
  65.         httpResponse.setContentType("text/html;charset=" + CHARSET);
  66.         httpResponse.getWriter().write(form);
  67.         httpResponse.getWriter().flush();
  68.         httpResponse.getWriter().close();
  69.     }
  70.         @PostMapping("/notify")  // 注意这里必须是POST接口
  71.         public void payNotify(HttpServletRequest request) throws Exception {
  72.             if (request.getParameter("trade_status").equals("TRADE_SUCCESS")) {
  73.                 System.out.println("=========支付宝异步回调========");
  74.                 Map<String, String> params = new HashMap<>();
  75.                 Map<String,String[]>requestParams = request.getParameterMap();
  76.                 for (String name : requestParams.keySet()) {
  77.                     params.put(name,request.getParameter(name));
  78.                 }
  79.                 String sign = params.get("sign");
  80.                 String content = AlipaySignature.getSignCheckContentV1(params);
  81.                 boolean checkSignature =AlipaySignature.rsa256CheckContent(content,sign,alipayConfig.getAppPublicKey(),"UTF-8");
  82.                 //支付宝验证
  83.                 if(checkSignature){
  84.                     //输出一些支付信息
  85.                     System.out.println("交易金额"+params.get("total_amount"));
  86.                     String oid = params.get("out_trade_no");
  87.                     Orders orders = ordersService.selectByOrderID(oid);
  88.                     orders.setStatus(2);
  89.                 }
  90.             }
  91.         }
  92. }
 

3.OrderService
 

在你原有的内容里添加一条
 

Orders selectByOrderID(String oid);
 

我的完整代码(仅供参考)
 

  1. package com.example.mybatisplus.service;
  2.  
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.example.mybatisplus.model.domain.Orders;
  5.  
  6. import javax.servlet.http.HttpServletResponse;
  7. import java.util.List;
  8.  
  9. /**
  10.  * <p>
  11.  *  服务类
  12.  * </p>
  13.  *
  14.  * @author team7
  15.  * @since 2023-01-04
  16.  */
  17. public interface OrdersService extends IService<Orders> {
  18.  
  19.     List<Orders> showorderdetail(Orders orders);
  20.  
  21.     List<Orders> showOrderDetailByHid(Orders orders);
  22.  
  23.     List<Orders> showAllOrders(Orders orders);
  24.  
  25.     Long insertOrder(Orders order);
  26.  
  27.     boolean updateOrderTo2(Orders curOid);
  28.  
  29.     boolean updateOrderTo3(Orders curOid);
  30.  
  31.     int deleteCurOrder(Orders curOid);
  32.  
  33.     void exportorders(HttpServletResponse response, Orders orders);
  34.  
  35.     void exportMorders(HttpServletResponse response, Orders orders);
  36.  
  37.     void exportHorders(HttpServletResponse response, Orders orders);
  38.  
  39.     Orders selectByOrderID(String oid);
  40. }
 

4.OrderServiceImpl
 

在你之前的代码里添加
 

  1.     @Override
  2.     public Orders selectByOrderID(String oid) {
  3.         return ordersMapper.selectById(oid);
  4.     }
 

以下是我的完整内容(仅供参考)
 

  1. package com.example.mybatisplus.service.impl;
  2.  
  3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  4. import com.example.mybatisplus.common.utls.ExcelUtil;
  5. import com.example.mybatisplus.mapper.OrdersMapper;
  6. import com.example.mybatisplus.model.domain.Orders;
  7. import com.example.mybatisplus.service.OrdersService;
  8. import org.springframework.beans.factory.annotation.Autowired;
  9. import org.springframework.stereotype.Service;
  10.  
  11. import javax.servlet.http.HttpServletResponse;
  12. import java.io.IOException;
  13. import java.util.List;
  14.  
  15. /**
  16.  * <p>
  17.  *  服务实现类
  18.  * </p>
  19.  *
  20.  * @author team7
  21.  */
  22. @Service
  23. public class OrdersServiceImpl extends ServiceImpl<OrdersMapper, Orders> implements OrdersService {
  24.  
  25.     @Autowired(required = false)
  26.  
  27.     private OrdersMapper ordersMapper;
  28.  
  29.     // 显示个人所有订单，用于用户端
  30.     @Override
  31.     public List<Orders> showorderdetail(Orders orders) {
  32.         List<Orders> orderDetail = ordersMapper.selectId(orders);
  33.         return orderDetail;
  34.     }
  35.  
  36.     // 显示酒店订单，用于酒店管理端
  37.     @Override
  38.     public List<Orders> showOrderDetailByHid(Orders orders) {
  39.         List<Orders> hotelOrderDetail = ordersMapper.selectHid(orders);
  40.         return hotelOrderDetail;
  41.     }
  42.  
  43.     // 显示所有订单，用于管理员端
  44.     @Override
  45.     public List<Orders> showAllOrders(Orders orders){
  46.         List<Orders> allOrderDetail = ordersMapper.selectAll(orders);
  47.         return allOrderDetail;
  48.     }
  49.  
  50.  
  51.  
  52.     @Override
  53.     public Long insertOrder(Orders order) {
  54.         ordersMapper.insert(order);
  55.         Long b = order.getOid();
  56.         return b;
  57.     }
  58.  
  59.     @Override
  60.     public boolean updateOrderTo2(Orders curOid) {
  61.         boolean b=ordersMapper.updateOrderTo2(curOid);
  62.         return b;
  63.     }
  64.  
  65.     @Override
  66.     public boolean updateOrderTo3(Orders curOid) {
  67.         boolean b=ordersMapper.updateOrderTo3(curOid);
  68.         return b;
  69.     }
  70.  
  71.     @Override
  72.     public void exportorders(HttpServletResponse response, Orders orders) {
  73.         List<Orders> pageList = showAllOrders(orders);
  74.         //导出
  75.         //创建表格对象
  76.         try {
  77.             ExcelUtil.exportOrders(response,pageList);
  78.         } catch (IOException e) {
  79.             e.printStackTrace();
  80.         }
  81.     }
  82.  
  83.     @Override
  84.     public void exportMorders(HttpServletResponse response, Orders orders) {
  85.         List<Orders> pageList = showorderdetail(orders);
  86.         //导出
  87.         //创建表格对象
  88.         try {
  89.             ExcelUtil.exportOrders(response,pageList);
  90.         } catch (IOException e) {
  91.             e.printStackTrace();
  92.         }
  93.     }
  94.  
  95.     @Override
  96.     public void exportHorders(HttpServletResponse response, Orders orders) {
  97.         List<Orders> pageList = showOrderDetailByHid(orders);
  98.         //导出
  99.         //创建表格对象
  100.         try {
  101.             ExcelUtil.exportOrders(response,pageList);
  102.         } catch (IOException e) {
  103.             e.printStackTrace();
  104.         }
  105.     }
  106.  
  107.     @Override
  108.     public Orders selectByOrderID(String oid) {
  109.         return ordersMapper.selectById(oid);
  110.     }
  111.  
  112.  
  113.     @Override
  114.     public int deleteCurOrder(Orders curOid) {
  115.         int b =ordersMapper.deleteById(curOid.getOid());
  116.         return  b;
  117.     }
  118.  
  119.  
  120. }
 

5.OrdersMapper
 

在你的代码基础上添加
 

  1. @Select("select * from orders where oid= #{orderNo}")
  2.     Orders selectById(String oid);
 

以下是我的完整代码(仅供参考)
 

  1. package com.example.mybatisplus.mapper;
  2.  
  3. import com.example.mybatisplus.model.domain.Orders;
  4. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  5. import org.apache.ibatis.annotations.Param;
  6. import org.apache.ibatis.annotations.Select;
  7.  
  8. import java.util.List;
  9.  
  10. /**
  11.  * <p>
  12.  *  Mapper 接口
  13.  * </p>
  14.  *
  15.  * @author team7
  16.  * @since 2023-01-04
  17.  */
  18. public interface OrdersMapper extends BaseMapper<Orders> {
  19.  
  20.     List<Orders> selectId(@Param("orders") Orders orders);
  21.  
  22.     List<Orders> selectHid(@Param("orders") Orders orders);
  23.  
  24.     List<Orders> selectAll(@Param("orders") Orders orders);
  25.  
  26.     boolean updateOrderTo2(@Param("orderData") Orders curOid);
  27.  
  28.     boolean updateOrderTo3(@Param("orderData") Orders curOid);
  29.  
  30.     @Select("select * from orders where oid= #{orderNo}")
  31.     Orders selectById(String oid);
  32. }
 

以上则是我后端代码的全部内容
 

三、前端代码的编写
 

注意：内网穿透时的端口号就是你前端代码运行的端口号，由于我用的是vue3，所以还需要在build文件夹下的webpack.dev.conf.js里面的devServer方法中添加一行，添加成功后运行vue项目就可以在你申请的网站上运行了
 

disableHostCheck:true,
 

支付订单界面的按钮部分
 

  1.             <div class="payBtn">
  2.               <el-button type="primary" @click="pay">支付</el-button>
  3.               <el-button @click="orderDialogVisible=false">取消</el-button>
  4.             </div>
 

点击支付按钮后调用pay函数
 

  1.     pay () {
  2.       window.open('http://localhost:8088/alipay/pay?oid=' + this.selectOrder.oid)
  3.     },
 

前端相关代码如下:
 

  1.           <el-button type="text" size="small" :disabled="scope.row.status!=1" @click="showNoOrder(scope.row)">支付
  2.           </el-button>
  3.           <!--          支付界面-->
  4.           <el-dialog :data="curOrder" :visible.sync="orderDialogVisible" width="60%" center
  5.                      :modal-append-to-body='false'>
  6.                <span>
  7.                 <el-descriptions width="80%" class="margin-top" title="支付订单" :column="1" border>
  8.  
  9.                   <el-descriptions-item>
  10.           <template slot="label">
  11.          <i class="el-icon-user"></i>
  12.         酒店名称
  13.          </template>
  14.            {{ curOrder.hotel }}
  15.        </el-descriptions-item>
  16.                        <el-descriptions-item>
  17.           <template slot="label">
  18.          <i class="el-icon-house"></i>
  19.             房间类型
  20.          </template>
  21.              {{ curOrder.room }}
  22.        </el-descriptions-item>
  23.                   <el-descriptions-item>
  24.           <template slot="label">
  25.          <i class="el-icon-food"></i>
  26.             有无早餐
  27.          </template>
  28.              {{ curOrder.breakfast }}
  29.        </el-descriptions-item>
  30.                        <el-descriptions-item>
  31.           <template slot="label">
  32.          <i class="el-icon-coin"></i>
  33.         需要支付金额
  34.          </template>
  35.             {{ curOrder.price }}
  36.        </el-descriptions-item>
  37.                    <el-descriptions-item>
  38.           <template slot="label">
  39.          <i class="el-icon-time"></i>
  40.         预计入住时间
  41.          </template>
  42.             {{ curOrder.checkIn }}
  43.        </el-descriptions-item>
  44.                     <el-descriptions-item>
  45.           <template slot="label">
  46.          <i class="el-icon-time"></i>
  47.         预计退房时间
  48.          </template>
  49.             {{ curOrder.checkOut }}
  50.        </el-descriptions-item>
  51.                    <el-descriptions-item>
  52.           <template slot="label">
  53.          <i class="el-icon-time"></i>
  54.         订单提交时间
  55.          </template>
  56.             {{ curOrder.time }}
  57.        </el-descriptions-item>
  58.                   </el-descriptions>
  59.                </span>
  60.             <div class="payBtn">
  61.               <el-button type="primary" @click="pay">支付</el-button>
  62.               <el-button @click="orderDialogVisible=false">取消</el-button>
  63.             </div>
  64.           </el-dialog>
 

四、数据库的内容
 

       由于在数据库设计时未考虑到实际生活中的订单会自动生成多位订单编号，所以获取订单内容的时候我拿oid凑数了，如果有需求可以将以上代码中查询oid的内容修改为查询订单编号(根据自己的需求进行更改)
 

 

五、效果展示
 

 

当我点击支付后就会根据查询到的订单内容跳转到支付界面
 

 

此处的账户密码可以使用沙箱配置时提供的账号进行测试
 

 

 

 

完成支付后会自动跳转到订单界面，至此所有流程结束。
 

配置到不同的项目里面可能会有些许的bug，细心检查修改一下一定会成功的！！！
 

六、总结
 

这是在实习过程中学习到的一点点内容，由于项目经历较少，学习这一部分内容的时候也参考了网上的一些教程，同时感谢各位博主的奉献。
 

新手小白第一次写博客，各位看官不喜勿喷！！！祝各位新年快乐

                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/804310
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号