項(xiàng)目場景：

需求：VUE + SpringMVC前后端分離項(xiàng)目使用支付寶API接口實(shí)現(xiàn)付款。

---

問題描述

提示為：驗(yàn)簽出錯(cuò)，建議檢查簽名字符串或簽名私鑰與應(yīng)用公鑰是否匹配

解決方案：

1.密鑰真的不匹配，檢查是否輸出錯(cuò)誤或者出現(xiàn)了空格。
2.確認(rèn)密鑰無誤，可能是數(shù)據(jù)傳輸回前端的時(shí)候出現(xiàn)了問題，編碼格式不對，出現(xiàn)了中文，解析出現(xiàn)問題，導(dǎo)致失敗！！建議在填寫訂單信息的時(shí)候不要出現(xiàn)中文。
3.如果真的需要中文信息，可將返回的結(jié)果轉(zhuǎn)換為 utf-8的編碼格式，如下：

@PostMapping(value = "pay/alipay" , produces = "text/html;charset=utf-8")

---

實(shí)現(xiàn)過程

獲取私鑰、公鑰、APPID

打開支付寶開放平臺：https://open.alipay.com/develop/sandbox/tool

打開沙箱工具，后使用自定義密鑰：

建議使用密鑰生成器來生成密鑰：

按照要求安裝下載：

默認(rèn)即可，點(diǎn)擊生成密鑰，生成后這個(gè)程序先不要關(guān)閉，記錄下生成的密鑰，之后會用到。

SpringMVC后端代碼編寫

如果你是使用SSM或SpringBoot + Mybatis plus寫的后端，那么可以直接復(fù)制到你的項(xiàng)目，代碼進(jìn)行少量修改即可。

引入支付寶Api的Maven依賴

<!--支付寶Api--><!-- fastjson --><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.48</version></dependency><!-- 支付寶支付jar包 --><dependency><groupId>com.alipay.sdk</groupId><artifactId>alipay-sdk-java</artifactId><version>4.22.57.ALL</version></dependency><!--支付寶Api end-->

需要的文件如下，其他內(nèi)容不相關(guān)可以不看，只需要關(guān)注紅框內(nèi)的文件

支付寶訂單實(shí)體類

package cn.edu.nchu.bookstore.entity;/*** 支付實(shí)體對象* 根據(jù)支付寶接口協(xié)議，其中的屬性名，必須使用下劃線，不能修改*/ public class AlipayBean {/*** 商戶訂單號，必填**/private String out_trade_no;/*** 訂單名稱，必填*/private String subject;/*** 付款金額，必填* 根據(jù)支付寶接口協(xié)議，必須使用下劃線*/private String total_amount;/*** 商品描述，可空*/private String body;/*** 超時(shí)時(shí)間參數(shù)*/private String timeout_express= "10m";/*** 產(chǎn)品編號*/private String product_code= "FAST_INSTANT_TRADE_PAY";public String getOut_trade_no() {return out_trade_no;}public void setOut_trade_no(String out_trade_no) {this.out_trade_no = out_trade_no;}public String getSubject() {return subject;}public void setSubject(String subject) {this.subject = subject;}public String getTotal_amount() {return total_amount;}public void setTotal_amount(String total_amount) {this.total_amount = total_amount;}public String getBody() {return body;}public void setBody(String body) {this.body = body;}public String getTimeout_express() {return timeout_express;}public void setTimeout_express(String timeout_express) {this.timeout_express = timeout_express;}public String getProduct_code() {return product_code;}public void setProduct_code(String product_code) {this.product_code = product_code;}}

支付寶訂單工具類：

