thinkphp5微信公众号支付 - 好文

实习期间，参与了微信公众号开发，接触到了微信公众号支付，在开发过程中踩了不少的坑，好在顺利完成了任务，在这里，我觉得有必要和大家分享一下，也便于自己以后参考。

一、场景介绍

用户通过微信公众号打开网页，进入到如下界面，选择或输入相应金额为网站中用户账号充值。

二、开发步骤

这里就不再介绍商户如何接入微信支付，官方文档中已经有了详细介绍，具体请参考微信公众号支付官方文档。直接上业务流程。首先我们来看看微信官方给我们的流程图：

刚开始接触，看到这个流程图可能会有点懵逼，没关系，这里我给大家画了一个简单的流程图：

概括一下：

1）获取用户授权(当用户进入到充值界面的时候)

2）后台调用统一下单接口获取预支付订单，并返回给前端

3）前端H5调起微信支付（调起成功后，会提示输入支付密码），

4）微信向前端和回调地址发送支付结果通知（两者时序不分前后，以回调地址通知为准）

5）回调处理（很重要，后面详细介绍）

好了，相信你已经对微信公众号支付的整个流程有了一定的了解，那我们就开始编码吧。

三、代码实现

1、前端表单提交充值金额，核心代码如下：
<div class="weui-cell"> <div class="weui-cell__hd"> <label
class="weui-label">金额：</label> </div> <div class="weui-cell__bd"> <input
class="weui-input" name="money" id = "money" type="number"placeholder="金额">
</div> </div> <div class="weui-btn-area"> <button class="weui-btn
weui-btn_primary" id="chargebtn" type="button">确定</button> </div>
ajax请求将数据发送给后台
//请求支付，提交支付金额，让后台进行统一下单操作 function charge() { var money = $('#money').val();
$.ajax({ url:header_url+'pay/pay', //后台接收数据，进行统一下单操作的地址，填你自己的 dataType:'json',
type:'POST', data:{'money':money}, success:function (data) {
//后台统一下单完成，返回前端数据中包含预支付订单的各种参数 var res = eval('('+data+')'); //调起支付
callpay(res['data']); } }) }
统一下单和前端调起支付，在下面详细讲解 ↓↓↓↓↓↓

2、基本配置、代码引入及统一下单操作

1）tp5引入官方案例代码

下载官方案例文件：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
<https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1>

在tp5项目文件extend目录下创建pay目录，在pay目录下创建wxpay目录，将代码解压到此目录。（你的项目可能不止会使用到微信支付，所有我们建立的目录结构要清晰规范）,并且在wxpay目录下创建cert目录保存商户证书文件（apiclient_cert.pem和apiclient_key.pem）

2）微信支付配置

配置官方案例文件下的lib文件夹下的WxPay.Config.php，至于怎么填这里就不再赘述，案例中有详细解释

3）代码引入

