當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

支付宝支付-手机浏览器H5支付

發(fā)布時間：2023/12/10 HTML 42 豆豆

生活随笔收集整理的這篇文章主要介紹了支付宝支付-手机浏览器H5支付小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

前言

支付寶支付—沙箱環(huán)境使用
支付寶支付-支付寶PC端掃碼支付
支付寶支付-手機瀏覽器H5支付「本文」

手機瀏覽器支付，用戶在安裝支付寶APP的情況下，調(diào)用手機網(wǎng)站支付接口默認(rèn)會喚起支付寶錢包支付，接下來通過運行官方Demo進行測試。

本文開發(fā)環(huán)境：IDEA + Tomcat8.5 + 支付寶沙箱環(huán)境*

補充：調(diào)用沙箱環(huán)境接口，需要安裝沙箱環(huán)境下的支付寶APP，不了解的小伙伴可以參考上方支付寶支付—沙箱環(huán)境使用。

下載運行測試Demo

官方Demo下載鏈接：手機網(wǎng)站支付

下載后導(dǎo)入 IDEA 中后需要調(diào)整的參數(shù)如下：

AlipayConfig.java

public?class?AlipayConfig?{//?商戶appidpublic?static?String?APPID?=?"2016101700705301";//?私鑰?pkcs8格式的public?static?String?RSA_PRIVATE_KEY?=?"";//?服務(wù)器異步通知頁面路徑?需http://或者h(yuǎn)ttps://格式的完整路徑，不能加?id=123這類自定義參數(shù)，必須外網(wǎng)可以正常訪問public?static?String?notify_url?=?"http://ngrok.sscai.club/alipay_trade_wap_pay_java_utf_8_war_exploded/notify_url.jsp";//?頁面跳轉(zhuǎn)同步通知頁面路徑?需http://或者h(yuǎn)ttps://格式的完整路徑，不能加?id=123這類自定義參數(shù)，必須外網(wǎng)可以正常訪問?商戶可以自定義同步跳轉(zhuǎn)地址public?static?String?return_url?=?"http://ngrok.sscai.club/alipay_trade_wap_pay_java_utf_8_war_exploded/return_url.jsp";//?請求網(wǎng)關(guān)地址public?static?String?URL?=?"https://openapi.alipaydev.com/gateway.do";//?編碼public?static?String?CHARSET?=?"UTF-8";//?返回格式public?static?String?FORMAT?=?"json";//?支付寶公鑰public?static?String?ALIPAY_PUBLIC_KEY?=?"";//?日志記錄目錄public?static?String?log_path?=?"/log";//?RSA2public?static?String?SIGNTYPE?=?"RSA2"; }

幾個主要的參數(shù)：

APPID ：商戶appid

RSA_PRIVATE_KEY：應(yīng)用私鑰

ALIPAY_PUBLIC_KEY：支付寶公鑰「注意不是應(yīng)用公鑰」

這幾個參數(shù)不清楚的，可以看一下沙箱環(huán)境使用，或者看一下官方文檔參數(shù)說明。

項目啟動后如下圖所示：

Maven項目中的使用

Maven中的使用其實跟上篇支付寶支付-支付寶PC端掃碼支付代碼非常的像，換湯不換藥，改幾個參數(shù)，具體如下：

pom.xml中引入支付寶SDK依賴

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

配置可以單獨創(chuàng)建一個類，靜態(tài)初始化參數(shù)：

public?class?AlipayConfig?{//?[沙箱環(huán)境]應(yīng)用ID,您的APPID，收款賬號既是您的APPID對應(yīng)支付寶賬號public?static?String?app_id?=?"";//?[沙箱環(huán)境]商戶私鑰，您的PKCS8格式RSA2私鑰public?static?String?merchant_private_key?=?"";//?[沙箱環(huán)境]支付寶公鑰,查看地址：https://openhome.alipay.com/platform/keyManage.htm?對應(yīng)APPID下的支付寶公鑰。public?static?String?alipay_public_key?=?"";//?[沙箱環(huán)境]服務(wù)器異步通知頁面路徑??需http://格式的完整路徑，不能加?id=123這類自定義參數(shù)，必須外網(wǎng)可以正常訪問public?static?String?notify_url?=?"http://ngrok.sscai.club/alipay/aliPayNotify_url";//?[沙箱環(huán)境]頁面跳轉(zhuǎn)同步通知頁面路徑?需http://格式的完整路徑，不能加?id=123這類自定義參數(shù)，必須外網(wǎng)可以正常訪問public?static?String?return_url?=?"http://ngrok.sscai.club/index.html#/alipay/success";//?[沙箱環(huán)境]public?static?String?gatewayUrl?=?"https://openapi.alipaydev.com/gateway.do"; }

至于接口啥的基本就是可以參考上方運行的Demo了。

簡單看看生成支付寶訂單接口「沒有使用開源SDK」。

@Transactional public?String?alipayOrder(AlipayOrderRequest?alipayOrderRequest)?throws?AlipayApiException?{//獲得初始化的AlipayClientAlipayClient?alipayClient?=?new?DefaultAlipayClient(AlipayConfig.gatewayUrl,AlipayConfig.app_id,AlipayConfig.merchant_private_key,"json",AlipayConfig.charset,AlipayConfig.alipay_public_key,AlipayConfig.sign_type);//設(shè)置請求參數(shù)String?payType?=?alipayOrderRequest.getPayType();//?wapAlipayTradeWapPayRequest?alipayWapRequest?=?new?AlipayTradeWapPayRequest();alipayWapRequest.setReturnUrl(AlipayConfig.return_url);alipayWapRequest.setNotifyUrl(AlipayConfig.notify_url);//商戶訂單號，商戶網(wǎng)站訂單系統(tǒng)中唯一訂單號，必填String?out_trade_no?=?alipayOrderRequest.getWidOutTradeNo();//付款金額，必填String?total_amount?=?alipayOrderRequest.getWidTotalFee();//訂單名稱，必填String?subject?=?alipayOrderRequest.getWidSubject();//商品描述，可空String?body?=?alipayOrderRequest.getWIDbody();//拼接參數(shù)alipayWapRequest.setBizContent("{\"out_trade_no\":\""+?out_trade_no?+"\","+?"\"total_amount\":\""+?total_amount?+"\","+?"\"subject\":\""+?subject?+"\","+?"\"body\":\""+?body?+"\","+?"\"product_code\":\"FAST_INSTANT_TRADE_PAY\"}");//?發(fā)起請求return?alipayClient.pageExecute(?alipayWapRequest).getBody(); }

手機網(wǎng)站支付接口調(diào)用后返回的也是一個 Form 表單，也就是 result 實際是一段 Html 代碼，然后把 result 傳給前段調(diào)用即可，下面是返回的 Form 的一個示例：

??<form?name="punchout_form"?method="post"?action="https://openapi.alipaydev.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=xx&return_url=http%3A%2F%2Fngrok.sscai.club%2Falipay_trade_wap_pay_java_utf_8_war_exploded%2Freturn_url.jsp&notify_url=http%3A%2F%2Fngrok.sscai.club%2Falipay_trade_wap_pay_java_utf_8_war_exploded%2Fnotify_url.jsp&version=1.0&app_id=2016101700705301&sign_type=RSA2&timestamp=2020-01-08+14%3A09%3A58&alipay_sdk=alipay-sdk-java-3.3.0&format=json">?<input?type="hidden"?name="biz_content"?value="{"body":"購買測試商品0.01元","out_trade_no":"20201814955421","product_code":"QUICK_WAP_WAY","subject":"手機網(wǎng)站支付測試商品","timeout_express":"2m","total_amount":"0.01"}"?/>?<input?type="submit"?value="立即支付"?style="display:none"?/>?</form>

怎么調(diào)用呢？下面是一段我在vue中的測試代碼片段，前段接收到后端返回的 Form 表單進行提交：

const?div?=?document.createElement('div'); console.log("我是后端返回的數(shù)據(jù):"+res.result) div.innerHTML?=?res.result; document.body.appendChild(div); console.log("punchout_form:"+document.forms.punchout_form) document.forms.punchout_form.submit();

支付成功后會自動重定向到配置的跳轉(zhuǎn)界面，由后端的的 return_url 參數(shù)控制。
再看看支付成功后的回調(diào)接口「沒有使用開源的SDK演示」：

public?String?alipaynotify(Model?model,?HttpServletRequest?request)?{log.info("支付寶異步回調(diào)?------------beg-----------");String?result?=?"fail";//獲取支付寶POST過來反饋信息/*?**?功能：支付寶服務(wù)器異步通知頁面*?說明：*?以下代碼只是為了方便商戶測試而提供的樣例代碼，商戶可以根據(jù)自己網(wǎng)站的需要，按照技術(shù)文檔編寫,并非一定要使用該代碼。*?該代碼僅供學(xué)習(xí)和研究支付寶接口使用，只是提供一個參考。*/Map<String,?String>?params=this.getAlipayRequest(request);if(params?==?null?||?params.size()==0){BufferedReader?bufferReader?=?null;StringBuilder?sb?=?new?StringBuilder();try?{bufferReader?=?new?BufferedReader(request.getReader());String?line?=?null;while?((line?=?bufferReader.readLine())?!=?null)?{sb.append(new?String(line.getBytes("ISO-8859-1"),?"utf-8"));}}?catch?(IOException?e)?{e.printStackTrace();}String?body=?null;try?{body?=?URLDecoder.decode(sb.toString(),"UTF-8");}?catch?(UnsupportedEncodingException?e)?{e.printStackTrace();}params=UriComponentsBuilder.newInstance().query(body).build().getQueryParams().toSingleValueMap();}boolean?signVerified?=false;try?{signVerified?=?AlipaySignature.rsaCheckV1(params,?AlipayConfig.alipay_public_key,?AlipayConfig.charset,?AlipayConfig.sign_type);}?catch?(AlipayApiException?e1)?{//?TODO?Auto-generated?catch?blocklog.error("由于"+e1.getErrMsg()+"返回給支付寶系統(tǒng)的結(jié)果result:fail");model.addAttribute("result",?"fail");return?result;}?//調(diào)用SDK驗證簽名//——請在這里編寫您的程序（以下代碼僅作參考）——/*?實際驗證過程建議商戶務(wù)必添加以下校驗：1、需要驗證該通知數(shù)據(jù)中的out_trade_no是否為商戶系統(tǒng)中創(chuàng)建的訂單號，2、判斷total_amount是否確實為該訂單的實際金額（即商戶訂單創(chuàng)建時的金額），3、校驗通知中的seller_id（或者seller_email)?是否為out_trade_no這筆單據(jù)的對應(yīng)的操作方（有的時候，一個商戶可能有多個seller_id/seller_email）4、驗證app_id是否為該商戶本身。*/log.error("支付寶驗證簽名：---------------------------------"+signVerified);if(signVerified)?{//驗證成功//商戶訂單號//交易狀態(tài)log.info("支付寶異步回調(diào)驗簽成功！");String?trade_status?=?params.get("trade_status");if("TRADE_FINISHED".equals(trade_status)){//判斷該筆訂單是否在商戶網(wǎng)站中已經(jīng)做過處理//如果沒有做過處理，根據(jù)訂單號（out_trade_no）在商戶網(wǎng)站的訂單系統(tǒng)中查到該筆訂單的詳細(xì)，并執(zhí)行商戶的業(yè)務(wù)程序//如果有做過處理，不執(zhí)行商戶的業(yè)務(wù)程序//注意：//退款日期超過可退款期限后（如三個月可退款），支付寶系統(tǒng)發(fā)送該交易狀態(tài)通知try?{//?在這里處理支付成功后的操作，比如修改訂單狀態(tài)等等coding...result?=?"success";}?catch?(Exception?e)?{log.error(e.getMessage());result?=?"fail";}}else?if?("TRADE_SUCCESS".equals(trade_status)){//判斷該筆訂單是否在商戶網(wǎng)站中已經(jīng)做過處理//如果沒有做過處理，根據(jù)訂單號（out_trade_no）在商戶網(wǎng)站的訂單系統(tǒng)中查到該筆訂單的詳細(xì)，并執(zhí)行商戶的業(yè)務(wù)程序//如果有做過處理，不執(zhí)行商戶的業(yè)務(wù)程序//注意：//付款完成后，支付寶系統(tǒng)發(fā)送該交易狀態(tài)通知try?{//?在這里處理支付成功后的操作，比如修改訂單狀態(tài)等等coding...result?=?"success";}?catch?(Exception?e)?{log.error(e.getMessage());result?=?"fail";}}else{result?=?"fail";}}else?{//驗證失敗result?=?"fail";//調(diào)試用，寫文本函數(shù)記錄程序運行情況是否正常//String?sWord?=?AlipaySignature.getSignCheckContentV1(params);//AlipayConfig.logResult(sWord);log.debug("支付寶異步回調(diào)驗簽失敗");}log.debug("異步回調(diào)返回給支付寶系統(tǒng)的結(jié)果result:"+result);model.addAttribute("result",?result);log.info("支付寶異步回調(diào)??-------------end?------------");return?result; }

該方法返回給支付寶的 result 就 success、fail 兩個結(jié)果。
從以上看來，其實不難發(fā)現(xiàn)支付寶支付是非常簡單的，盡管我上邊貼了大量的代碼，其實采用開源SDK的話可以更加縮減、美化一些，如下是支付成功的截圖。

ok，這篇文章就到這結(jié)束了，上邊并沒有詳細(xì)介紹接口調(diào)用、參數(shù)說明等，詳細(xì)介紹請移步官方文檔：https://docs.open.alipay.com/60/104790/

本文源碼下載

可運行的官方手機網(wǎng)站支付Demo：https://www.lanzous.com/i8oe2sb

求關(guān)注，求推薦

博客地址：https://www.cnblogs.com/niceyoo

求關(guān)注??，求推薦👍，如果覺得這篇文章有點東西，不妨左上角關(guān)注一下我。

總結(jié)

以上是生活随笔為你收集整理的支付宝支付-手机浏览器H5支付的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：非常强大的时间日期插件 --- JeDa
下一篇： HTML5 Web 存储（localSt