支付宝网页wap支付接入

原创

安德玛

发布于 2022-03-05 06:07:12

1.5K00

代码可运行

文章被收录于专栏：Cordova封装H5 APPCordova封装H5 APP

运行总次数：0

代码可运行

接入前准备的支付宝的参数

app_id (APPID)

merchant_private_key(商户私钥)

gatewayUrl(相当于微信的统一下单请求地址)

配置请求参数：

公共参数

$d['app_id']	= C('app_id_ailiPay');
    $d['method']	='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';
    $d['timestamp']	=date('Y-m-d H:i:s');

业务参数

 $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']	='大礼包代理开通费用';

业务参数封装

$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签名方法：

/** 
   * 支付宝RSA签名 OPENSSL_ALGO_SHA256
   * @param $data 待签名数据
   * @param $prikey 私钥字符串
   * return 签名结果
   */
  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返回给前端页面

前端对form表单的处理并拉起支付宝支付

先新建一个form表单承载页面

<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>

接收后台的form数据并处理

 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的时候我的思路是将承载页面放在webview中加载而不是直接window

.open打开

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