我创建了一个server模块，在pay控制器里专门处理微信支付。首先引入必要文件
<?php namespace app\server\controller; use app\server\model\Receive; use
app\server\model\Recharge; use app\server\model\Wuser; use think\Loader; use
think\Controller; Loader::import('pay.wxpay.lib.WxPay',
EXTEND_PATH,'.Api.php'); Loader::import('pay.wxpay.example.WxPay',
EXTEND_PATH,'.JsApiPay.php'); Loader::import('pay.wxpay.example.log',
EXTEND_PATH,'.php'); Loader::import('pay.wxpay.lib.WxPay',
EXTEND_PATH,'.Config.php'); class Pay extends Controller {

至此，我们就可以开始进行微信公众号支付后台开发了。前面说到了前端发送充值金额到后台（之前你要获取到了用户授权,得到用户openID，保存在session中），那么后台接收数据，进行统一下单操作。

4）统一下单（API: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
<https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1> ）

构造统一下单对象，对象的字段包括里面的必填字段，有额外需要的可以自己添加。特别注意里面对请求参数的描述。下面是我使用到的参数：

appid  -> 公众账号ID （发起支付请求的公众号）

mch_id -> 商户号（收款人）

openid -> 微信用户openid（付款人）

out_trade_no  -> 商户订单号（商户系统内部订单号，要求32个字符内，只能是数字、大小写字母_-|* 且在同一个商户号下唯一）

total_fee -> 订单总金额

body  -> 商品描述

attach  -> 附加数据（在查询API和支付通知中原样返回，可作为自定义参数使用）

time_start -> 交易开始时间

time_expire -> 交易结束时间

goods_tag -> 订单优惠标记（订单优惠标记，使用代金券或立减优惠功能时需要的参数，实际上这里用不到，可以不要该参数）

notify_url -> 回调地址（异步接收微信支付结果通知的回调地址，通知url必须为外网可访问的url，不能携带参数）

trade_type -> 交易类型（支付类型，这里用到的是JSAPI 公众号支付）

spbill_create_ip ->调用微信支付API的机器IP

nonce_str -> 随机字符串（随机字符串，长度要求在32位以内）

sign -> 签名（用上面的参数按照规定签名之后得到的结果，具体前面步骤请查看文档和官方案例代码，已有详细描述）

具体代码如下：
public function pay() { $tools = new \JsApiPay();
if($this->request->isPost()){ $data = input('post.'); $money = $data['money']
*100; //微信支付以分为单位 $logHandler= new
\CLogFileHandler(EXTEND_PATH."pay/wxpay/logs/".date('Y-m-d').'.log'); $log =
\Log::Init($logHandler, 15); //①、获取用户openid $openId = session('openid');
$userId = session('id'); $input = new \WxPayUnifiedOrder();
$input->SetBody("test"); //商品描述 $input->SetAttach($userId);
//附加数据，在查询API和支付通知中原样返回，可作为自定义参数使用
$input->SetOut_trade_no(\WxPayConfig::MCHID.date("YmdHis"));//商户订单号
$input->SetTotal_fee($money);//订单金额
$input->SetTime_start(date("YmdHis"));//交易起始时间
$input->SetTime_expire(date("YmdHis", time() + 600));//交易结束时间
$input->SetGoods_tag("test"); //订单优惠标记，使用代金券或立减优惠功能时需要的参数，实际上这里可以不要
$input->SetNotify_url("http://www.xxxx.com/wechat/index.php/server/pay/notify");//接收回调通知地址
$input->SetTrade_type("JSAPI"); //支付类型 $input->SetOpenid($openId); //用户openid
$order = \WxPayApi::unifiedOrder($input); //统一下单，该方法中包含了签名算法 $jsApiParameters =
$tools->GetJsApiParameters($order); //统一下单参数
//将统一下单接口生成的预支付订单参数返回给前端，前端就可以调取支付了 return
getBack(1,$jsApiParameters);//getBack是我自定义的方法，就是给前端ajax请求返回json格式数据，1代表成功，这里你要自己修改。
}else { //下面是展示前端页面的，与统一下单无关 $openId = session('openid');
$this->assign('user',session('username')); $this->assign('openId',$openId);
return $this->fetch('recharge'); } }

在上面的方法中我们只需要给必要的参数就行了，签名和具体下单操作，在官方案例已经给我们实现了，具体请查看unifiedOrder()和GetJsApiParameters()方法代码。当然官方案例中可能会存在一些错误，比如我就遇到，一个参数（好像是设置请求过期时间的）没有定义就直接使用了，我直接给他设置了一个默认值。打断点改错误，我相信大家还是有一定debug能力的。

现在我们在后台调用统一下单接口，得到了预支付订单，并返回给前端，前端就可以通过后台返回的预支付订单参数来调起支付，调起成功（参数没有问题，统一下单无误）会提示输入支付密码。

3、前端h5调起支付
//前端吊起支付 //jsApiParameters是后台返回的预支付订单各种参数的json格式数据 function
callpay(jsApiParameters) { if (typeof WeixinJSBridge == "undefined"){ if(
document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady',
jsApiCall(jsApiParameters), false); }else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall(jsApiParameters));
document.attachEvent('onWeixinJSBridgeReady', jsApiCall(jsApiParameters)); }
}else{ jsApiCall(jsApiParameters); } }
这里我就不得不说我遇到的最大的一个坑了，先看看官方给我们的代码
//调用微信JS api 支付 function jsApiCall() { WeixinJSBridge.invoke(
'getBrandWCPayRequest', <?php echo $jsApiParameters; ?>, function(res){
WeixinJSBridge.log(res.err_msg); alert(res.err_code+res.err_desc+res.err_msg);
} ); }

