SpringCloud+vue整合 支付宝沙箱支付

可以完成的功能:

SpringCloud+vue整合 支付宝沙箱支付_第1张图片SpringCloud+vue整合 支付宝沙箱支付_第2张图片

前言:

SpringCloud整合 支付宝沙箱支付需要用到支付宝官网支付宝开放平台 (alipay.com)

统一收单下单并支付页面接口 - 支付宝文档中心 (alipay.com)

支付宝开发平台密钥app以及natapp内网击穿工具

natapp是一个内网穿透工具,可以将本地运行的Web应用(或其他TCP/UDP协议应用)通过NAT转发到公网上,使得外网可以访问到本地应用。它支持多种操作系统和语言,并提供了简单易用的命令行和图形界面两种使用方式。

使用natapp,可以方便地进行本地开发测试、演示和发布等操作,无需购买云服务器或动态DNS等服务,也无需手动配置路由器端口映射等复杂操作。

natapp采用基于HTTP/HTTPS协议的反向代理技术实现内网穿透,用户只需要在本地启动一个代理客户端,然后在natapp网站上注册账号、认证域名即可获得一个唯一的隧道地址,将该地址绑定到本地应用的端口上即可实现内网穿透。natapp还支持自定义配置、多隧道管理、流量统计等功能。

需要注意的是,natapp是一个第三方工具,使用时需要考虑安全性和稳定性等因素。同时,natapp也提供了付费服务,可以获得更多的功能和优质的技术支持。

具体实现步骤

一、建表

SpringCloud+vue整合 支付宝沙箱支付_第3张图片

SpringCloud+vue整合 支付宝沙箱支付_第4张图片

二、搭建项目配置出合适的环境

三、具体功能编写

一、拉起支付

第一步,前端准备,状态展示

SpringCloud+vue整合 支付宝沙箱支付_第5张图片

第二步、单击事件绑定方法

SpringCloud+vue整合 支付宝沙箱支付_第6张图片

SpringCloud+vue整合 支付宝沙箱支付_第7张图片

第三步、后端编写Controller层指定方法

并前往官网复制示例代码

SpringCloud+vue整合 支付宝沙箱支付_第8张图片

第四步更改参数

SpringCloud+vue整合 支付宝沙箱支付_第9张图片

SpringCloud+vue整合 支付宝沙箱支付_第10张图片

SpringCloud+vue整合 支付宝沙箱支付_第11张图片

注意:

当报这个错误时NOW_TIME_AFTER_EXPIRE_TIME_ERROR

SpringCloud+vue整合 支付宝沙箱支付_第12张图片

原因为create_time字段值出错,必须是大于当前时间的值

二、异步回调

第一步、编写方法地址

SpringCloud+vue整合 支付宝沙箱支付_第13张图片

第二步、具体方法实现

Controller

SpringCloud+vue整合 支付宝沙箱支付_第14张图片

Service

SpringCloud+vue整合 支付宝沙箱支付_第15张图片

SpringCloud+vue整合 支付宝沙箱支付_第16张图片

三、掉单处理

掉单处理是在xxljob项目启动的情况下实现的,所以先启动xxljob项目启动定时任务。

(xxljob项目

SpringCloud+vue整合 支付宝沙箱支付_第17张图片

访问

http://localhost:9299/xxl-job-admin/toLogin

网址进入任务调度中心

SpringCloud+vue整合 支付宝沙箱支付_第18张图片

启动定时器

SpringCloud+vue整合 支付宝沙箱支付_第19张图片

编写Class类

SpringCloud+vue整合 支付宝沙箱支付_第20张图片

第一步,复制查询示例代码

SpringCloud+vue整合 支付宝沙箱支付_第21张图片

第二步、具体的处理掉单方法

SpringCloud+vue整合 支付宝沙箱支付_第22张图片

SpringCloud+vue整合 支付宝沙箱支付_第23张图片

四、超时关闭

超时关闭的原因与掉单处理相同,都是调用xxljob的定时任务执行方法

具体方法实现

SpringCloud+vue整合 支付宝沙箱支付_第24张图片

SpringCloud+vue整合 支付宝沙箱支付_第25张图片

五、订单退款

第一步、前端方法(与拉起支付相同,将ID回传)

SpringCloud+vue整合 支付宝沙箱支付_第26张图片

第二步、后端Controller层方法编写

2.1前往官网复制示例代码

SpringCloud+vue整合 支付宝沙箱支付_第27张图片

2.2具体实现

SpringCloud+vue整合 支付宝沙箱支付_第28张图片

SpringCloud+vue整合 支付宝沙箱支付_第29张图片

四、Xxljob定时任务项目源码

xxljob-定时任务: xxljob定时任务项目源码

你可能感兴趣的:(vue.js,前端,javascript)