支付 · vue自己用

今天以thinkphp5中使用支付宝的手机支付接口为例。一、创建基本页面pay/alipay\_wap\_submit.php（开始创建订单） ``` <!DOCTYPE html> <html> <head> <title>支付宝手机网站支付接口</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <meta http-equiv="Access-Control-Allow-Origin" content="*"/> <meta http-equiv="pragma" content="no-cache"/> <style> * { margin: 0; padding: 0; } ul, ol { list-style: none; } body { font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } .hidden { display: none; } .new-btn-login-sp { padding: 1px; display: inline-block; width: 75%; } .new-btn-login { background-color: #02aaf1; color: #FFFFFF; font-weight: bold; border: none; width: 100%; height: 30px; border-radius: 5px; font-size: 16px; } #main { width: 100%; margin: 0 auto; font-size: 14px; } .red-star { color: #f00; width: 10px; display: inline-block; } .null-star { color: #fff; } .content { margin-top: 5px; } .content dt { width: 100px; display: inline-block; float: left; margin-left: 20px; color: #666; font-size: 13px; margin-top: 8px; } .content dd { margin-left: 120px; margin-bottom: 5px; } .content dd input { width: 85%; height: 28px; border: 0; -webkit-border-radius: 0; -webkit-appearance: none; } #foot { margin-top: 10px; position: absolute; bottom: 15px; width: 100%; } .foot-ul { width: 100%; } .foot-ul li { width: 100%; text-align: center; color: #666; } .note-help { color: #999999; font-size: 12px; line-height: 130%; margin-top: 5px; width: 100%; display: block; } #btn-dd { margin: 20px; text-align: center; } .foot-ul { width: 100%; } .one_line { display: block; height: 1px; border: 0; border-top: 1px solid #eeeeee; width: 100%; margin-left: 20px; } .am-header { display: -webkit-box; display: -ms-flexbox; display: box; width: 100%; position: relative; padding: 7px 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; background: #1D222D; height: 50px; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; box-pack: center; -webkit-box-align: center; -ms-flex-align: center; box-align: center; } .am-header h1 { -webkit-box-flex: 1; -ms-flex: 1; box-flex: 1; line-height: 18px; text-align: center; font-size: 18px; font-weight: 300; color: #fff; } </style> </head> <body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4> <header class="am-header"> <h1>支付宝手机网站支付窗口</h1> </header> <div id="main"> <form name=alipayment action="<?php echo url('alipay/alipay_wap_do',['type' =>'cz'])?>" method=post> <div id="body" style="clear:left"> <dl class="content"> <input id="WIDout_trade_no" name="WIDout_trade_no" type="hidden"/> <input id="WIDsubject" name="WIDsubject" type="hidden"/> <hr class="one_line"> <dt>充值金额： </dt> <dd> <input id="WIDtotal_fee" name="WIDtotal_fee" required="required" oninvalid="setCustomValidity('请输入充值金额！');" oninput="setCustomValidity('');"/> </dd> <input id="WIDshow_url" name="WIDshow_url" type="hidden"/> <input id="WIDbody" name="WIDbody" type="hidden"/> <hr class="one_line"> <dt></dt> <dd id="btn-dd"> <span class="new-btn-login-sp"> <button class="new-btn-login" type="submit" style="text-align:center;">确认</button> </span> <span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span> </dd> </dl> </div> </form> <div id="foot"> <ul class="foot-ul"> <li> 支付宝版权所有 2015-2018 ALIPAY.COM </li> </ul> </div> </div> </body> <script language="javascript"> function GetDateNow() { var vNow = new Date(); var sNow = ""; sNow += String(vNow.getFullYear()); sNow += String(vNow.getMonth() + 1); sNow += String(vNow.getDate()); sNow += String(vNow.getHours()); sNow += String(vNow.getMinutes()); sNow += String(vNow.getSeconds()); sNow += String(vNow.getMilliseconds()); document.getElementById("WIDout_trade_no").value = sNow; document.getElementById("WIDsubject").value = "支付宝手机充值"; document.getElementById("WIDtotal_fee").value = ""; } GetDateNow(); </script> </html> ``` ![](https://img.kancloud.cn/6f/3d/6f3d62f834cdb52fff15464077ca2231_345x289.png) 二、配置基本参数 ``` /*支付宝wap支付参数*/ 'alipay_wap_config' =>[ 'partner' =>'208862*****17685', 'seller_id' =>'20886*****17685',//和上面一样 'key' =>'j60fqq5a*********vsi1w4iz9t', 'notify_url' =>'http://'.$_SERVER['HTTP_HOST'].'/index/alipay/alipay_wap_notify', 'return_url' =>'http://'.$_SERVER['HTTP_HOST'].'/index/alipay/alipay_wap_return', 'sign_type' =>strtoupper('MD5'), 'input_charset' =>strtolower('utf-8'), 'cacert' =>getcwd().'\\cacert.pem',//需要放在根目录 'transport' =>'http', 'payment_type' =>'1', 'service' =>'alipay.wap.create.direct.pay.by.user' ], ``` 三、控制器处理请求： ``` //表单提交支付 public function alipay_wap_do($type) { if(!$type){ throw new \think\exception\HttpException(403, '非法请求'); } $WIDtotal_fee = $_POST['WIDtotal_fee']; $alipay_config = Config::get('alipay_wap_config'); switch ($type){ case 'cz': if ('' == $WIDtotal_fee) { return alert('请输入充值金额', url('pay/alipay_wap_submit')); } elseif (!preg_match('/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)| (^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/', $WIDtotal_fee)) { return alert('请输入正确格式的金额数量', url('pay/alipay_wap_submit')); } Session::set('dawn_alipay_pay_action','cz'); break; case 'hk': Session::set('dawn_alipay_pay_action','hk'); break; } //p($alipay_config);die; //商户订单号，商户网站订单系统中唯一订单号，必填 $out_trade_no = $_POST['WIDout_trade_no']; //订单名称，必填 $subject = $_POST['WIDsubject']; //付款金额，必填 $total_fee = $_POST['WIDtotal_fee']; //收银台页面上，商品展示的超链接，必填 $show_url = $_POST['WIDshow_url']; //商品描述，可空 $body = $_POST['WIDbody']; /************************************************************/ //构造要请求的参数数组，无需改动 $parameter = array( "service" => $alipay_config['service'], "partner" => $alipay_config['partner'], "seller_id" => $alipay_config['seller_id'], "payment_type" => $alipay_config['payment_type'], "notify_url" => $alipay_config['notify_url'], "return_url" => $alipay_config['return_url'], "_input_charset" => trim(strtolower($alipay_config['input_charset'])), "out_trade_no" => $out_trade_no, "subject" => $subject, "total_fee" => $total_fee, "show_url" => $show_url, //"app_pay" => "Y",//启用此参数能唤起钱包APP支付宝 "body" => $body, //其他业务参数根据在线开发文档，添加参数. 文档地址:https://doc.open.alipay.com/doc2/detail.htm?spm=a219a.7629140.0.0.2Z6TSk&treeId=60&articleId=103693&docType=1 //如"参数名" => "参数值" 注：上一个参数末尾需要“,”逗号。 ); //建立请求 $alipaySubmit = new \Alipay_wap\AlipaySubmit($alipay_config); $html_text = $alipaySubmit->buildRequestForm($parameter, "get", "确认"); echo $html_text; } public function alipay_wap_notify() { $alipay_config = Config::get('alipay_wap_config'); //计算得出通知验证结果 $alipayNotify = new \Alipay_wap\AlipayNotify($alipay_config); $verify_result = $alipayNotify->verifyNotify(); if ($verify_result) {//验证成功 ///////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// //请在这里加上商户的业务逻辑程序代 //——请根据您的业务逻辑来编写程序（以下代码仅作参考）—— //获取支付宝的通知返回参数，可参考技术文档中服务器异步通知参数列表 //商户订单号 $out_trade_no = $_POST['out_trade_no']; //支付宝交易号 $trade_no = $_POST['trade_no']; //交易状态 $trade_status = $_POST['trade_status']; if ($_POST['trade_status'] == 'TRADE_FINISHED') { //判断该笔订单是否在商户网站中已经做过处理 //如果没有做过处理，根据订单号（out_trade_no）在商户网站的订单系统中查到该笔订单的详细，并执行商户的业务程序 //请务必判断请求时的total_fee、seller_id与通知时获取的total_fee、seller_id为一致的 //如果有做过处理，不执行商户的业务程序 //注意： //退款日期超过可退款期限后（如三个月可退款），支付宝系统发送该交易状态通知 //调试用，写文本函数记录程序运行情况是否正常 //logResult("这里写入想要调试的代码变量值，或其他运行的结果记录"); } else if ($_POST['trade_status'] == 'TRADE_SUCCESS') { //判断该笔订单是否在商户网站中已经做过处理 //如果没有做过处理，根据订单号（out_trade_no）在商户网站的订单系统中查到该笔订单的详细，并执行商户的业务程序 //请务必判断请求时的total_fee、seller_id与通知时获取的total_fee、seller_id为一致的 //如果有做过处理，不执行商户的业务程序 //注意： //付款完成后，支付宝系统发送该交易状态通知 //调试用，写文本函数记录程序运行情况是否正常 //logResult("这里写入想要调试的代码变量值，或其他运行的结果记录"); } //——请根据您的业务逻辑来编写程序（以上代码仅作参考）—— echo "success"; //请不要修改或删除 //////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////// } else { //验证失败 echo "fail"; //调试用，写文本函数记录程序运行情况是否正常 //logResult("这里写入想要调试的代码变量值，或其他运行的结果记录"); } } public function alipay_wap_return() { $alipay_config = Config::get('alipay_wap_config'); //计算得出通知验证结果 $alipayNotify = new \Alipay_wap\AlipayNotify($alipay_config); $verify_result = $alipayNotify->verifyReturn(); if ($verify_result) {//验证成功 ////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////// //请在这里加上商户的业务逻辑程序代码 //——请根据您的业务逻辑来编写程序（以下代码仅作参考）—— //获取支付宝的通知返回参数，可参考技术文档中页面跳转同步通知参数列表 //商户订单号 $out_trade_no = $_GET['out_trade_no']; //支付宝交易号 $trade_no = $_GET['trade_no']; //交易状态 $trade_status = $_GET['trade_status']; if ($_GET['trade_status'] == 'TRADE_FINISHED' || $_GET['trade_status'] == 'TRADE_SUCCESS') { //判断该笔订单是否在商户网站中已经做过处理 //如果没有做过处理，根据订单号（out_trade_no）在商户网站的订单系统中查到该笔订单的详细，并执行商户的业务程序 //如果有做过处理，不执行商户的业务程序 } else { echo "trade_status=" . $_GET['trade_status']; } /*echo "验证成功<br />";*/ //p($_GET);die; //——请根据您的业务逻辑来编写程序（以上代码仅作参考）—— /**验证成功，请加入自己逻辑**/ } ///////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////// } else { //验证失败 //如要调试，请看alipay_notify.php页面的verifyReturn函数 echo "验证失败"; } } ```