前后端分离项目接入支付宝沙箱

最新推荐文章于 2024-02-10 17:30:52 发布

小林布丁

最新推荐文章于 2024-02-10 17:30:52 发布

阅读量326

点赞数

文章标签： java spring boot 开发语言

本文链接：https://blog.csdn.net/yzlhhh/article/details/133322730

版权

本文以SpringBoot+Vue为例演示

后端SpringBoot

1.首先引入依赖

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

<!-- fastjson -->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.48</version>
</dependency>

2.在pojo下创建AliPay和AliPaySync

@Data
public class AliPay {
    private static final long serialVersionUID = 1L;

    private String out_trade_no;
    
    private String subject;
    
    private String total_amount;
    
    private String body;
    
    private String timeout_express= "10m";
    
    private String product_code= "FAST_INSTANT_TRADE_PAY";
}

@Data
public class AliPaySync {
    private String notify_time;
    private String out_trade_no;
    private String trade_status;
    private String trade_no;
}

3.创建Controller层

@RestController
public class PayController {

    @Resource
    private PayService payService;

    /**
     * 阿里支付
     * @param alipay
     * @return
     * @throws AlipayApiException
     */
    @RequestMapping("/alipay")
    public Result alipay(@RequestBody AliPay alipay) throws AlipayApiException {
        String str = payService.aliPay(alipay);
        return Result.ok("跳转支付页面",str);
        //这里Result是自定义的，用于携带消息返回前端，也可以直接用map
    }
    
    @RequestMapping("/AliPayAsyncHandle")
    @ResponseBody
    public String AliPayAsyncHandle(AliPaySync aliPaySync, HttpServletRequest request) throws AlipayApiException {
        return payService.AliPayAsyncHandle(aliPaySync,request);

    }
}

4.创建service层

@Service
public class PayService {
    @Autowired
    private AlipayConfig alipayConfig;

    public String aliPay(AliPay alipay) throws AlipayApiException {
        // 1、获得初始化的AlipayClient
        String serverUrl = alipayConfig.getGatewayUrl();
        String appId = alipayConfig.getAppId();
        String privateKey = alipayConfig.getPrivateKey();
        String format = "json";
        String charset = alipayConfig.getCharset();
        String alipayPublicKey = alipayConfig.getPublicKey();
        String signType = alipayConfig.getSignType();
        String returnUrl = alipayConfig.getReturnUrl();
        String notifyUrl = alipayConfig.getNotifyUrl();
        //System.out.println(appId);
        AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, appId, privateKey, format, charset, alipayPublicKey, signType);
        // 2、设置请求参数
        AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();
        // 页面跳转同步通知页面路径
        alipayRequest.setReturnUrl(returnUrl);
        // 服务器异步通知页面路径
        alipayRequest.setNotifyUrl(notifyUrl);
        // 封装参数
        alipayRequest.setBizContent(JSON.toJSONString(alipay));
        // 3、请求支付宝进行付款，并获取支付结果
        String result = alipayClient.pageExecute(alipayRequest).getBody();
        // 返回付款信息
        return result;
    }
    
    public String AliPayAsyncHandle(AliPaySync aliPaySync, HttpServletRequest request) throws AlipayApiException {
        Map<String,String> params = new HashMap<String, String>();

        Map<String,String[]> requestMap = request.getParameterMap();

        Set<String> set = requestMap.keySet();

        Iterator<String> it = set.iterator();

        while(it.hasNext()){
            String name = it.next();
            String[] values = requestMap.get(name);
            String str = "";
            for(int i= 0;i<values.length;i++){
                if (i < values.length - 1){
                    str+=values[i]+",";
                }else{
                    str+=values[i];
                }
            }
            params.put(name,str);
        }

        //签名验证
        Boolean signVerified = AlipaySignature.
                rsaCheckV1(params,
                        "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAowVRN4EQqgwawwf9IU6WX4wsRRKQWHSVADCNEqK8NvCAcvPHWW7IJyY+APLCTkapZjBGz2r5gY/SlecpIyG63e9nZP5O/HgpIKojNIVailLc+1r2EBh4p1kfrBsQh5tIRu1xDP/1P2ZOKaIMNuci8OFuZ978El3Gp+JUfcmPi5xD084WM5Z5FP/5wRwApZTEa9/cF5h8Sr3puUVJ9H749x8iUrBAStVmm448c9skReMU8vQwPJv59ESCfHeD8TmZdPCKsCdWdtx65y4Huy9b80LRpLTpVV+VAYp7aMtyf6NWjXcvIyYCwskQ8uVfZALl11+lDWXO4/ZcHwFHrHVLeQIDAQAB",
                        "UTF-8",
                        "RSA2");
        

        if (signVerified){
            //判断支付结果
            if (aliPaySync.getTrade_status().equals("TRADE_SUCCESS") || aliPaySync.getTrade_status().equals("TRADE_FINISH")){
                System.out.println("订单号:"+aliPaySync.getOut_trade_no());
                //修改订单状态 未支付-->已支付
                //TODO
                
            }else{
                return "error";
            }
            return "success";
        }else{
            return "error";
        }
    }
}

前端Vue

1.utils下创建request.js工具

import axios from 'axios'



export function request(config) {

  // 创建axios的实例

  const instance = axios.create({


    timeout: 100000`

  })

  // axios.interceptors  全局拦截

  //请求拦截

  instance.interceptors.request.use(config => { //拦截请求

    return config //若拦截到需要原封不动的返回

  }, err => { })

  //响应拦截`

  instance.interceptors.response.use(res => {

    return res.data

  }, err => {

    console.log(err);

  })

  // 3.发送真正的网络请求

  return instance(config)



}

2.然后在src的api下创建alipay.js用于发送alipay请求

import { request } from "../utils/request";



export function alipay(params){

  return request({

    method:"post",

    url:"alipay",

    data:params

  })

}

3.创建AliPay.vue

<template>
    <div class='' v-html="payHtml">


    </div>

</template>

<script>
export default {
    data () {
        return {
            payHtml:''
        };
    },
    components: {


    },
    created() {
        console.log(this.$route.query.data)
    },
    mounted() {
        this.payHtml = this.$route.query.data
        this.$nextTick(()=> {
            document.forms[0].submit()
        })
    },
    methods: {
        
    },

};
</script>

<style lang='less' scoped>
</style>

4.创建vue完成后到index.js中注册

const routes=[

  {

    path:'/alipay',

    component:Alipay

  }

]

5.最后在订单结算界面下添加如下内容

import {alipay} from '../api/alipay'

export default {

  data () {

    return {

     out_trade_no: '',

     subject: '',

     total_amount: '',

     body: ''

    };

  }

}

四个参数：out_trade_no，subject，total_amount，body

通过alipay请求发送到后端，除body可为空外，其他三个参数必填

以下模拟数据，实际场景请换成实际需要的数据

methods: {

   toAliPay(params){

      var time = new Date()

      this.out_trade_no = time.getTime().toString();

      this.subject = "123"

      this.total_amount = "1000"

      this.body = ""

      this.pay({

       "out_trade_no":this.out_trade_no,

       "subject":this.subject,

       "total_amount":this.total_amount,

       "body":this.body

      })

   },

   pay(params){

    alipay(params).then(res=>{

      this.$router.push({

      path: '../alipay',

      query: {

       data: res.data

       }

       });

       

     })

   }

  }