PC網站和uniapp安卓APP、H5接入支付寶支付

? ? ? ? 首先我們需要完成支付寶賬號注冊，支持的賬號類型：支付寶企業賬號、支付寶個人賬號、個體工商戶。

????????到支付寶商家平臺產品中心開通APP支付、手機網站支付、電腦網站支付的產品權限。

? ? ? ? 一、電腦PC網站接入

????????電腦PC網站支付是指商戶在電腦網頁展示商品或服務，用戶在商戶頁面確認使用支付寶支付時，瀏覽器自動跳轉支付寶電腦網頁完成付款的支付產品。

?????簽約申請提交材料要求如下：

提供網站地址，網站能正常訪問且頁面顯示完整，網站需要明確經營內容且有完整的商品信息。
網站必須通過 ICP 備案，且備案主體需與支付寶賬號主體一致。若網站備案主體與當前賬號主體不同時需上傳授權函。
如以個人賬號申請，需提供營業執照，且支付寶賬號名稱需與營業執照主體一致。

? ? ? ? 1、登錄支付寶開放平臺創建網頁/移動應用。應用類型選擇網頁應用，填入應用訪問的網站地址。?

? ?

? ? ? ? 2、配置接口加簽方式、應用網關，詳見接入準備。

????????需要注意應用網關：用于接收支付寶異步通知消息，需要傳入 http(s) 公網地址。不設置的話無法接受異步通知。支付寶網關地址：開發者調用 OpenAPI 發送 http(s) 請求的目標地址，需配置在AlipayClient中。

? ? ? ? 3、網頁/移動應用：需要手動上線。提交審核后，預計 1 個工作日的審核時間。

? ? ? ? 4、綁定商家賬號

????????在支付寶開放平臺創建的應用歸屬于對應的開放平臺賬號。如果要在應用中使用支付和資金等相關產品，需要將應用和支付寶商家平臺賬號綁定，應用才可調用需要商家開通的產品。

? ? ? ? 5、集成支付寶SDK

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

? ? ? ? 6、支付配置

? ? ? ? 7、接入?統一收單下單并支付頁面接口

? ? ? ? 可以參考示例代碼編寫自己的代碼：

package com.ynfy.buss.mall.pay.service.alipay._native.impl;import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradePagePayModel;
import com.alipay.api.request.AlipayTradePagePayRequest;
import com.alipay.api.response.AlipayTradePagePayResponse;
import com.ynfy.buss.mall.pay.service.alipay._native.INativePayService;
import com.ynfy.common.utils.HttpUtils;
import lombok.extern.slf4j.Slf4j;
import org.jeecg.common.exception.JeecgBootException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;import java.math.BigDecimal;/*** 支付寶電腦網站支付** @author yangfeng* @since 2020/12/21 17:44*/
@Slf4j
@Component
public class AliNativePayServiceImpl implements INativePayService {/*** app的id*/@Value("${alipay.wapAppId}")private String wapAppId;/*** 私鑰*/@Value("${alipay.privateKey}")public String privateKey;/*** 公鑰*/@Value("${alipay.publicKey}")public String publicKey;/*** 支付回調地址*/@Value("${alipay.notifyUrl}")String notifyUrl;/*** 網關地址*/@Value("${alipay.serverUrl}")String serverUrl;@Overridepublic Object pay(String orderSn, BigDecimal price, String description) {AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, wapAppId, privateKey, "json", "UTF-8", publicKey, "RSA2");AlipayTradePagePayRequest request = new AlipayTradePagePayRequest();AlipayTradePagePayModel model = new AlipayTradePagePayModel();model.setBody(description);model.setSubject(description);model.setOutTradeNo(orderSn);model.setProductCode("FAST_INSTANT_TRADE_PAY");// 設置PC掃碼支付的方式model.setQrPayMode("1");// 設置請求后頁面的集成方式model.setIntegrationType("PCWEB");model.setTimeoutExpress("30m");model.setTotalAmount(price.toString());request.setBizModel(model);request.setNotifyUrl(notifyUrl);try {AlipayTradePagePayResponse response = alipayClient.pageExecute(request, "GET");return response.getBody();} catch (Exception e) {throw new JeecgBootException("支付寶電腦網站統一下單接口報錯：" + HttpUtils.getErrorMsgFromWxPay(e.getMessage()));}}}

? ? ? ? 8、iframe嵌入上述接口返回的連接，展示在自己的支付頁面中。效果如下圖：

? ? ? ? 用戶支付完成后，觸發回調通知，根據支付結果更新訂單狀態。回調接口代碼：

