Java+Vue对接支付宝和微信支付

最新推荐文章于 2026-07-04 08:21:57 发布

原创

最新推荐文章于 2026-07-04 08:21:57 发布 · 348 阅读

1、支付宝支付对接

1.1需要先开通商户账号，然后开通对应的支付

1.2 创建支付宝开放平台账号

然后根据指南进行对应操作 https://opendocs.alipay.com/open/03lo17?pathHash=2a9f174b
在控制台创建应用
在这里插入图片描述

1.3 秘钥加密

在这里插入图片描述

秘钥工具： https://opendocs.alipay.com/open/02np9g?pathHash=b87f0c98

1.2 创建沙箱环境

文档：https://opendocs.alipay.com/common/02kkv7?pathHash=8fd32ef6

1. 打开沙箱，进入接口调试界面

在这里插入图片描述
进入接口调试界面，检测接口是否可用，如果检测通过，那么我们就可以直接进行调用了

2. 然后根据文档调用对应的接口

在这里插入图片描述

3. java代码

3.1 appid，私钥，公钥

拿取沙箱中的appid
在这里插入图片描述
从接口加签里面点击查看秘钥，然后进行复制应用公钥，以及java语言的私钥

在这里插入图片描述

3.2 使用下面的代码进行沙箱测试

依赖

        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>4.34.0.ALL</version>
        </dependency>

package com.shop_generator;

import com.alipay.api.AlipayApiException;
import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.AlipayConfig;
import com.alipay.api.domain.AlipayTradePagePayModel;
import com.alipay.api.response.AlipayTradePagePayResponse;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.alipay.api.domain.GoodsDetail;

import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.stereotype.Component;

import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.ArrayList;
import java.util.List;

@SpringBootTest(classes = AlipayTradePagePay.TestConfig.class)
public class AlipayTradePagePay {
   
   

    // 创建测试配置类
    @SpringBootApplication
    static class TestConfig {
   
   
    }

    @Value("${pay.alipay.publicKey}")
    private String publicKey;

    @Value("${pay.alipay.privateKey}")
    private  String privateKey;

    @Value("${pay.alipay.appid}")
    private  String appid;

    @Test
    public  void test() throws AlipayApiException {
   
   
        // 初始化SDK
        AlipayClient alipayClient = new DefaultAlipayClient(getAlipayConfig());

        // 构造请求参数以调用接口
        AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
        AlipayTradePagePayModel model = new AlipayTradePagePayModel();

        // 设置商户订单号
        model.setOutTradeNo("20150320010101002");

        // 设置订单总金额
        model.setTotalAmount("10000");

        // 设置订单标题
        model.setSubject("Iphone6 16G");

        // 设置产品码
        model.setProductCode("FAST_INSTANT_TRADE_PAY");

        // 设置PC扫码支付的方式
        model.setQrPayMode("1");

        // 设置商户自定义二维码宽度
        model.setQrcodeWidth(100L);

        // 设置订单包含的商品列表信息
        List<GoodsDetail> goodsDetail = new ArrayList<GoodsDetail>();
        GoodsDetail goodsDetail0 = new GoodsDetail();
        goodsDetail0.setGoodsName("ipad");
        goodsDetail0.setAlipayGoodsId("20010001");
        goodsDetail0.setQuantity(1L);
        goodsDetail0.setPrice("2000");
        goodsDetail0.setGoodsId("apple-01");
        goodsDetail0.setGoodsCategory("34543238");
        goodsDetail0.setCategoriesTree("124868003|126232002|126252004");
        goodsDetail0.setShowUrl("http://www.alipay.com/xxx.jpg");
        goodsDetail.add(goodsDetail0);
        model.setGoodsDetail(goodsDetail);

        // 设置订单绝对超时时间
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
        String expireTime = LocalDateTime.now().plusMinutes(30).format(formatter);
        model.setTimeExpire(expireTime);

        // 设置请求后页面的集成方式
        model.setIntegrationType("PCWEB");

        // 设置请求来源地址
        model.setRequestFromUrl("https://");

        // 设置商户门店编号
        model.setStoreId("NJ_001");

        // 设置商户的原始订单号
        model.setMerchantOrderNo("20161008001");

        request.setBizModel(model);
//        AlipayTradePagePayResponse response = alipayClient.pageExecute(request, "POST");
        // 如果需要返回GET请求，请使用
         AlipayTradePagePayResponse response = alipayClient.pageExecute(request, "GET");
        String pageRedirectionData = response.getBody();
        System.out.println(pageRedirectionData);

        if (response.isSuccess()) {
   
   
            System.out.println("调用成功");
        } else {
   
   
            System.out.println("调用失败");
        }
    }

