UniApp?+?SpringBoot?實現支付寶支付和退款功能

更新時間：2022年06月06日 10:18:11 作者：奔跑的磚頭

這篇文章主要介紹了UniApp?+?SpringBoot?實現支付寶支付和退款功能，基本的?SpringBoot?的腳手架，可以去IDEA?自帶的快速生成腳手架插件,本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧

開發(fā)準備

一臺用于支付的測試機
用于編寫的后端框架接口的 IDE （IDEA 或者 Eclipse 都可以）
HBuilder X 用來編輯 UniApp 項目的編輯器和編譯器
基本的 SpringBoot 的腳手架，可以去 https://start.spring.io/ 或者 IDEA 自帶的快速生成腳手架插件。
Jdk 11

支付寶支付開發(fā)

后端部分

在 SpringBoot 中添加以下坐標

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

<!-- 支付寶官方 SDK-->
<dependency>
    <groupId>com.alipay.sdk</groupId>
    <artifactId>alipay-sdk-java</artifactId>
    <version>4.22.32.ALL</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-configuration-processor</artifactId>
    <optional>true</optional>
</dependency>

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

在 resources 目錄下添加 application.yml 我們不去用默認的 application.properties 文件，畢竟 yml 更好看點。并在 yml 中添加以下內容

# 服務啟動端口
server:
  port: 8080

# 支付寶支付
alipay:
  server_url: https://openapi.alipay.com/gateway.do
  app_id: 企業(yè)支付的 APPID
  private_key: 申請的私鑰
  format: json
  charset: utf-8
  alipay_public_key: 申請的公鑰
  sign_type: RSA2
  notifyUrl: 回調地址

創(chuàng)建一個 AlipayConfig.java 繼承 com.alipay.api.AlipayConfig

@Getter
@Setter
@ToString
@Component
@ConfigurationProperties(prefix = "alipay")
public class AlipayConfig extends com.alipay.api.AlipayConfig {
    private String serverUrl;
    private String appId;
    private String privateKey;
    private String format;
    private String charset;
    private String alipayPublicKey;
    private String signType;
    private String notifyUrl;
}

創(chuàng)建一個 BizAlipayService.java

import com.alipay.api.AlipayApiException;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradeAppPayModel;
import com.alipay.api.request.AlipayTradeAppPayRequest;
import com.alipay.api.response.AlipayTradeAppPayResponse;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

/**
 * 阿里云支付類
 */
@Service
public class BizAlipayService {

    private static Logger logger = LoggerFactory.getLogger(BizAlipayService.class);

    @Autowired
    AlipayConfig alipayConfig;

    private DefaultAlipayClient client() throws AlipayApiException {
        return new DefaultAlipayClient(alipayConfig);
    }

    /**
     * 預下單
     *
     * @param subject     訂單標題
     * @param outTradeNo  商家生成的訂單號
     * @param totalAmount 訂單總價值
     * @return
     */
    public String appPay(String subject, String outTradeNo, String totalAmount) {
        String source = "";
        try {
            DefaultAlipayClient client = client();
            AlipayTradeAppPayModel model = new AlipayTradeAppPayModel();
            model.setSubject(subject);
            model.setOutTradeNo(outTradeNo);
            model.setTotalAmount(totalAmount);
            // alipay 封裝的接口調用
            AlipayTradeAppPayRequest request = new AlipayTradeAppPayRequest();
            request.setBizModel(model);
            request.setNotifyUrl(alipayConfig.getNotifyUrl());
            AlipayTradeAppPayResponse response = client.sdkExecute(request);
            source = response.getBody();
        } catch (AlipayApiException e) {
            logger.error("支付出現問題,詳情：{}", e.getErrMsg());
            e.printStackTrace();
        }
        return source;
    }
}

創(chuàng)建一個 AlipayController.java 來實現接口給前端調用時使用

import com.alipay.api.AlipayApiException;
import com.alipay.api.internal.util.AlipaySignature;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import java.math.BigDecimal;
import java.util.HashMap;
import java.util.Map;

