Springboot + vue 实现支付宝支付
一.引入alipay的pom依赖包
<!-- https://mvnrepository.com/artifact/com.alipay.sdk/alipay-sdk-java -->
<dependency>
<groupId>com.alipay.sdk</groupId>
<artifactId>alipay-sdk-java</artifactId>
<version>4.9.124.ALL</version>
</dependency>
<!-- 因为sdk有用这个包，所以需要有这个的哦。不过一般springboot项目已经自己引入了，就不用引入-->
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1.1</version>
</dependency>
<!-- JSONObject -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.28</version>
</dependency>
二.配置alipay.properties
# 应用ID,您的APPID，收款账号既是您的APPID对应支付宝账号
alipayconfig.app_id = ""
# 商户私钥，您的PKCS8格式RSA2私钥
alipayconfig.merchant_private_key = ""
# 支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。
alipayconfig.alipay_public_key = ""
# 服务器异步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数
alipayconfig.notify_url = http://localhost:8080/#/
# 页面跳转同步通知页面路径 需http://格式的完整路径，不能加?id=123这类自定义参数
alipayconfig.return_url = http://localhost:8080/#/
# 签名方式
alipayconfig.sign_type = RSA2
# 字符编码格式
alipayconfig.charset = utf-8
# 支付宝网关
alipayconfig.gatewayUrl = https://openapi.alipaydev.com/gateway.do
# 支付宝网关
alipayconfig.log_path = "C:\\"
三.配置支付宝的AlipayConfig
package com.payment_service.config;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.PropertySource;
import org.springframework.stereotype.Component;
import java.io.Serializable;
@Configuration
@ConfigurationProperties(prefix = "alipayconfig",ignoreUnknownFields = false)
@PropertySource("classpath:alipay.properties")//读取配置文件
@Component
public class AlipayConfig implements Serializable {
// 应用ID
private String app_id;
//商户私钥
private String merchant_private_key;
//支付宝公钥
private String alipay_public_key;
//服务器异步通知页面路径
private String notify_url;
//页面跳转同步通知页面路径
private String return_url;
//签名方式
private String sign_type;
//字符编码格式
private String charset;
//支付宝网关
private String gatewayUrl;
/** 格式 */
private String formate = "json";
private String log_path;
//get set我这就不生成了 也可使用lombok插件
}
四.支付实体对象
package com.payment_service.pojo;
/*支付实体对象*/
public class AlipayBean {
/*商户订单号，必填*/
private String out_trade_no;
/*订单名称，必填*/
private String subject;
/*付款金额，必填*/
private StringBuffer total_amount;
/*商品描述，可空*/
private String body;
/*超时时间参数*/
private String timeout_express="10m";
private String product_code="FAST_INSTANT_TRADE_PAY";
}
五.编写Service层
package com.payment_service.service.impl;
import com.alibaba.fastjson.JSON;
import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradeWapPayModel;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.payment_service.config.AlipayConfig;
import com.payment_service.pojo.AlipayBean;
import com.payment_service.service.PaymentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.context.properties.EnableConfigurationProperties;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.util.Map;
//开启注解扫描配置文件
@EnableConfigurationProperties(AlipayConfig.class)
@Service
public class PaymentServiceImpl implements PaymentService {
@Autowired
AlipayConfig alipayConfig;
@Override
public String toAlipay(AlipayBean alipayBean) throws IOException {
AlipayClient alipayClient = new DefaultAlipayClient(
alipayConfig.getGatewayUrl(),//支付宝网关
alipayConfig.getApp_id(),//appid
alipayConfig.getMerchant_private_key(),//商户私钥
alipayConfig.getFormate(),
alipayConfig.getCharset(),//字符编码格式
alipayConfig.getAlipay_public_key(),//支付宝公钥
alipayConfig.getSign_type());//签名方式
//2、设置请求参数
AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
//页面跳转同步通知页面路径
alipayRequest.setReturnUrl(alipayConfig.getReturn_url());
// 服务器异步通知页面路径
alipayRequest.setNotifyUrl(alipayConfig.getNotify_url());
//封装参数
alipayRequest.setBizContent(JSON.toJSONString(alipayBean));
String result="";
try {
//3、请求支付宝进行付款，并获取支付结果
result = alipayClient.pageExecute(alipayRequest).getBody();
} catch (AlipayApiException e) {
e.printStackTrace();
}
//返回付款信息
return result;
}
}
}
@RestController
public class PaymetController {
@Autowired
private PaymentService paymentService;
@Autowired
AlipayConfig alipayConfig;
@PostMapping("alipay")
public String toAlipay(@RequestBody AlipayBean alipayBean) throws IOException {
String result = paymentService.toAlipay(alipayBean);
return result;
}
六.Vue页面
<template>
<div class="main">
商户订单<input v-model="out_trade_no"><br>
订单名称<input v-model="subject"><br>
付款金额<input v-model="total_amount"><br>
商品描述<input v-model="body"><br>
<el-button v-on:click="pay" type="success" round>支付宝支付</el-button>
</div>
</template>
<script>
export default {
data() {
return {
out_trade_no:'',
subject:'',
total_amount:'',
body:''
}
},
methods: {
pay:function(){
this.$axios.post('alipay',{
out_trade_no:this.out_trade_no,subject:this.subject,total_amount:this.total_amount,body:this.body}).then(successResponse=>{
document.querySelector('body').innerHTML = successResponse.data;//查找到当前页面的body，将后台返回的form替换掉他的内容
document.forms[0].submit(); //执行submit表单提交，让页面重定向，跳转到支付宝页面
}).
catch();
},
}
}
</script>
}
七.运行与调试
在浏览器输入http://localhost:8080/，由于是在沙箱环境下，不能进行支付，但支付宝支付功能已经开发完成，后续可申请企业认证，在正式环境下根据具体业务场景进行支付成功后的业务处理。
附上整体的一个结构图