    private AlipayConfig getAlipayConfig() {
   
   
        AlipayConfig alipayConfig = new AlipayConfig();
//        alipayConfig.setServerUrl("https://openapi.alipay.com/gateway.do"); // 生产环境
        alipayConfig.setServerUrl("https://openapi-sandbox.dl.alipaydev.com/gateway.do"); // 沙箱环境
        alipayConfig.setAppId(appid);
        alipayConfig.setPrivateKey(privateKey);
        alipayConfig.setFormat("json");
        alipayConfig.setAlipayPublicKey(publicKey);
        alipayConfig.setCharset("UTF-8");
        alipayConfig.setSignType("RSA2");
        return alipayConfig;
    }
}

3.3 复制成功生成的链接到浏览器上面

在这里插入图片描述
这样就是生成成功了
其他报错根据对应的响应错误进行对应的修改

3.4 下载沙箱应用登录支付宝账号，沙箱工具哪里下载支付宝沙箱，使用对应的买家账号登录然后进行支付

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fcbb2493969b45239c077f12f552d4ea.png

3.5 Java集成支付宝支付实战

1. 添加依赖

        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>4.34.0.ALL</version>
        </dependency>

2. 支付宝配置文件

pay:
  alipay:
    #应用公钥
    publicKey:''
    #私钥
    privateKey: ''
    appid: '你的应用ID'
    #环境
    server-url: https://openapi-sandbox.dl.alipaydev.com/gateway.do
    #回调通知
     notify-url: https://your-domain.com/api/payment/alipay/notify
    #支付成功返回地址
    return-url: https://your-domain.com/api/payment/alipay/return

3. 支付宝配置类

@Slf4j
@Configuration
@Data
public class AlipayTradeConfig {
   
   

    @Value("${pay.alipay.appid}")
    private String appId;

    @Value("${pay.alipay.privateKey}")
    private String privateKey;

    @Value("${pay.alipay.publicKey}")
    private String publicKey;

    @Value("${pay.alipay.server-url:https://openapi-sandbox.dl.alipaydev.com/gateway.do}")
    private String serverUrl;

    @Value("${pay.alipay.notify-url}")
    private String notifyUrl;

    @Value("${pay.alipay.return-url}")
    private String returnUrl;

    private static final String CHARSET = "UTF-8";
    private static final String SIGN_TYPE = "RSA2";

    /**
     * 注入支付宝核心配置到 Spring 容器
     */
    @Bean
    public AlipayConfig alipaySdkConfig() {
   
   
        AlipayConfig alipayConfig = new AlipayConfig();
        alipayConfig.setServerUrl(serverUrl);
        alipayConfig.setAppId(appId);
        alipayConfig.setPrivateKey(privateKey);
        alipayConfig.setFormat("json");
        alipayConfig.setAlipayPublicKey(publicKey);
        alipayConfig.setCharset(CHARSET);
        alipayConfig.setSignType(SIGN_TYPE);
        return alipayConfig;
    }

    /**
     * 支付宝回调参数验签
     */
    public boolean verifyAlipaySignature(Map<String, String> params) {
   
   
        if (params == null || params.isEmpty()) {
   
   
            log.error("支付宝验签失败：回调参数为空");
            return false;
        }

        try {
   
   
            boolean signVerified = AlipaySignature.rsaCheckV1(
                    params,
                    publicKey, // 使用配置的公钥
                    CHARSET,
                    SIGN_TYPE
            );

            if (!signVerified) {
   
   
                log.error("支付宝签名验证失败，回调参数：{}", params);
                return false;
            }

            log.info("支付宝签名验证成功");
            return true;

        } catch (AlipayApiException e) {
   
   
            log.error("支付宝签名验证异常，回调参数：{}", params, e);
            return false;
        }
    }
}

4. 支付宝支付服务

@Service
@Slf4j
public class AlipayService {
   
   
    
    @Autowired
    private AlipayTradeConfig alipayTradeConfig;
    
