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/，由于是在沙箱环境下，不能进行支付，但支付宝支付功能已经开发完成，后续可申请企业认证，在正式环境下根据具体业务场景进行支付成功后的业务处理。

附上整体的一个结构图