package cn.edu.nchu.bookstore.utils.alipay.config;import cn.edu.nchu.bookstore.dao.OrderDao; import cn.edu.nchu.bookstore.entity.AlipayBean; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component;import com.alibaba.fastjson.JSON; import com.alipay.api.AlipayApiException; import com.alipay.api.AlipayClient; import com.alipay.api.DefaultAlipayClient; import com.alipay.api.request.AlipayTradePagePayRequest;@Component public class Alipay {@Autowiredprivate AlipayConfig alipayConfig;/*** 支付接口* @param alipayBean* @return* @throws AlipayApiException*/public String pay(AlipayBean alipayBean) throws AlipayApiException {// 1、獲得初始化的AlipayClientString 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();AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, appId, privateKey, format, charset, alipayPublicKey, signType);// 2、設(shè)置請求參數(shù)AlipayTradePagePayRequest alipayRequest = new AlipayTradePagePayRequest();// 頁面跳轉(zhuǎn)同步通知頁面路徑alipayRequest.setReturnUrl(returnUrl);// 服務(wù)器異步通知頁面路徑alipayRequest.setNotifyUrl(notifyUrl);// 封裝參數(shù)alipayRequest.setBizContent(JSON.toJSONString(alipayBean));// 3、請求支付寶進(jìn)行付款，并獲取支付結(jié)果String result = alipayClient.pageExecute(alipayRequest).getBody();System.out.println(result);// 返回付款信息return result;} }

支付寶參數(shù)類

注意在這個(gè)頁面內(nèi)填入你的APPID，商戶私鑰，支付寶公鑰：

package cn.edu.nchu.bookstore.utils.alipay.config;import org.springframework.context.annotation.Configuration;import org.springframework.stereotype.Component;@Configuration @Component public class AlipayConfig {/*** 應(yīng)用ID,您的APPID，收款賬號既是您的APPID對應(yīng)支付寶賬號*/private String appId = "";/*** 商戶私鑰，您的PKCS8格式RSA2私鑰*/private String privateKey ="";/*** 支付寶公鑰,*/private String publicKey = "";/*** 服務(wù)器異步通知頁面路徑需http://格式的完整路徑，不能加?id=123這類自定義參數(shù)*/private String notifyUrl = "http://localhost:8081/#/success";/*** 頁面跳轉(zhuǎn)同步通知頁面路徑 需http://格式的完整路徑，不能加?id=123這類自定義參數(shù)*/private String returnUrl = "http://localhost:8081/#/success";/*** 簽名方式*/private String signType = "RSA2";/*** 字符編碼格式*/private String charset = "utf-8";/*** 支付寶網(wǎng)關(guān)*/private String gatewayUrl = "https://openapi.alipaydev.com/gateway.do";/*** 支付寶網(wǎng)關(guān)*/private String logPath = "C:\\";public String getAppId() {return appId;}public void setAppId(String appId) {this.appId = appId;}public String getPrivateKey() {return privateKey;}public void setPrivateKey(String privateKey) {this.privateKey = privateKey;}public String getPublicKey() {return publicKey;}public void setPublicKey(String publicKey) {this.publicKey = publicKey;}public String getNotifyUrl() {return notifyUrl;}public void setNotifyUrl(String notifyUrl) {this.notifyUrl = notifyUrl;}public String getReturnUrl() {return returnUrl;}public void setReturnUrl(String returnUrl) {this.returnUrl = returnUrl;}public String getSignType() {return signType;}public void setSignType(String signType) {this.signType = signType;}public String getCharset() {return charset;}public void setCharset(String charset) {this.charset = charset;}public String getGatewayUrl() {return gatewayUrl;}public void setGatewayUrl(String gatewayUrl) {this.gatewayUrl = gatewayUrl;}public String getLogPath() {return logPath;}public void setLogPath(String logPath) {this.logPath = logPath;} }

支付服務(wù)接口：

package cn.edu.nchu.bookstore.service;import cn.edu.nchu.bookstore.entity.AlipayBean; import com.alipay.api.AlipayApiException;public interface PayService {/*** 支付寶支付接口* @param alipayBean* @return* @throws AlipayApiException*/String aliPay(AlipayBean alipayBean) throws AlipayApiException;}

支付實(shí)體服務(wù)類實(shí)現(xiàn)類

package cn.edu.nchu.bookstore.service.impl;import cn.edu.nchu.bookstore.entity.AlipayBean; import cn.edu.nchu.bookstore.service.PayService; import cn.edu.nchu.bookstore.utils.alipay.config.Alipay;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service;import com.alipay.api.AlipayApiException;@Service("payService") public class PayServiceImpl implements PayService {@Autowiredprivate Alipay alipay;@Overridepublic String aliPay(AlipayBean alipayBean) throws AlipayApiException {return alipay.pay(alipayBean);} }

支付控制器類

package cn.edu.nchu.bookstore.controller;import cn.edu.nchu.bookstore.entity.AlipayBean; import cn.edu.nchu.bookstore.service.PayService; import cn.edu.nchu.bookstore.utils.JsonResult; import com.alipay.api.AlipayApiException;import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController;import java.io.UnsupportedEncodingException;@RestController //可修改為Controller public class PayController {@Autowiredprivate PayService payService;/*** 阿里支付* @param outTradeNo* @param subject* @param totalAmount* @param body* @return* @throws AlipayApiException*/@PostMapping(value = "pay/alipay" , produces = "text/html;charset=utf-8")/*可替換為:@RequestMapping(value = "pay/alipay" , produces = "text/html;charset=utf-8")@ResponseBody*/public String alipay(String outTradeNo, String subject, String totalAmount, String body) throws AlipayApiException, UnsupportedEncodingException {AlipayBean alipayBean = new AlipayBean();alipayBean.setOut_trade_no(outTradeNo);alipayBean.setSubject(subject);alipayBean.setTotal_amount(totalAmount);alipayBean.setBody(body);System.out.println(outTradeNo);System.out.println(subject);System.out.println(totalAmount);System.out.println(body);return payService.aliPay(alipayBean);} }

前端開發(fā)

該部分使用vue實(shí)現(xiàn)，通過點(diǎn)擊支付按鈕點(diǎn)擊實(shí)現(xiàn)跳轉(zhuǎn)到支付界面嗎，將訂單填寫在params里面 submitOrder() {// 修改為你自己的地址var url = "/pay/alipay";this.axios({method: 'post',url: url,params: {outTradeNo: ,//訂單的唯一IDsubject: ,//訂單名稱totalAmount: ,//訂單總價(jià)，即付款的錢body: ,//訂單主題內(nèi)容},}).then(response => {// 添加之前先刪除一下，如果單頁面，頁面不刷新，添加進(jìn)去的內(nèi)容會一直保留在頁面中，二次調(diào)用form表單會出錯(cuò)const divForm = document.getElementsByTagName('div')if (divForm.length) {document.body.removeChild(divForm[0])}const div = document.createElement('div')console.log(response.data);div.innerHTML = response.data // data就是接口返回的form 表單字符串document.body.appendChild(div)document.forms[0].setAttribute('target', '_blank') // 新開窗口跳轉(zhuǎn)document.forms[0].submit()}).catch(err => {console.log(err)})

支付成功后的操作——success.vue

這個(gè)success界面需要在前面的AlipayConfig 類里面定義，你也可以設(shè)置為跳轉(zhuǎn)到其他頁面。 我是在這個(gè)頁面實(shí)現(xiàn)了支付后的對數(shù)據(jù)更新的操作，你也可以直接在后端實(shí)現(xiàn)業(yè)務(wù)，而不必在前端再發(fā)一次請求。 以下代碼僅供參考，你需要自己寫post/get請求的方式，界面自行美化 <template><div>支付成功！！</div> </template><script>export default {mounted() {console.log(this.$route.query.out_trade_no);// 獲取訂單號//你也可以通過this.$route.query.xxx 獲取訂單價(jià)格，等信息，//在支付之前，通過F12查看“network” ，支付后，你會看到帶有訂單信息的請求，找到請求的內(nèi)容// 以下代碼是支付成功之后的操作，請?jiān)谶@修改你自己的處理方式// 以下代碼是經(jīng)過封裝的請求，不能直接使用// 我這里的意思是支付后，根據(jù)訂單ID對訂單狀態(tài)進(jìn)行修改this.$post("order/payForOrderByGen", {orderGeneratedId: this.$route.query.out_trade_no,}).then(res => {this.$message({message: res.data ? '支付成功！' : "支付失敗",type: res.data ? 'success' : 'error'});// 跳轉(zhuǎn)到訂單頁面this.$router.push("/customer/order");}).catch(err => {console.log(err);});}} </script><style> </style>

參考文章

https://blog.csdn.net/weixin_51324855/article/details/124097792

---

如文章中有侵權(quán)，請及時(shí)聯(lián)系刪除。
本文用于記錄作者本人的學(xué)習(xí)，其中遇到的問題，歡迎大家在討論區(qū)交流。

總結(jié)

以上是生活随笔為你收集整理的实现SpringMVC + Vue 前后端分离 支付宝API付款的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。