 @IgnoreAuth@ApiLog(value = "支付寶支付回調")@PostMapping("aliPayCallback")public Object aliPayCallback() throws Exception {log.info("支付寶支付回調通知...");//獲取支付寶POST過來反饋信息，將異步通知中收到的待驗證所有參數都存放到map中Map<String, String> params = new HashMap<>();Map<String, String[]> requestParams = request.getParameterMap();for (Iterator<String> iter = requestParams.keySet().iterator(); iter.hasNext(); ) {String name = iter.next();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] + ",";}//亂碼解決，這段代碼在出現亂碼時使用。//valueStr = new String(valueStr.getBytes("ISO-8859-1"), "utf-8");params.put(name, valueStr);}//調用SDK驗證簽名//公鑰驗簽log.info("支付寶支付回調返回參數：{}", params);boolean signVerified = AlipaySignature.rsaCheckV1(params, publicKey, "UTF-8", "RSA2");if (signVerified) {log.info("支付寶支付驗簽成功...");List<PurchaseOrder> updateOrderList = new ArrayList<>();// 驗簽成功后// 獲取支付結果參數String tradeStatus = request.getParameter("trade_status");log.info("支付寶支付回調交易狀態:{}", tradeStatus);String outTradeNo = request.getParameter("out_trade_no");log.info("支付寶支付回調訂單號:{}", outTradeNo);String gmtPayment = request.getParameter("gmt_payment");// 根據支付結果參數處理業務邏輯if ("TRADE_SUCCESS".equals(tradeStatus) || "TRADE_FINISHED".equals(tradeStatus)) {// 更新訂單狀態為支付成功orderService.updateOrderPayCallback(updateOrderList, CommonConstant.PAY_METHOD_ALI, outTradeNo, true, gmtPayment);log.info("支付寶支付回調通知處理完成，共更新{}個訂單", updateOrderList.size());return "success";} else {// 更新訂單狀態為支付失敗orderService.updateOrderPayCallback(updateOrderList, CommonConstant.PAY_METHOD_ALI, outTradeNo, false, null);return "fail";}}log.info("支付寶支付驗簽失敗...");return "fail";}

????????然后在頁面中定時器監聽訂單狀態，通知用戶支付是否成功。

? ? ? ? 二、uniapp手機網站（H5）接入支付

????????手機網站支付是指商家在移動端網頁展示商品或服務，用戶在商家頁面確認使用支付寶支付后，瀏覽器自動跳轉支付寶 App 或支付寶網頁完成付款的支付產品。

? ? ? ? 1、登錄支付寶開放平臺創建網頁/移動應用，這里的應用類型也是網頁應用，可以和上面的PC網頁應用共享，所以不用再創建。

? ? ? ? 2、接入?手機網站支付接口2.0

? ? ? ? 可以參考示例代碼編寫自己的代碼：

package com.ynfy.buss.mall.pay.service.alipay.h5.impl;import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradeWapPayModel;
import com.alipay.api.request.AlipayTradeWapPayRequest;
import com.alipay.api.response.AlipayTradeWapPayResponse;
import com.ynfy.buss.mall.pay.service.alipay.h5.IH5PayService;
import com.ynfy.common.utils.HttpUtils;
import lombok.extern.slf4j.Slf4j;
import org.jeecg.common.exception.JeecgBootException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;import java.math.BigDecimal;/*** 支付寶H5支付** @author yangfeng* @since 2020/12/21 17:44*/
@Slf4j
@Component
public class AliH5PayServiceImpl implements IH5PayService {/*** app的id*/@Value("${alipay.wapAppId}")private String wapAppId;/*** 私鑰*/@Value("${alipay.privateKey}")public String privateKey;/*** 公鑰*/@Value("${alipay.publicKey}")public String publicKey;/*** 支付回調地址*/@Value("${alipay.notifyUrl}")String notifyUrl;/*** 網關地址*/@Value("${alipay.serverUrl}")String serverUrl;@Overridepublic Object pay(String orderSn, BigDecimal price, String description) {AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, wapAppId, privateKey, "json", "UTF-8", publicKey, "RSA2");// 構造請求參數以調用接口AlipayTradeWapPayRequest request = new AlipayTradeWapPayRequest();AlipayTradeWapPayModel model = new AlipayTradeWapPayModel();model.setSubject(description);model.setOutTradeNo(orderSn);// 設置產品碼model.setProductCode("QUICK_WAP_WAY");model.setTimeoutExpress("30m");model.setTotalAmount(price.toString());request.setBizModel(model);request.setNotifyUrl(notifyUrl);try {AlipayTradeWapPayResponse response = alipayClient.pageExecute(request, "GET");return response.getBody();} catch (Exception e) {throw new JeecgBootException("支付寶h5統一下單接口報錯：" + HttpUtils.getErrorMsgFromWxPay(e.getMessage()));}}}

? ? ? ? ? ? ? ?3、uniapp調用上述支付接口，跳轉返回的鏈接頁面代碼：


/*** 支付* @param response*/
export function payment(response, clientType) {//app端需要判斷操作系統是否為華為鴻蒙// #ifdef APP-PLUSif (isHarmonyOS()) {uni.showToast({icon: "none",title: "鴻蒙暫不可支付",});return}// #endifconst provider = clientType == 'WxPay' ? "wxpay" : clientType == 'AliPay' ? 'alipay' : '';if (!provider) {uni.showToast({icon: "none",title: "支付方式缺失",});return}//app微信支付 orderInfo為json對象//app支付寶支付 orderInfo為字符串，https://uniapp.dcloud.net.cn/tutorial/app-payment-alipay.htmllet orderInfo = null;if (provider == "wxpay") {orderInfo = {appid: response.appid,noncestr: response.nonceStr,package: response.packageVal,partnerid: response.partnerId,prepayid: response.prepayId,timestamp: response.timestamp,sign: response.sign}} else if (provider == "alipay") {orderInfo = response}uni.requestPayment({provider: provider,// #ifdef APP-PLUSorderInfo: orderInfo,// #endif// #ifdef MP-WEIXINtimeStamp: response.timeStamp,nonceStr: response.nonceStr,package: response.packageVal,signType: response.signType,paySign: response.paySign,// #endifsuccess: (e) => {uni.showToast({icon: "none",title: "支付成功!",});setTimeout(() => {uni.navigateTo({url: "/subpages/myorder/myorder"})}, 1000)},fail: (e) => {uni.showModal({title: "支付失敗",content: "如果您已支付，請勿反復支付",showCancel: false,success: () => {uni.redirectTo({url: "/subpages/myorder/myorder?orderStatus=0",});},});},});
}export function isHarmonyOS() {const sysInfo = uni.getSystemInfoSync();// 檢查版本號是否包含"HarmonyOS"或"10+"等標識return /(10\+|\+HarmonyOS)/.test(sysInfo.system);
}// 去支付
export async function goPay(orderSn, clientType) {const orderData = await apiGetOrder(orderSn);const payParams = {clientType: clientType,// #ifdef MP-WEIXINpaymentType: "MP",// #endif// #ifdef H5paymentType: "H5",// #endif// #ifdef APP-PLUSpaymentType: "APP",// #endifprice: orderData.orderPrice,orderSn: orderSn,description: orderData.orderTitle};const response = await apiPay(payParams);// #ifdef MP-WEIXIN || APP-PLUSpayment(response, clientType)// #endif// #ifdef H5if (clientType == 'WxPay') {window.location.href = response.h5Url} else if (clientType == 'AliPay') {window.location.href = response}// #endif
}

?????????4、打開支付寶APP完成付款。效果如下：

? ? ? ? 三、uniapp安卓?APP支付

????????APP支付是指商家在商家移動端 App 中集成支付寶 SDK，調起支付寶來完成付款的一種支付產品。適用于在商家移動端 App 內使用支付寶支付功能的場景。

?????簽約申請提交材料要求如下：

如應用已上架，需提供應用名稱和已上架的應用市場；若應用未上架，需提供 Demo 或產品說明文檔。
應用必須包含明確的經營內容和價格信息；且經營內容須與營業執照經營范圍一致。
如應用開發者與支付寶賬號名稱不一致需提供開發者授權函。
個人賬號申請，需提供營業執照，且支付寶賬號名稱需與營業執照主體一致。

? ? ? ? 1、登錄支付寶開放平臺，點擊創建網頁/移動應用。（僅支持應用類型為移動應用接入）。

?? ? 2、配置接口加簽方式、應用網關，詳見接入準備。?

? ? ? ? 3、網頁/移動應用：需要手動上線。提交審核后，預計 1 個工作日的審核時間。

? ? ? ? 4、綁定商家賬號

? ? ? ? 5、接入?app支付接口2.0

? ? ? ? 可以參考示例代碼編寫自己的代碼：

package com.ynfy.buss.mall.pay.service.alipay.app.impl;import com.alipay.api.AlipayClient;
import com.alipay.api.DefaultAlipayClient;
import com.alipay.api.domain.AlipayTradeAppPayModel;
import com.alipay.api.request.AlipayTradeAppPayRequest;
import com.alipay.api.response.AlipayTradeAppPayResponse;
import com.ynfy.buss.mall.pay.service.alipay.app.IAppPayService;
import com.ynfy.common.utils.HttpUtils;
import lombok.extern.slf4j.Slf4j;
import org.jeecg.common.exception.JeecgBootException;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;import java.math.BigDecimal;/*** 支付寶APP支付** @author yangfeng* @since 2020/12/21 17:44*/
@Slf4j
@Component
public class AliAppPayServiceImpl implements IAppPayService {/*** app的id*/@Value("${alipay.appAppId}")private String appId;/*** 私鑰*/@Value("${alipay.privateKey}")public String privateKey;/*** 公鑰*/@Value("${alipay.publicKey}")public String publicKey;/*** 支付回調地址*/@Value("${alipay.notifyUrl}")String notifyUrl;/*** 網關地址*/@Value("${alipay.serverUrl}")String serverUrl;@Overridepublic Object pay(String orderSn, BigDecimal price, String description) {AlipayClient alipayClient = new DefaultAlipayClient(serverUrl, appId, privateKey, "json", "UTF-8", publicKey, "RSA2");AlipayTradeAppPayRequest request = new AlipayTradeAppPayRequest();AlipayTradeAppPayModel model = new AlipayTradeAppPayModel();model.setSubject(description);model.setOutTradeNo(orderSn);// 設置產品碼model.setProductCode("QUICK_MSECURITY_PAY");model.setTimeoutExpress("30m");model.setTotalAmount(price.toString());request.setBizModel(model);request.setNotifyUrl(notifyUrl);try {//這里和普通的接口調用不同，使用的是sdkExecuteAlipayTradeAppPayResponse response = alipayClient.sdkExecute(request);return response.getBody();} catch (Exception e) {throw new JeecgBootException("支付寶APP統一下單接口報錯：" + HttpUtils.getErrorMsgFromWxPay(e.getMessage()));}}}

? ? ? ? ?6、uniapp調用上述接口，調起支付寶支付控件。效果如圖：