前言

接了支付寶這個支付之后我不得不說幾句
首先這個文檔是真的垃圾！花里胡哨亂七八糟，找起來那叫一個費勁！
當然可能因為人家業務復雜，邏輯嚴謹把
他們的demo還是算了吧，那個demo就像什么呢，就像復制粘貼過來然后還不把別人東西去掉的意思！里面一堆用不著的代碼！不建議下載學習，那樣反而容易誤導支付的邏輯
這么一對比，微信還是牛批不少，自上而下的企業精神—嚴謹、簡約！看支付寶app和微信app就知道了！
垃圾歸垃圾沒辦法還得接，都是窮惹的禍啊
總而言之，垃圾demo不看也罷！
進入正題。。。全程按照我的步驟走，絕對能跑通謝謝！

一、接入前準備的支付寶參數

1.app_id（APPID）
2.merchant_private_key(商戶私鑰)
如果這兩個參數你都搞不定的話，那就不用往下看了，直接找別人幫你接入吧

二、配置請求參數：

1.公共請求參數

$d['app_id'] = C('app_id_ailiPay');//APPID $d['method'] ='alipay.trade.wap.pay';//相當于標識了你的支付方式如：手機網站支付就用alipay.trade.wap.pay $d['return_url']= C('URL').'/admin/index/index';//支付成功之后的返回地址 $d['notify_url']= C('URL').'/admin/payNotify/getNotifyAgentByaliPay';//支付成功的回調地址 $d['charset'] ="UTF-8"; $d['sign_type'] ="RSA2";//簽名方式 $d['version'] ='1.0';//版本統一都是1.0 $d['timestamp'] =date('Y-m-d H:i:s');//時間戳

2.業務參數

$total = 399;//支付金額$od['subject'] ="大禮包代理開通費用"; //商品標題$od['out_trade_no'] = getTaskNo(); //訂單號$od['timeout_express'] ='10m'; //10分鐘內支付完成，否則關閉交易$od['total_amount'] =$total; //總金額$od['product_code'] ='QUICK_WAP_WAY'; //銷售產品碼$od['body'] ='大禮包代理開通費用';

3.把業務參數封裝到公共參數中

$d['biz_content']=json_encode($od);

三、簽名

ksort($d);//按key排序 $signStr=''; foreach($d as $k=>$v){$signStr.="&{$k}={$v}";//這里只能用循環，嘗試用http_build_query會導致訪問失敗} $signStr=substr($signStr,1); $d['sign']= $this->rsaSign($signStr,C('merchant_private_key'));

• rsaSign方法代碼：

function rsaSign($data, $prikey) {$res = "-----BEGIN RSA PRIVATE KEY-----\n" .wordwrap($prikey, 64, "\n", true) ."\n-----END RSA PRIVATE KEY-----";openssl_sign($data, $sign,$res,OPENSSL_ALGO_SHA256);return base64_encode($sign);}

四、拼裝支付的form表單

//生成訪問表單 //試過用get的方式訪問，支付寶不認。有可能是sign參數超過了256位導致的。 $url = C('gatewayUrl'); $html="<form id='aliPaySubmit' action='{$url}?charset={$d['charset']}' method='POST'>"; foreach($d as $k=>$v){$v = str_replace("'","&apos;",$v);//單引號會導致$html.= "<input type='hidden' name='{$k}' value='{$v}'/>\n"; } $html.="<input type='submit' value='ok' style='display:none;''></form><script>document.getElementById('form1').submit();</script>";

五、將form表單的html返回給前端

這一步驟就不多說了，直接將上一步的html發給前端就行了

六、前端的處理

這里我處理的可能不是最優的方案，但是拿出來僅供參考。
1.新建個form表單承載頁面
vue文件的代碼如下：

<template><div v-html = "payGateWay">{{payGateWay}}</div> </template> <script>export default {name: 'payGateWay',data(){return {payGateWay:''}} ,mounted () {let form = this.$route.query.htmlDataconsole.log(form)this.payGateWay = formthis.$nextTick(()=> {document.getElementById('aliPaySubmit').submit()})}} </script>

2.接收后臺傳過來的html然后帶參跳轉到上一步的承載頁面

genpayagentByaliPay(isMobile()).then(response => {console.log(response);if (response.code == 200) {let routerData = this.$router.resolve({path:'/payGateWay',query:{ htmlData: response.data.html}})// 打開新頁面window.open(routerData.href, '_ blank') }});

至此就可以直接調起支付寶進行支付了
最終效果圖如下：

補充說明：

我這邊最終還要將vue封裝成H5的app應用，那么在網頁上上面確實能調起支付寶進行支付，但是封裝到android中之后就無法window.open打開承載的頁面了，我的實現思路是用webview來打開承載頁面就可以成功調起支付寶了
代碼簡單修改一下，如下：

let routerData = this.$router.resolve({path:'/payGateWay',query:{ htmlData: json.data.html}})// 打開新頁面window.cordova.InAppBrowser.open(routerData.href, '_ blank','location=no,hidden=yes')

總結：

2021年了還用form來調起支付，也許我比較菜，不能理解阿里的嚴謹！趕緊接完完事，不想多看一眼！完事！且行且珍惜！
還是微信的接起來舒暢、絲滑！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。