    /**
     * 创建支付宝支付
     */
    public String createPayment(String orderNo, BigDecimal amount, String subject) {
   
   
        try {
   
   
            AlipayClient alipayClient = new DefaultAlipayClient(alipayTradeConfig.getAlipaySdkConfig());

            AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();
            AlipayTradePagePayModel model = new AlipayTradePagePayModel();

            // 设置支付参数
            model.setOutTradeNo(orderNo);
            model.setTotalAmount(amount.setScale(2, RoundingMode.HALF_UP).toString());
            model.setSubject(subject);
            model.setProductCode("FAST_INSTANT_TRADE_PAY");

            // 设置超时时间
            String expireTime = LocalDateTime.now().plusMinutes(30)
                    .format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
            model.setTimeExpire(expireTime);

            // 设置回调地址
            request.setNotifyUrl(alipayTradeConfig.getNotifyUrl());
            request.setReturnUrl(alipayTradeConfig.getReturnUrl());
            request.setBizModel(model);

            // 调用支付宝接口
            AlipayTradePagePayResponse response = alipayClient.pageExecute(request, "POST");

            if (response.isSuccess()) {
   
   
                return response.getBody();
            } else {
   
   
                log.error("支付宝支付调用失败: {}", response.getSubMsg());
                throw new RuntimeException("支付创建失败: " + response.getSubMsg());
            }

        } catch (AlipayApiException e) {
   
   
            log.error("支付宝支付异常", e);
            throw new RuntimeException("支付系统异常");
        }
    }
    
    /**
     * 处理支付宝异步通知
     */
    public boolean handleNotify(Map<String, String> params) {
   
   
        // 验证签名
        if (!alipayTradeConfig.verifyAlipaySignature(params)) {
   
   
            return false;
        }
        
        String tradeStatus = params.get("trade_status");
        String outTradeNo = params.get("out_trade_no");
        String tradeNo = params.get("trade_no");
        
        log.info("支付宝异步通知: outTradeNo={}, tradeStatus={}", outTradeNo, tradeStatus);
        
        // 处理支付成功逻辑
        if ("TRADE_SUCCESS".equals(tradeStatus) || "TRADE_FINISHED".equals(tradeStatus)) {
   
   
            // 这里调用业务逻辑处理支付成功
            processPaymentSuccess(outTradeNo, tradeNo);
            return true;
        }
        
        return false;
    }
    
    /**
     * 查询支付状态
     */
    public AlipayTradeQueryResponse queryPayment(String orderNo) {
   
   
        try {
   
   
            AlipayClient alipayClient = new DefaultAlipayClient(alipayTradeConfig.getAlipaySdkConfig());
            
            AlipayTradeQueryRequest request = new AlipayTradeQueryRequest();
            AlipayTradeQueryModel model = new AlipayTradeQueryModel();
            model.setOutTradeNo(orderNo);
            request.setBizModel(model);
            
            return alipayClient.execute(request);
            
        } catch (AlipayApiException e) {
   
   
            log.error("查询支付状态失败: {}", orderNo, e);
            throw new RuntimeException("查询支付状态失败");
        }
    }
    
    private void processPaymentSuccess(String orderNo, String tradeNo) {
   
   
        // 支付成功业务逻辑
        log.info("处理支付成功: orderNo={}, tradeNo={}", orderNo, tradeNo);
        // 这里实现你的业务逻辑，比如更新订单状态等
    }
}

5. 支付控制器

@RestController
@RequestMapping("/api/payment")
@Slf4j
public class PaymentController {
   
   
    
    @Autowired
    private AlipayService alipayService;
    
    /**
     * 创建支付宝支付
     */
    @PostMapping("/alipay/create")
    public Map<String, Object> createAlipayPayment(@RequestBody Map<String, Object> request) {
   
   
        String orderNo = (String) request.get("orderNo");
        BigDecimal amount = new BigDecimal(request.get("amount").toString());
        String subject = (String) request.get("subject");
        
        try {
   
   
            String paymentForm = alipayService.createPayment(orderNo, amount, subject);
            
            Map<String, Object> response = new HashMap<>();
            response.put("success", true);
            response.put("orderNo", orderNo);
            response.put("paymentForm", paymentForm);
            return response;
            
        } catch (Exception e) {
   
   
            Map<String, Object> response = new HashMap<>();
            response.put("success", false);
            response.put("error", e.getMessage());
            return response;
        }
    }
    
    /**
     * 支付宝异步通知
     */
    @PostMapping("/alipay/notify")
    public String alipayNotify(HttpServletRequest request) {
   
   
        Map<String, String> params = getRequestParams(request);
        
        boolean success = alipayService.handleNotify(params);
        return success ? "success" : "failure";
    }
    
    /**
     * 支付宝同步返回
     */
    @GetMapping("/alipay/return")
    public String alipayReturn(HttpServletRequest request) {
   
   
        Map<String, String> params = getRequestParams(request);
        log.info("支付宝同步返回: {}", params);
        
        // 这里可以跳转到前端页面
        return "支付处理完成";
    }
    
