Spring Boot + Vue实现支付宝扫码支付（沙箱环境）

最新推荐文章于 2024-04-01 16:58:30 发布
最新推荐文章于 2024-04-01 16:58:30 发布
阅读量5.1k 收藏 50
点赞数 13
分类专栏： java 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46178852/article/details/119390877
版权

1. 什么是支付宝扫码支付？

       现如今，手机支付已相当普遍，而作为开发人员应该对手机支付操作有所了解。而支付宝接口是支付宝提供的一个接口，用来对接软件应用程序在进行金钱交易使用。然后对于编程爱好者而言，想学习这一点就有点难，因为要想使用支付宝接口，必须前提是使用软件应用程序，软件应用程序需要向支付宝申请，提交一系列资料，这一点是实现不了的。这就对开发者增加了一定的难度，因为产品没有上线，然后需要对接支付宝接口就是很大的问题，所以出现了沙箱环境，具有虚拟的用户和管理员账户，进行实验测试是否对接成功。

2. 使用技术 + 编程软件

  1. idea + SpringBoot
  2. vue + ElementUI + vue-Qr (vue生成二维码框架)
  3. Sunny-Ngrok (内网穿透服务，用于支付宝回调)
  4. WebSocket (实现前端响应)

3. 步骤

  1. 准备沙箱环境
  2. 后端接口配置
  3. 前端页面设计
  4. 结果测试
  5. 注意要点

3.1.1. 准备沙箱环境

       支付宝开放平台

       官网：https://open.alipay.com/platform/home.htm

在这里插入图片描述
       进入管理中心

       这里是创建应用的地方，也就是说有项目要上线时，在这里申请。
在这里插入图片描述
       找到沙箱环境

  • 将这个页面往下拉，找到研发服务，进入里面
    在这里插入图片描述
  • 沙箱环境
    在这里插入图片描述
    我这边的沙箱环境是配置好了的，需要知道如何配置沙箱环境的话可访问：

       沙箱环境：https://opendocs.alipay.com/open/200/105311

       注意：请将应用公钥和私钥保存好，后面会用到

3.2. 后端接口配置

接口配置前的准备

3.2.1. 引入依赖
<!-- 支付宝支付 -->
<dependency>
    <groupId>com.alipay.sdk</groupId>
    <artifactId>alipay-sdk-java</artifactId>
    <version>4.15.14.ALL</version>
</dependency>
<!-- websocket依赖 -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
3.2.2. 支付宝回调对象的封装

封装好对象，支付宝回调的时候就不需要我们手动获取参数了

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;

import java.io.Serializable;

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class AliReturnPay implements Serializable {
    private static final long serialVersionUID = 8683949075381016639L;
    // 开发者的app_id
    private String app_id;
	// 商户订单号
    private String out_trade_no;
	// 签名
    private String sign;
	// 交易状态
    private String trade_status;
	// 支付宝交易号
    private String trade_no;
	// 交易的金额
    private String total_amount;
}
3.2.3. 编写 WebSocket 工具类
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint("/bindingRecord")
@Component
@Slf4j
public class WebSocket {

    private Session session;
    private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();

    /**
     * 新建webSocket配置类
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    /**
     * 建立连接
     * @param session
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSockets.add(this);
        log.info("【新建连接】，连接总数:{}", webSockets.size());
    }

    /**
     * 断开连接
     */
    @OnClose
    public void onClose(){
        webSockets.remove(this);
        log.info("【断开连接】，连接总数:{}", webSockets.size());
    }

    /**
     * 接收到信息
     * @param message
     */
    @OnMessage
    public void onMessage(String message){
        log.info("【收到】，客户端的信息:{}，连接总数:{}", message, webSockets.size());
    }

    /**
     * 发送消息
     * @param message
     */
    public void sendMessage(String message){
        log.info("【广播发送】，信息:{}，总连接数:{}", message, webSockets.size());
        for (WebSocket webSocket : webSockets) {
            try {
                webSocket.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                log.info("【广播发送】，信息异常:{}", e.fillInStackTrace());
            }
        }
    }

}

3.2.4. 支付接口配置

