支付宝H5支付(手机网站支付)

前言

接了支付宝这个支付之后我不得不说几句
首先这个文档是真的垃圾！花里胡哨乱七八糟，找起来那叫一个费劲！
当然可能因为人家业务复杂，逻辑严谨把
他们的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');//时间戳    
1
2
3
4
5
6
7
8

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'] ='大礼包代理开通费用';
1
2
3
4
5
6
7

3.把业务参数封装到公共参数中

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

三、签名

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'));
1
2
3
4
5
6
7

• 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);
 }
1
2
3
4
5
6
7

四、拼装支付的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>";
1
2
3
4
5
6
7
8
9
10

五、将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.htmlData
            console.log(form)
            this.payGateWay = form
            this.$nextTick(()=> {
                document.getElementById('aliPaySubmit').submit()
            })
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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')  
           }
         });
1
2
3
4
5
6
7
8

至此就可以直接调起支付宝进行支付了
最终效果图如下：

补充说明：

我这边最终还要将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')
1
2
3

总结：

2021年了还用form来调起支付，也许我比较菜，不能理解阿里的严谨！赶紧接完完事，不想多看一眼！完事！且行且珍惜！
还是微信的接起来舒畅、丝滑！