我之前用官方这个代码，用PHP代码直接输出jsApiParameters，始终提示签名验证失败，我反反复复验证我的统一下单操作，还是提示签名验证失败，实在是找不到错误原因了，最后阅读文档，发现调起支付时参数顺序有要求，会不会是官方案例中的预支付订单参数顺序出错了呢？于是进行下面的修改
//前端吊起支付 function jsApiCall(jsApiParameters) { var jsApiParameters = eval('('
+ jsApiParameters + ')'); console.log(jsApiParameters); WeixinJSBridge.invoke(
'getBrandWCPayRequest',{ "appId":jsApiParameters['appId'], //公众号名称，由商户传入
"timeStamp":jsApiParameters['timeStamp'], //时间戳，自1970年以来的秒数
"nonceStr":jsApiParameters['nonceStr'], //随机串
"package":jsApiParameters['package'], "signType":jsApiParameters['signType'],
//微信签名方式： "paySign":jsApiParameters['paySign']//微信签名 },
//上面参数一定要按照一定的顺序排列，否则会出错（签名验证失败） function(res) {
//前端接收到支付结果通知，get_brand_wcpay_request:ok，支付成功
//（但是不一定就是真的成功了，一切以回调地址中的结果为准，前端接收到支付通知后只做跳转，不做任何处理）
//商户订单处理（更新用户账号余额）要放在回调地址中处理 if(res.err_msg == "get_brand_wcpay_request:ok" ) {
//支付成功，跳转到其他页面 location.href=header_url+'index/balance'; } } ); }
最终成功调起支付，输入支付密码，满怀欣喜的为公司贡献了1分钱！！！

然后你以为这就完了？我们冲了钱，但是我网站账户上面的余额是0啊！订单操作应该放在哪里进行了？是前端接收到成功，再次ajax请求到后台，给用户充钱？NO NO
NO ! 这样的做法极不安全！不是还有一个回调地址也能接收到支付结果通知吗，下面我们就来讲讲回调处理。

4、回调处理

首先看看微信官方的解释：

在完成支付之后，微信会返回支付结果给前端，并且也会向回调地址中发送支付结果通知。这里需要注意的是，前端和回调地址接收到微信支付结果通知的顺序是不确定的，前端接收到的结果不是完全可靠的，所以一切以回调地址中收到的结果为准。在前端接收到返回的支付结果时，只做页面跳转，不做其他处理，应该在回调地址中处理商户订单逻辑（接收到支付成功，更新用户账号余额），看官方给我们的解释：

回调地址中接收到的支付结果数据格式具体请参考api
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7&index=8
<https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7&index=8>

这里还有一个重点，回调地址中接收到的数据，就一定是微信服务器发送过来的吗？也有可能是数据泄露，别人知道了你的回调url,发送伪造的支付结果通知数据到该地址，所以在接收到数据时一定要签名验证过后才做支付成功处理。

最后在接收到数据完成订单业务操作之后，千万不要忘了返回给微信处理结果（告诉微信这个订单我处理完了，你不要再发消息过来了）试想，如果你不返回处理结果给微信，微信会再次发送支付结果通知到你的回调地址，这时你接收到数据，又做同样的操作，用户一次付款，后台多次给账号充值，导致公司财产严重损失！

说了这么多，来看看代码上改如何处理：
public function notify() { ini_set('date.timezone','Asia/Shanghai');
error_reporting(E_ERROR); //初始化日志 $logHandler= new
\CLogFileHandler(EXTEND_PATH.'pay/wxpay/logs/'.date('Y-m-d').'.log'); $log =
\Log::Init($logHandler, 15); $xml = $this->postdata(); $xmlTpl =
"<xml><return_code><![CDATA[%s]]></return_code><return_msg><![CDATA[%s]]></return_msg></xml>";
if(!$xml) { $result = sprintf($xmlTpl,'FAIL','xml数据异常！'); } //日志记录接收到的数据
\Log::DEBUG("begin notify"); \Log::DEBUG("$xml"); //禁止引用外部xml实体
libxml_disable_entity_loader(true); $obj =
json_decode(json_encode(simplexml_load_string($xml, 'SimpleXMLElement',
LIBXML_NOCDATA)), true); ksort($obj); $str = $this->ToUrlParams($obj); $string
= $str."&key=".\WxPayConfig::KEY; $user_sign = strtoupper(md5($string));
if($user_sign == $obj['sign']) { \Log::DEBUG("回调签名验证成功"); //验证成功 $order =
$obj['out_trade_no'];//订单号 $userid = $obj['attach'];//用户id $money =
$obj['total_fee'];//金额 $transaction_id = $obj['transaction_id'];//微信支付订单号
$recharge_record = new Recharge(); //检查该订单是否已经处理过，处理过就直接返回微信 $status =
$recharge_record->where('wechat_order_code',$transaction_id)->find();
if($status) { $result = sprintf($xmlTpl,'SUCCESS','OK'); echo $result; exit();
} //更新用户账号余额 $user = new Wuser(); $res =
$user->where('id',$userid)->field('property')->find(); //最好两张表关联写入 $money =
$money*0.01; \Log::DEBUG('账号余额为:'.$res['property']+$money); $ret =
$user->save([ 'property'=>$res['property']+$money, 'update_time'=>time()
],['id'=>$userid]); if($ret){ \Log::DEBUG("充值成功"); $recharge_record->save([
'user_id'=>$userid, 'money'=>$money, 'create_time'=>time(),
'out_trade_no'=>$order, 'wechat_order_code'=>$transaction_id ]); $result =
sprintf($xmlTpl,'SUCCESS','OK'); }else{ \Log::DEBUG("充值失败"); $result =
sprintf($xmlTpl,'FAIL','充值失败'); } }else{ \Log::DEBUG("签名错误"); $result =
sprintf($xmlTpl,'FAIL','签名错误！'); } echo $result; exit(); } /* * 接收post数据 */
public function postdata() { $receipt = $_REQUEST; if($receipt==null){ $receipt
= file_get_contents("php://input"); if($receipt == null) { $receipt =
$GLOBALS['HTTP_RAW_POST_DATA']; } } return $receipt; } /** * 格式化参数格式化成url参数 */
public function ToUrlParams($value) { $buff = ""; foreach ($value as $k => $v)
{ if($k != "sign" && $v != "" && !is_array($v)){ $buff .= $k . "=" . $v . "&";
} } $buff = trim($buff, "&"); return $buff; }

四、项目总结

至此，我们整个微信公众号支付的开发流程就结束了，希望这篇博文能对大家有所帮助。以上微信公众号支付处理过程是根据自己的理解归纳总结的，不足之处，欢迎大家指正。

热门工具换一换