支付宝支付的实现【沙箱】（学习笔记）

一、使用所需技术

https://open.alipay.com/

前端：vue + element-ui + vue-qr + axios
后端：spring boot
natapp 进行内网穿透
websocket 前端响应

二、沙箱环境准备

前往支付宝开放平台：https://open.alipay.com/
记录好APPID和支付宝网关地址
公钥模式点击查看配置应用公钥
点击查看接入文档有详细教程（这里就不展开了）

手机端下载沙箱支付宝

二、构建spring boot项目

1. 引入依赖

     <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--AliPay的SDK--><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><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.47</version></dependency><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>

2.配置类

import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
public class AlipayConfig {// 应用ID （填写你自己的）public static final String APP_ID = // 商户ID （填写你自己的，但是这里可以忽略）public static final String sellerId = // 支付宝网关public static final String gateway_url = "https://openapi.alipaydev.com/gateway.do";// 商户私钥 （填写你自己的）public static final String PRIVATE_KEY = // 支付宝公钥 （填写你自己的）public static final String ALIPAY_PUBLIC_KEY = // 签名方式public static final String SIGN_TYPE = "RSA2";// 字符编码格式public static final String CHARSET = "UTF-8";//返回格式public static final String FORMAT = "json";@Beanpublic AlipayClient alipayClient() {return new DefaultAlipayClient(gateway_url,APP_ID,PRIVATE_KEY,FORMAT,CHARSET,ALIPAY_PUBLIC_KEY,SIGN_TYPE);}
}

3.封装回调参数

@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
public class AlipayBean implements Serializable {private static final long serialVersionUID = 8003704888495570429L;// 开发者的app_idprivate String app_id;// 商户订单号private String out_trade_no;// 签名private String sign;// 交易状态private String trade_status;// 支付宝交易号private String trade_no;// 交易的金额private String total_amount;
}

4.控制层（连接支付宝）

@Controller
@Slf4j
public class AliPayController {@Autowiredprivate WebSocket webSocket;@Autowiredprivate AlipayClient alipayClient;@RequestMapping("/pay")@ResponseBodypublic String send(HttpServletResponse httpServletResponse) throws AlipayApiException {AlipayTradePrecreateRequest alipayRequest = new AlipayTradePrecreateRequest();//该网址需通过外网访问（进行内网穿透或部署在服务器上）alipayRequest.setNotifyUrl("");    //这里是要填的，用内网穿透开一次换一次（反正我是这样的）alipayRequest.setBizContent("{" +"\"out_trade_no\":\"999\"," +"\"total_amount\":\"9999\"," +"\"subject\":\"测试商品\"," +"\"store_id\":\"测试公司\"," +"\"timeout_express\":\"90m\"}");  //过期时间AlipayTradePrecreateResponse response = alipayClient.execute(alipayRequest);String qr = response.getQrCode();return qr;     //返回支付宝二维码的地址}@RequestMapping("/call")public void call(HttpServletRequest request, HttpServletResponse response, AlipayBean returnPay) throws IOException {response.setContentType("type=text/html;charset=UTF-8");String orderNo = returnPay.getOut_trade_no();if (("TRADE_SUCCESS").equals(returnPay.getTrade_status())) {webSocket.sendMessage("true");}}
}

5.websocket的工具类

别问。问就是复制过来的哈哈哈，想了解可以点我

/*** 服务端和客户端双向数据传输* 可以监听到后端是否发送信息*/
@ServerEndpoint("/bindingRecord")
@Component
@Slf4j
public class WebSocket {private Session session;private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();/*** 新建webSocket配置类* @return*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}/*** 建立连接* @param session*/@OnOpenpublic void onOpen(Session session) {this.session = session;webSockets.add(this);log.info("【新建连接】，连接总数:{}", webSockets.size());}/*** 断开连接*/@OnClosepublic void onClose(){webSockets.remove(this);log.info("【断开连接】，连接总数:{}", webSockets.size());}/*** 接收到信息* @param message*/@OnMessagepublic 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());}}}
}

三、内网穿透

这里使用的是NATAPP，网址链接：https://natapp.cn/
注册并认证，可以购买2条免费的隧道
下载他的客户端打开

natapp --authtoken=****

四、前端的搭建

1、下载好element-ui、axios、vue-qr

vue install ** -s

