源码

前端

vue-demo

https://www.aliyundrive.com/s/dmnY8G6N6RM

点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

后端

aliPay https://www.aliyundrive.com/s/H2JFBjGWuf2

点击链接保存，或者复制本段内容，打开「阿里云盘」APP ，无需下载极速在线查看，视频原画倍速播放。

简介

前端使用vue框架和elementUI

后端使用springboot框架

准备工作

支付宝沙箱使用

1.进入支付宝开放平台网页，https://open.alipay.com/

2.登录，点击右上角控制台

 3.页面拉倒最底部左下角，开发工具推荐栏目，点击沙箱

 4.创建应用

5.查看公钥和私钥

点击查看 

以上信息后台配置会用到

 下载沙箱支付宝

1.点击沙箱工具

 2.选择支付宝客户端沙箱板

 3.扫码下载

 沙箱支付宝账号

1.点击沙箱账号

2.右侧信息

 3.进行充值

点击买家信息栏目下充值按钮

 4.登录沙箱客户端

使用买家信息栏目下的账号和密码，登录沙箱支付宝客户端

内网穿透

推荐一款免费内网穿透工具 网云穿

 下载客户端，安装配置本地后台ip和端口

配置映射

 点击确定，生成记录

 3.点击启动

 映射地址就是公网域名，默认端口是80

vue项目

执行命令下载依赖库

npm install

 进行依赖版本审核重新拉取不满足的库版本

npm audit fix

启动vue项目

npm run serve

启动后的效果：

页面

springboot项目 

 配置application.properties

server.port= 8080
#应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
ALIPAY.APPID=
#//商户私钥，您的PKCS8格式RSA2私钥
ALIPAY.PRIVATEKEY=
#支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥
ALIPAY.PUBLICKEY=
#服务器异步通知页面路径
ALIPAY.NOTIFY_URL=http://内网穿透公网域名/pay/notify
ALIPAY.RETURNA_URL=http://内网穿透公网域名/pay/return
#签名方式
ALIPAY.SIGN=RSA2
#字符编码格式
ALIPAY.CHARSET=utf-8
#支付宝网关
ALIPAY.gatewayUrl=

正常启动项目

流程

点击立即购买

 选择支付宝，并点击主要按钮

 打开沙箱支付宝进行扫码支付，过程有可能出现异常，多测试几次即可，由于阿里沙箱环境不稳定原因导致。

扫码支付

使用沙箱支付宝正常付款即可，网页会正常跳转