3.2.4.1. 编辑支付接口
@Autowired 
private WebSocket webSocket;	// 导入刚刚写好的 WebSocket 工具类
// 支付宝网关：沙箱环境 (真实环境的话改外：https://openapi.alipay.com/gateway.do)
private static final String URL = "https://openapi.alipaydev.com/gateway.do";
// APPID (请自行填写，真实环境请做对应修改)
private static final String APP_ID = "";
// 应用私钥 (请自行填写，真实环境请做对应修改)
private static final String APP_PRIVATE_KEY = "";
// 数据返回的格式 (只支持json格式)
private static final String FORMAT = "json";
// 验签编码 (根据需要修改)
private static final String CHARSET = "UTF-8";
// 支付宝公钥 (请自行填写，真实环境请做对应修改)
private static final String ALIPAY_PUBLIC_KEY = "";
// 验签加密方法 (根据需要修改)
private static final String SIGN_TYPE = "RSA2";

@ApiOperation(value = "支付宝支付 沙箱环境")
@PostMapping("/sandboxPay")
public String sandboxPay() throws AlipayApiException{
    AlipayClient alipayClient = new DefaultAlipayClient(URL,APP_ID,APP_PRIVATE_KEY,FORMAT,CHARSET,ALIPAY_PUBLIC_KEY,SIGN_TYPE);
    AlipayTradePrecreateRequest alipayRequest = new AlipayTradePrecreateRequest();
    // 设置支付宝异步通知回调地址 (注意：这个网址必须是可以通过外网访问的网址)
    alipayRequest.setNotifyUrl("");
    alipayRequest.setBizContent ( "{"   +
            "\"out_trade_no\":\"123456\"," + // 商户订单号
            "\"total_amount\":\"88.88\"," +	// 商品价格
            "\"subject\":\"测试\"," +	// 商品标题
            "\"store_id\":\"公司名\"," +	// 组织或公司名
            "\"timeout_express\":\"90m\"}" );	// 订单有效时间
    AlipayTradePrecreateResponse response = alipayClient.execute (alipayRequest);
    // 返回支付宝支付网址，用于生成二维码
    String qr = response.getQrCode();
    return qr;
}

注意： 支付回调网址必须是可以外网访问的网址，后面会使用 Sunny-Ngrok (内网穿透服务) 去实现

3.2.4.2. 编写支付回调接口 (异步通知)
@ApiOperation(value = "支付宝支付 异步通知")
@PostMapping("/call")
public void call(HttpServletRequest request, HttpServletResponse response, AliReturnPay aliReturnPay) throws IOException {
    // 通知返回的数据会封装到 AliReturnPay 类中
    response.setContentType("type=text/html;charset=UTF-8");
    String orderNo = aliReturnPay.getOut_trade_no(); // 获得订单号，对数据进行修改
    // 支付成功的返回码
    if (("TRADE_SUCCESS").equals(aliReturnPay.getTrade_status())){
        // 向前端发送一条支付成功的通知
        webSocket.sendMessage("true");
    }
}

注意点： 由于通知的代码只能本地访问，而支付宝通知需要一个外网可以访问的地址。我们在编码阶段项目是没有上线的，外网访问不到，这里我们就可以使用 Sunny-Ngrok (内网穿透服务) 进行测试操作

枚举名称枚举说明
WAIT_BUYER_PAY交易创建，等待买家付款。
TRADE_CLOSED未付款交易超时关闭，或支付完成后全额退款。
TRADE_SUCCESS交易支付成功。
TRADE_FINISHED交易结束，不可退款。

不同的枚举通知需要在对应的业务中使用

详情可参考：https://opendocs.alipay.com/open/203/105286

3.2.4.3. 实现外网访问接口 (Sunny-Ngrok)
特点
  • 提供免费内网穿透服务，免费服务器支持绑定自定义域名
  • 管理内网服务器，内网web进行演示
  • 快速开发微信程序和第三方支付平台调试
  • 本地WEB外网访问、本地开发微信、TCP端口转发
  • 本站新增FRP服务器，基于 FRP 实现https、udp转发
  • 无需任何配置，下载客户端之后直接一条命令让外网访问您的内网不再是距离

使用教程：https://www.ngrok.cc/_book/general/open.html

  • 登录成功后可去隧道管理开通隧道
    在这里插入图片描述
  • 购买服务：服务是免费的，所有速度方面有点慢，但不影响测试
    在这里插入图片描述
  • 开通成功后前往隧道管理进行查看
    在这里插入图片描述
  • 下载客户端
    在这里插入图片描述
  • 根据需求选择客户端
    在这里插入图片描述
    在这里插入图片描述
  • 下载之后得到两个文件，可以通过cmd命令行进到sunny.exe所在的目录执行