    /**
     * 查询支付状态
     */
    @GetMapping("/alipay/query/{orderNo}")
    public Map<String, Object> queryPayment(@PathVariable String orderNo) {
   
   
        try {
   
   
            AlipayTradeQueryResponse response = alipayService.queryPayment(orderNo);
            
            Map<String, Object> result = new HashMap<>();
            result.put("success", response.isSuccess());
            result.put("tradeStatus", response.getTradeStatus());
            result.put("tradeNo", response.getTradeNo());
            result.put("totalAmount", response.getTotalAmount());
            return result;
            
        } catch (Exception e) {
   
   
            Map<String, Object> result = new HashMap<>();
            result.put("success", false);
            result.put("error", e.getMessage());
            return result;
        }
    }
    
    private Map<String, String> getRequestParams(HttpServletRequest request) {
   
   
        Map<String, String> params = new HashMap<>();
        Enumeration<String> parameterNames = request.getParameterNames();
        
        while (parameterNames.hasMoreElements()) {
   
   
            String name = parameterNames.nextElement();
            params.put(name, request.getParameter(name));
        }
        return params;
    }
}

3.6 前端调用代码

1. API 服务 (alipayApi.js)

// 创建支付宝支付
export function createAlipayPayment(orderNo, amount, subject) {
   
   
  return fetch('/api/payment/alipay/create', {
   
   
    method: 'POST',
    headers: {
   
   
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
   
   
      orderNo,
      amount,
      subject
    })
  }).then(response => response.json());
}

// 查询支付状态
export function queryPaymentStatus(orderNo) {
   
   
  return fetch(`/api/payment/alipay/query/${
     
     orderNo}`)
    .then(response => response.json());
}

2. 支付组件 (AlipayPayment.vue)

<template>
  <div class="payment-container">
    <div class="payment-card">
      <!-- 订单信息展示 -->
      <div class="order-info">
        <h2 class="title">订单支付</h2>
        <div class="info-item">
          <span class="label">订单号：</span>
          <span class="value">{
  
  { orderInfo.orderNo }}</span>
        </div>
        <div class="info-item">
          <span class="label">商品名称：</span>
          <span class="value">{
  
  { orderInfo.subject }}</span>
        </div>
        <div class="info-item amount">
          <span class="label">支付金额：</span>
          <span class="value">¥{
  
  { orderInfo.amount }}</span>
        </div>
      </div>

      <!-- 支付方式选择 -->
      <div class="payment-method">
        <h3>选择支付方式</h3>
        <div class="method-list">
          <div 
            class="method-item"
            :class="{ active: selectedMethod === 'alipay' }"
            @click="selectedMethod = 'alipay'"
          >
            <img src="@/assets/alipay-logo.png" alt="支付宝" class="method-logo">
            <span>支付宝支付</span>
            <i class="check-icon" v-if="selectedMethod === 'alipay'">✓</i>
          </div>
        </div>
      </div>

      <!-- 支付按钮 -->
      <div class="payment-action">
        <button 
          class="pay-btn" 
          :disabled="loading" 
          @click="handlePayment"
        >
          <span v-if="loading" class="loading-spinner"></span>
          {
  
  { loading ? '支付中...' : `确认支付 ¥${orderInfo.amount}` }}
        </button>
        <p class="tip">支付即代表您已同意《用户支付协议》</p>
      </div>

      <!-- 支付结果 -->
      <div v-if="paymentResult" class="payment-result">
        <div :class="['result-message', paymentResult.success ? 'success' : 'error']">
          <i :class="paymentResult.success ? 'icon-success' : 'icon-error'"></i>
          <span>{
  
  { paymentResult.message }}</span>
        </div>
        <div v-if="paymentResult.success" class="result-action">
          <button class="btn-primary" @click="goToOrderDetail">查看订单</button>
          <button class="btn-secondary" @click="goToHome">返回首页</button>
        </div>
      </div>
    </div>

    <!-- 支付宝支付表单（隐藏） -->
    <div v-if="alipayForm" v-html="alipayForm" class="hidden-form"></div>
  </div>
</template>

<script>
import {
     
      createAlipayPayment, queryPaymentStatus } from '@/api/alipayApi'

export default {
     
     
  name: 'PaymentPage',
  data() {
     
     
    return {
     
     
      orderInfo: {
     
     
        orderNo: '',
        amount: 0,
        subject: ''