@RestController
public class AlipayController {
    private static Logger logger = LoggerFactory.getLogger(AlipayController.class);

    @Autowired
    AlipayConfig alipayConfig;
    @Autowired
    BizAlipayService alipayService;

    /**
     * 支付接口
     *
     * @return
     */
    @GetMapping("/pay")
    public String orderPay() {
        String s = alipayService.appPay("測試支付", String.valueOf(System.currentTimeMillis()), new BigDecimal("0.01").toString());
        logger.info("支付生成信息：{}", s);
        return s;
    }

    /**
     * 訂單回調
     *
     * @return
     */
    @RequestMapping(method = RequestMethod.POST, value = "/notify")
    public String orderNotify(HttpServletRequest request) {
        Map<String, String> params = new HashMap<>();
        Map<String, String[]> requestParams = request.getParameterMap();
        for (String name : requestParams.keySet()) {
            String[] values = requestParams.get(name);
            String valueStr = "";
            for (int i = 0; i < values.length; i++) {
                valueStr = (i == values.length - 1) ? valueStr + values[i] : valueStr + values[i] + ",";
            }
            params.put(name, valueStr);
        }
        try {
            boolean flag = AlipaySignature.rsaCheckV1(params, alipayConfig.getAlipayPublicKey(), alipayConfig.getCharset(), alipayConfig.getSignType());
            if (flag) {
                logger.info("支付回調信息:{}", params);
                return "success";
            } else {
                return "error";
            }
        } catch (AlipayApiException e) {
            logger.error("支付寶錯誤回調:{}", e.getErrMsg());
            e.printStackTrace();
            return "error";
        }
    }
}

上面的 controller 寫了兩個接口一個用來 app端的調用，一個給支付用來回調?；卣{接口的地址要放到剛才配置中的 notifyUrl 屬性里。

由于支付寶回調要使用線上的地址作為回調地址，這里我推薦兩個解決辦法
使用一臺服務器+備案的域名搭建上面的后臺地址
使用花生殼來實現本地內網穿透

我使用的是花生殼作為本次的開發(fā)環(huán)境，啟動 springboot 的服務，配置好花生殼。后臺部分到目前為止已經結束了。

前端部分

UniApp 是一個使用Vue.js 開發(fā)所有前端應用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。
牛啊，UniApp 能打這么多的端呢，不過這次我只使用 APP 端的功能。

在 HBuilder X 中新建一個項目，我目前使用的版本 3.3.10.20220124

創(chuàng)建好項目之后，在 manifest.json 中勾選以下內容

在 index.vue 添加支付相關功能

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <button type="default" @click="goPay()">點我前去支付</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
            goPay() {
                uni.request({
                    url: "https://4789j06630.wocp.fun/pay",
                    success(res) {
                        uni.requestPayment({
                            provider: 'alipay',
                            orderInfo: res.data.data,
                            success(r) {
                                uni.showModal({
                                    content: "支付成功",
                                    showCancel: false
                                })
                            },
                            fail(e) {
                                uni.showModal({
                                    content: "支付失敗,原因為: " + e.errMsg,
                                    showCancel: false
                                })
                            },
                            complete: () => {
                                console.log("payment結束")
                            }
                        })

                    }
                })

            }
        }
    }
</script>

<style>
    page{
        background-color: #ff5500;
    }
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

點擊點我前去支付按鈕就可以打開支付寶進行支付了。查看接口返回的 log 信息

支付成功圖展示

生成預支付信息

支付成功回調

要記住里面的 trade_no 一會退款還需要這個。

以上就是支付寶支付的內容了。下面開始實現退款功能。

支付寶退款開發(fā)

后端部分

在剛才的 BizAlipayService.java 添加以下代碼

/**
 * 退款
 *
 * @param tradeNo
 * @param totalAmount
 * @return
 */
