SpringBoot集成支付宝前后端交接支付（附代码）

专注学习java

已于 2022-05-05 09:33:17 修改

阅读量920

点赞数 1

分类专栏：外部交互文章标签： vue spring boot

于 2021-03-23 22:01:59 首次发布

本文链接：https://blog.csdn.net/weixin_45969142/article/details/115146936

版权

外部交互专栏收录该内容

6 篇文章 0 订阅

订阅专栏

刚了解支付宝支付的人，可以看我这篇博客：https://blog.csdn.net/weixin_45969142/article/details/113803038

前言

继上一篇博客简单的demo实现完之后，发现那个项目离前后端交接还是有点距离。所以，我写了这篇博客。

接下来的步骤，其实跟上篇博客差不多

后端

1.添加依赖

 <!--支付宝sdk依赖-->
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>3.1.0</version>
        </dependency>

2.编写配置文件

import org.springframework.context.annotation.Configuration;

@Configuration
public class AlipayConfig {

    // AppId
    public static String app_id = "2021000117611220";

    // 商户私钥  自己生成啊
    public static  String merchant_private_key = "*******";

    // 支付宝公钥
    public static  String alipay_public_key = "*********";

    // 服务器异步通知页面路径
    public static  String notify_url = "http://www.baidu.com";

    // 页面跳转同步通知页面路径，回调地址
    public static  String return_url = "http://www.baidu.com";

    // 字符编码格式
    public static  String charset = "UTF-8";

    // 数据格式
    public static  String format = "json";

    // 签名方式
    public static  String sign_type = "RSA2";

    // 支付宝网关
    public static String gateway = "https://openapi.alipaydev.com/gateway.do";
}

2.编写Vo层（这里用了Swagger,但是我注释，关系不大）

import lombok.Data;
//import io.swagger.annotations.ApiModel;
//import io.swagger.annotations.ApiModelProperty;

@Data
public class AliPayVo {
    //唯一订单号
    //@ApiModelProperty(value = "商户订单号")
    private String out_trade_no;

   //@ApiModelProperty(value = "付款金额")
    private String total_amount;

   //@ApiModelProperty(value = "订单名称")
    private String subject;

    //@ApiModelProperty(value = "商品描述")
    private String body;

}

3.编写server层

import com.retallife.user.pojo.aliPay.AliPayVo;


public interface PayService {
    //支付
    public Object AliPay(AliPayVo aliPayVo) throws Exception;
}

编写Impl

import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.retallife.user.config.AlipayConfig;
import com.retallife.user.pojo.aliPay.AliPayVo;
import com.retallife.user.service.AliPay.PayService;
import org.springframework.stereotype.Service;

@Service
public class PayServiceImpl implements PayService {

    public Object AliPay(AliPayVo aliPayVo) throws Exception {

        //获得初始化的AlipayClient
        AlipayClient alipayClient = new DefaultAlipayClient(
                AlipayConfig.gateway,
                AlipayConfig.app_id,
                AlipayConfig.merchant_private_key,
                "json",
                AlipayConfig.charset,
                AlipayConfig.alipay_public_key,
                AlipayConfig.sign_type
        );
        //设置请求参数
        AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
        alipayRequest.setReturnUrl(AlipayConfig.return_url);
        alipayRequest.setNotifyUrl(AlipayConfig.notify_url);

        alipayRequest.setBizContent("{\"out_trade_no\":\""+aliPayVo.getOut_trade_no() +"\","
                + "\"total_amount\":\""+ aliPayVo.getTotal_amount() +"\","
                + "\"subject\":\""+ aliPayVo.getSubject() +"\","
                + "\"body\":\""+ aliPayVo.getBody() +"\","
                + "\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");
        //请求
        String result = alipayClient.pageExecute(alipayRequest).getBody();
        return result;
    }
}

4.编写controller

import com.retallife.user.pojo.aliPay.AliPayVo;
import com.retallife.user.service.AliPay.PayService;
import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.text.SimpleDateFormat;
import java.util.Date;

@RestController
@CrossOrigin
//@Api(tags = "支付信息类")
//@RequestMapping(method = {RequestMethod.POST, RequestMethod.GET})
public class PayController {

    @Autowired
    private PayService payService;
    /**
     * 下单支付
     */
    @RequestMapping("AliPay")
    public Object pay(@RequestBody  AliPayVo aliPayVo) throws Exception {
        Date date = new Date();
        //可以方便地修改日期格式
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyyMMdd HHmmss");
        //转换格式为yyyyMMdd
        String Out_trade_no = dateFormat.format(date);
        //根据时间设置唯一订单号，精确到秒
        aliPayVo.setOut_trade_no(Out_trade_no);

        System.out.println("执行了支付");
        return payService.AliPay(aliPayVo);
    }

}

前端：(我用了Vue)

<template>
    <div id="app"><!-- action="http://localhost:8888/pay" -->
        <el-form ref="ruleForm" label-width="100px"
                 class="demo-ruleForm">
            <el-form-item>
                <el-col :span="10">
                    <el-form-item>
                        <el-input v-model="total_amount" placeholder="请输入付款金额">
                            <template slot="prepend">付款金额</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item>
                        <el-input v-model="subject" placeholder="请输入订单名称">
                            <template slot="prepend">订单名称</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-col :span="10">
                    <el-form-item>
                        <el-input v-model="body" placeholder="请输入商品描述">
                            <template slot="prepend">商品描述</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <el-form-item style="text-align: center;">
                <el-button type="primary" @click="submitForm(total_amount,subject,body)">立即创建</el-button><!--  style="display:none" -->
            </el-form-item>

        </el-form>

    </div>
</template>

<script>
    export default {
        name: "applyText",
        data() {
            return {
                    total_amount: '',
                    subject: '',
                    body: ''
            }
        },
        /**-----【方法列表】-----**/
        methods: {
            /**【form表单数据提交】**/
            submitForm(total_amount,subject,body) {
                console.log("total_amount:" + total_amount)
                console.log("subject:" + subject)
                console.log("body:" + body)
                this.$axios.post("http://localhost:8081/AliPay", {
                    total_amount: total_amount,
                    subject: subject,
                    body: body
                }).then(function (response) {
                    console.log("【支付宝返回】" + response.data);
                    //这里是跳转新的页面
                    document.querySelector('body').innerHTML = response;
                    const div = document.createElement('div');
                    div.innerHTML = response.data;
                    document.body.appendChild(div);
                    
                    // _blank -- 在新窗口中打开链接 
				   // _parent -- 在父窗体中打开链接 
				   // _self -- 在当前窗体打开链接,此为默认值 
				  // _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
                    document.forms[0].setAttribute('target', '_blank');// 新建窗口页面
                    document.forms[0].submit();

                }).catch(function(error) {
                    console.log(error)
                })

            },
        }
    }
</script>

<style scoped>
</style>

结果为：

在这里插入图片描述

专注学习java

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot集成支付宝前后端交接支付（附代码）

刚了解支付宝支付的人，可以看我这篇博客：https://blog.csdn.net/weixin_45969142/article/details/113803038前言继上一篇博客简单的demo实现完之后，发现那个项目离前后端交接还是有点距离。所以，我写了这篇博客。接下来的步骤，其实跟上篇博客差不多后端1.添加依赖  <dependency> <groupId>com.alipay.s
复制链接

扫一扫