<template><div><!-- 支付按钮，模拟支付操作 --><van-button type="primary" @click="pay">支付</van-button><el-dialog :title="paySucc?'支付成功':'扫码支付'" :visible.sync="dialogVisible" width="16%" center><!-- 生成二维码图片 --><vueQr :text="text" :size="200" v-if="!paySucc"></vueQr><!-- 使用websocket监控是否扫描，扫描成功显示成功并退出界面 --><span class="iconfont icon-success" style="position: relative;font-size: 100px;color:#42B983;margin-left: 50px;top:-10px;" v-else></span></el-dialog></div>
</template><script>import vueQr from 'vue-qr'export default {data() {return {dialogVisible: false,text: "",paySucc: false}},components: {vueQr},methods: {pay() {let _this = this;_this.paySucc = false;_this.dialogVisible = true;this.axios.request("http://localhost:8081/pay").then((response) => {_this.text = response.data;_this.dialogVisible = true;//使用webSocket发送请求，下面会简单介绍websocket使用if ("WebSocket" in window) {// 打开一个 web socketvar ws = new WebSocket("ws://localhost:8081/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() {// // 关闭 websocketconsole.log("连接已关闭...");};} else {// 浏览器不支持 WebSocketalert("您的浏览器不支持 WebSocket!");}}).catch((err) => {console.log(err)})},back(dataUrl, id) {console.log(dataUrl, id)}}}
</script><style>.btn {margin-left: 100px;}
</style>

支付宝支付的实现【沙箱】（学习笔记）相关推荐

【django轻量级框架】使用支付宝支付接口（沙箱）
文章目录 1 流程 2 支付宝沙箱 1 流程需要导入模块:pip install alipay-sdk-python :pip install pycrypto 必备条件,公钥密钥 setting配 ...
一小时学会使用Springboot整合沙箱环境支付宝支付(附源码)
0.前言文章需求: 对于学生来说,目前网上确实没有比较统一而且质量好的支付教程.因为支付对个人开发者尤其是学生来说不太友好.因此,自己折腾两天,算是整理了一篇关于支付宝沙箱支付的文章. 那么为什么不 ...
TP5实现支付宝电脑网站支付学习笔记
这两天在公司做一个小型WEB项目,需要有支付功能.第一次做支付宝的支付,踩了点小坑,还算顺利.激动的我赶紧记下实现的流程. 第一步当然是在支付宝开放平台申请公钥私钥APPID等,支付宝关官方文档都有详 ...
Python学习笔记7：实操案例四（支付密码的验证，模拟QQ账号登录，商品价格竞猜，星座看运势）
Python学习笔记7:实操案例四(支付密码的验证,模拟QQ账号登录,商品价格竞猜,星座看运势) 1.支付密码的验证: 这个主要就是调用isdigit()函数判断字符串是不是全是数字组成. pwd=i ...
支付宝支付的过程 java_java实现沙箱测试环境支付宝支付（demo）和整合微信支付和支付宝支付到ssm环境全过程（附源码）...
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 一.支付宝测试环境代码测试 1.下载电脑网站的官方demo: 2.下载解压导入eclipse ...
java实现沙箱测试环境支付宝支付（demo）和整合微信支付和支付宝支付到ssm环境全过程（附源码）...
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 一.支付宝测试环境代码测试 1.下载电脑网站的官方demo: 下载地址:https://do ...
Android（java）学习笔记176：远程服务的应用场景（移动支付案例）
一. 移动支付: 用户需要在移动终端提交账号.密码以及金额等数据到远端服务器.然后远端服务器匹配这些信息,进行逻辑判断,进而完成交易,返回交易成功或失败的信息给移动终端.用户提交账号. ...
支付宝支付第一集：没有营业执照，怎样申请一个支付宝的商家号进行开发？使用支付宝支付开发网页移动应用，一分钟申请注册一个支付宝支付沙箱账号，支付宝支付入驻、创建应用、获取AppID
支付宝支付第一集:没有营业执照,怎样申请一个支付宝的商家号进行开发?使用支付宝支付开发网页&移动应用,一分钟申请注册一个支付宝支付沙箱账号,支付宝支付入驻.创建应用.获取AppID 一.资源 ...
【支付系统学习笔记】-二支付系统设计（支付产品设计）
本文属于学习笔记,首先感谢原作者:凤凰牌老熊,博客链接:http://blog.lixf.cn/ 支付产品模块是按照支付场景来为业务方提供支付服务.这个模块一般位于支付网关之后,支付渠道之前. 它根据 ...
【支付系统学习笔记】-二支付系统设计（支付网关设计）
前言: 本文属于学习笔记,首先感谢原作者:凤凰牌老熊,博客链接:http://blog.lixf.cn/ 一概述在支付系统中,支付网关和支付渠道的对接是最核心的功能.其中支付网关是对外提供服务的接 ...