public AlipayTradeRefundResponse refund(String tradeNo, String totalAmount) {
    try {
        DefaultAlipayClient client = client();
        AlipayTradeRefundModel alipayTradeRefundModel = new AlipayTradeRefundModel();
        alipayTradeRefundModel.setTradeNo(tradeNo);
        alipayTradeRefundModel.setRefundAmount(totalAmount);

        AlipayTradeRefundRequest request = new AlipayTradeRefundRequest();
        request.setBizModel(alipayTradeRefundModel);
        AlipayTradeRefundResponse response = client.execute(request);
        return response;
    } catch (AlipayApiException e) {
        logger.error("退款出現問題,詳情：{}", e.getErrMsg());
        e.printStackTrace();
    }
    return null;
}

在 AlipayController.java 中添加一個接口用于退款操作

/**
 * 訂單退款
 *
 * @return
 * @TODO 僅實現了全部退款
 */
@RequestMapping(value = "/order_refund", method = RequestMethod.GET)
public AlipayTradeRefundResponse orderRefund() {
    AlipayTradeRefundResponse refund = alipayService.refund("2022020922001434041429269213", "0.01");
    return refund;
}

用的是剛才支付寶回調返回的 trade_no 和 total_amount 。

重啟服務調用接口測試是否可以退款，這里我為了省事使用了 Postman 。

手機此時已經收到退款已到賬的消息通知，退款還是很簡單的。后臺也返回了響應的支付寶回調

整套支付流程都上傳到 github 了可以查看 github的源碼 https://github.com/runbrick/pay_spring

到此這篇關于UniApp+SpringBoot實現支付寶支付和退款的文章就介紹到這了,更多相關UniApp SpringBoot 支付寶支付和退款內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

簡單了解springboot加載配置文件順序
這篇文章主要介紹了簡單了解springboot加載配置文件順序,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-06-06
Spring?Boot如何配置yml配置文件定義集合、數組和Map
這篇文章主要介紹了Spring?Boot?優(yōu)雅配置yml配置文件定義集合、數組和Map,包括Spring?Boot?yml配置文件定義基本數據類型和引用數據類型的方式，需要的朋友可以參考下
2023-10-10
簡單了解Java位域的一些知識
這篇文章主要介紹了簡單了解Java位域的一些知識，這個概念是在 Effective Java中了解到的, 可以通過EnumSet來代替位域這種方式表達,需要的朋友可以參考下
2019-07-07
Java中的強引用,軟引用,弱引用,虛引用的作用介紹
這篇文章主要介紹了Java中的強引用，軟引用，弱引用，虛引用的作用，下文內容具有一定的知識參考價值，需要的小伙伴可以參考一下，希望對你有所幫助
2022-02-02
Java關鍵字final的實現原理分析
這篇文章主要介紹了Java關鍵字final的實現原理分析,在JDK8之前,如果在匿名內部類中需要訪問局部變量,那么這個局部變量一定是final修飾的,但final關鍵字可以省略,需要的朋友可以參考下
2024-01-01
spring boot如何基于JWT實現單點登錄詳解
這篇文章主要介紹了spring boot如何基于JWT實現單點登錄詳解，用戶只需登錄一次就能夠在這兩個系統中進行操作。很明顯這就是單點登錄(Single Sign-On)達到的效果,需要的朋友可以參考下
2019-06-06
APT?注解處理器實現?Lombok?常用注解功能詳解
這篇文章主要為大家介紹了使用APT?注解處理器實現?Lombok?常用注解功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-09-09
2020年IntelliJ IDEA最新最詳細配置圖文教程詳解
這篇文章主要介紹了2020年IntelliJ IDEA最新最詳細配置圖文教程詳解,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-02-02
maven環(huán)境變量配置以及失敗原因解析
這篇文章主要為大家詳細介紹了maven環(huán)境變量配置教程，以及為大家解析了安裝失敗的原因，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-10-10
Spring注解@Resource和@Autowired區(qū)別對比詳解
這篇文章主要介紹了Spring注解@Resource和@Autowired區(qū)別對比詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-09-09