sunny.exe clientid 隧道id

在这里插入图片描述
这个网址代表的就是你本地项目的服务名和端口号

当内网穿透配置好后

支付接口中的 alipayRequest.setNotifyUrl("") 填写对应的网址就可以实现异步通知啦

3.3. 前端页面编写

前端需要导入二维码生成的组件

3.3.1. 二维码组件导入安装
npm install vue-qr --save

二维码样式设计参考：https://www.jianshu.com/p/ef5803f2b96b

3.3.2. 编写支付页面
<template>
  <div id="orderDiv">
    <el-button @click="toPayment" type="primary">去支付</el-button>
    <el-dialog
      title="支付宝扫码支付"
      :visible.sync="dialogVisible"
      width="252px"
      center>
      <!--二维码生成-->
      <vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="this.$store.state.logoUrl"></vueQr>
      <span id="dialogSpan" v-show="paySucc == true"></span>
      <span id="dialogSpan2" v-show="paySucc == true">
        <i class="el-icon-success" style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;"/>
        <br/>
        支付成功
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import vueQr from 'vue-qr'
  import axios from 'axios'
  export default {
    components:{
      vueQr
    },
    data(){
      return{
        dialogVisible: false,
        qr: "",
        paySucc: false
      }
    },
    methods: {
      toPayment(){
        let _this = this;
        // 这里填写后台支付的地址
        axios({
          method: 'POST',
          url: "/yixue/service-order/web/order/sandboxPay",
        }).then(res => {
          this.qr = res.data.data.qr;
          if ("WebSocket" in window) {
            // 打开一个 web socket
            // 通道地址按照项目进行配置
            var ws = new WebSocket("ws://localhost:8301/bindingRecord");
            ws.onopen = function() {
              // Web Socket 已连接上，使用 send() 方法发送数据
              // ws.send("data");
              // alert("数据发送中...");
            };
            ws.onmessage = function(evt) {
              var received_msg = evt.data;
              // 接收后台推送的数据
              // alert("数据已接收..." + evt.data);
              if (Boolean(evt.data)) {
                _this.paySucc = true;
                setTimeout(() => {
                  _this.dialogVisible = false;
                }, 3 * 1000);
              }
              ws.close();
            };
            ws.onclose = function() {

            };
          } else {
            // 浏览器不支持 WebSocket
            alert("您的浏览器不支持 WebSocket!");
          }
        });
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>
  #dialogSpan{
    display: inline-block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 80px;
    right: 27px;
    opacity:0.9;
    background-color: #FFFFFF;
  }
  #dialogSpan2{
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 124px;
    right: 80px;
    font-size: 20px;
    text-align: center;
  }
</style>
3.4. 结果测试

在这里插入图片描述

  • 手机扫码
    在这里插入图片描述
    在这里插入图片描述
    使用思路： 前端先创建websocket , 连接到后端websocket ，这样才能将websocket通道连接。当支付成功之后，后端向前端反馈支付成功信息，前端监控接收到消息后做处理，即关闭二维码对话框。

3.5. 注意要点

  1. 在后台接口进行配置的时候，一定要注意应用公钥和应用私钥是否可以成功配对，不然会报验签失败的错误，可去支付宝秘钥生成器进行检查

  2. notifyUrl使用的url是外网地址，并不是IP地址，否则会无法回调。但是在学习环境下使用不了外网地址。这里我们使用 Sunny-Ngrok 内网穿透服务实现

  3. 支付成功后，回调函数执行了，如何告诉前端我已经支付成功，同时关闭扫描二维码按钮，这里就用到了websocket,这里不详细介绍websocket是什么，只要知道一点，它是可以监听到后端是否发送信息。

    想详细了解的话，可以去菜鸟教程学习。

好啦！到了这一步相信你已经测试成功啦！后续项目上线根据需求修改就好

参考文档： https://blog.csdn.net/qq_30385099/article/details/109089450

一源星河
关注
  • 13
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
专栏目录
SpringBoot+Vue支付宝沙箱支付
06-16
SpringBoot+Vue支付宝沙箱支付
2024年最新版 springboot+vue整合支付宝沙箱支付功能，一步一步带您实现完整的支付宝支付功能
weixin_52536274的博客
01-14 3981
本文介绍了如何使用Springboot与Vue整合支付宝沙箱支付功能，知识点含有内网穿透等，详细的与您一同实现支付功能！如遇到问题可以在评论区留言1
SpringBoot实现支付宝沙箱支付
最新发布
p13993233504的博客
04-01 1031
springboot、支付宝沙箱、VUE
springboot+vue+对接支付宝接口+二维码扫描支付（沙箱环境）
互联网编程爱好者
10-15 6097
1. 什么是支付宝接口（沙箱环境）？ 记录时间：2020年10月15日3:55 现如今，手机支付已相当普遍，而作为开发人员应该对手机支付操作有所了解。而支付宝接口是支付宝提供的一个接口，用来对接软件应用程序在进行金钱交易使用。然后对于编程爱好者而言，想学习这一点就有点难，因为要想使用支付宝接口，必须前提是使用软件应用程序，软件应用程序需要向支付宝申请，提交一系列资料，这一点是实现不了的。这就对开发者增加了一定的难度，因为产品没有上线，然后需要对接支付宝接口就是很大的问题，所以出现了沙箱环境，具有虚拟的
Vue+SpringBoot实现支付宝沙箱支付
Fekerkk的博客
05-12 3671
首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来： 在你配置好AlipayConfig这个文件后，就可以写前端的逻辑了，前端是采用支付宝的页面如下： 下面展示一些 内联代码片。 /* 以下是支付确认html */ <div style="text=#000000 bgColor=#ffffff leftMargin=0 topMargin=4"> <h
沙箱支付宝支付 SpringBoot+Vue前后端分离项目 实战
杨杨吖的博客
07-17 3277
沙箱支付宝支付 SpringBoot+Vue前后端分离项目 实战
springboot2.x+vue3.x整合支付宝支付
05-31
基于springboot2.x和vue3.x整合开发的支付宝支付功能，实现了支付宝中的当面付和网站支付以及退款
一文教你怎么获得支付宝沙箱环境账号，刷着马爸爸的10000元大红包
weixin_44684539的博客
09-07 6968
该博客是本人在做一个项目过程时需要集成支付宝支付，所以申请了一个沙箱账号，下面是申请流程。 首先进入到支付宝金服开放平台，用自己的账户登入该平台。 然后会让你选择一个服务范围，如果是个人开发就可以选择第一个自研开发服务，后一个要求账号是企业账号。下面填写自己的信息即可点击确认加入。 加入成功后如图所示： 页面下拉，进入研发服务： 进入该页面后会出现APPID，支付宝网关和密钥等信息。然后点击密钥后面的设置按钮 选择密钥生成器，然后根据自己的系统选择对应的下载方式。 安装并运行下载得
支付宝扫码支付(沙箱环境)
qq_47750283的博客
07-26 1912
支付宝扫码支付（沙箱环境） 编写时间：2021年7月23日 什么是支付宝扫码支付？ ​ 现如今，手机支付已相当普遍，而作为开发人员应该对手机支付操作有所了解。而支付宝接口是支付宝提供的一个接口，用来对接软件应用程序在进行金钱交易使用。然后对于编程爱好者而言，想学习这一点就有点难，因为要想使用支付宝接口，必须前提是使用软件应用程序，软件应用程序需要向支付宝申请，提交一系列资料，这一点是实现不了的。这就对开发者增加了一定的难度，因为产品没有上线，然后需要对接支付宝接口就是很大的问题，所以出现了沙箱环境
申请支付宝授权，提现测试环境步骤
warm_day的博客
12-06 2331
申请支付宝授权，提现测试环境步骤: 1.登陆自己的支付宝账号: https://developers.alipay.com/dev/workspace/register?from=http%3A%2F%2Fopen.alipay.com%2Fplatform%2FdeveloperIndex.htm 2.填写自己的信息 3.点击做下角第一个，进入沙箱环境 4.进入沙箱环境后，选择沙箱账号，找到买家信息，把自己的账号余额清0，方便测试 5.测试支付宝授权的时候，用自己沙箱环境的买家账号登陆就可以啦 .
Spring Boot项目实现微信和支付宝支付
orton777的博客
07-04 1015
微信和支付宝支付
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）
01-21
1. 什么是支付宝接口（沙箱环境）？ 记录时间：2020年10月15日3:55 现如今，手机支付已相当普遍，而作为开发人员应该对手机支付操作有所了解。而支付宝接口是支付宝提供的一个接口，用来对接软件应用程序在进行...
毕业设计基于Spring Boot+Vue的电影院购票系统项目源码+数据库
09-28
修改后端配置文件中的数据库连接信息、邮箱信息、Minio信息和支付宝沙箱信息 项目启动后，使用admin管理员账号登录后台，密码为123456 项目特点 后台管理基于若依二次开发，含有侧边栏，历史标签，面包屑等 采用 ...
SpringBoot + Vue快速整合，实现微信支付、支付宝支付项目源码
02-17
支付宝采用沙箱环境开发，既有代码实现，也有功能测试。 payment-demo：支付项目后端代码 涉及技术：SpringBoot、MySQL、Maven、Lombok、Swagger、MyBatis-Plus Gson、WxPay-SDK、AliPay-SDK payment-demo-...
SpringBoot+Vue+App+硬件实现的智能家居系统，一套带走
05-11
产品管理： 产品、产品物模型、产品分类、产品固件、设备授权码、自定义告警等 设备管理： 设备控制、设备分组、设备定时、设备日志、监测统计、设备定位、设备分享、设备禁用、OTA升级、实时状态、影子模式、实时...
springboot+vue
qq_48602526的博客
11-19 8260
用springboot+vue做的一个简单的练手项目
SpringBoot+Vue整合支付宝沙箱支付
weixin_51324855的博客
04-11 6069
SpringBoot+Vue2整合实现支付宝沙箱支付 原创不易，转载请注明！！原创不易，转载请注明！！原创不易，转载请注明！！原创不易，转载请注明！！原创不易，转载请注明！！ 在进行电脑网站开发时我们常常需要用到支付宝支付，接下来我将带领大家使用springboot+vue整合支付宝沙箱支付 1.支付宝开放平台注册沙箱账号 登录 支付宝开放平台，创建应用并提交审核，审核通过后会生成应用唯一标识 APPID，并且可以申请开通开放产品使用权限。通过 APPID 应用才能调用开放产品的接口能力 卖家账号 商家
spring boot + vue + Elment调用支付宝沙箱环境实现支付、查询功能
weixin_44001878的博客
07-23 2615
工作需要调用支付宝支付接口，相比微信支付接口，支付宝真的是很简便了。 支付宝可以使用沙箱环境来进行调试，微信支付接口没有支付测试环境，要调用只能通过官方平台注册企业开发用户。 直接上正题： 本人开发环境： 使用IDEA、JDK-9 第一次调用准备工作： 下载密钥工具，生成公钥、密钥 官方说明文档和密钥工具下载地址 下载完成后： 生成所需密钥和公钥 来到沙箱环境： 将生成的密钥上传到沙箱环境中： 在调用接口时需要用到的还有APPID，这个是你在程序中配置支付参数时需要填写的，可以在沙箱环境中看到。 上述
搭建SpringBoot+Vue框架
zd15690912965的博客
10-08 6120
自己学习框架做项目
spring boot + vue实现.xlsx文件下载
04-30
要实现spring boot和vue结合下载.xlsx文件，需要在后端和前端各进行一些步骤。 首先，在后端spring boot中，需要写一个controller用于提供下载接口。这个controller要使用ResponseEntity来构造下载文件响应。在ResponseEntity的构造函数中，需要将下载的文件以byte数组的形式传入，并设置Content-Disposition头部，指定下载文件的名字和类型。在这个controller中还需要设置跨域请求头，以确保能够正确访问接口。 其次，在前端vue中，需要通过axios发送下载请求。在axios中，需要指定接口地址，并且设置响应的responseType为'blob'，用于接收文件流。返回的文件流可以通过URL.createObjectURL()方法创建下载链接，然后使用a标签的download属性进行下载。 最后，需要在vue页面中添加下载按钮，并在点击事件中触发axios请求下载接口。在下载完成后，可以将a标签隐藏或者移除。 总结来说，实现spring boot和vue结合下载.xlsx文件，需要在后端编写相应的controller，设置下载响应和跨域请求头；在前端使用axios发送请求并处理接收到的文件流，最后通过a标签进行下载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值