微信支付

使用场景

在插件开发过程中，微信支付是使用比较频繁的功能。利用豆信封装的方法，可以快速的在h5页面实现微信支付功能。

实现过程

1、在框架后台支付配置处填写公众号商户平台信息。微信支付 - 图1

2、在微信公众号后台支付配置处填写支付授权目录。微信支付 - 图2

3、在需要调用公众号支付的页面注册JSSDK。

  1. <html>
  2.     <head>
  3.         <title>微信支付</title>
  4.         {:hook('jssdk', true)}
  5.     </head>
  6.     <body>
  7.         ...
  8.     </body>
  9. </html>

4、选定一个用于调起微信支付的DOM元素。

  1. <a href="javascript:;" class="weui_btn weui_btn_plain_primary" id="donate">我要捐赠</a>

5、为微信支付触发元素绑定事件，并获取业务逻辑需要用到的数据。

  1. <script>
  2. $(document).on('click', '#donate', function() {
  3.     var price = $('input[name=money]');
  4.     var content = $('textarea[name=content]');
  5.     var is_anonymous = $('input[name=is_anonymous]');
  6.     if (!price.val()) {
  7.         alert('请填写你要捐赠的金额');
  8.         price.focus();
  9.         return false;
  10.     }
  11.     var reg = new RegExp('^[0-9]+(\.[0-9]{2})?$');
  12.     if (!reg.test(price.val())) {
  13.         alert('请正确填写你要捐赠的金额，整数或者包含两位小数的浮点数');
  14.         price.focus();
  15.         return false;
  16.     }
  17.     var data = {
  18.         price : price.val(),
  19.         is_anonymous : is_anonymous.val(),
  20.         content : content.val()
  21.     };
  22.     pre_donate(data);
  23. });
  24. </script>

6、在上一步骤中，获取到了业务逻辑需要用到的数据，并调用pre_donate()方法将数据写入数据库，此demo演示的为预捐赠过程。在电商功能中常用的是预支付功能，即把订单信息预先写入订单表，并设置订单的支付状态为0，稍后调起微信支付，用户支付成功后把支付成功的数据异步发送到一个处理方法，并设置订单的支付状态为1，业务完成。

  1. /**
  2.  * 预捐赠（支付前写入捐赠数据）
  3.  * @author 艾逗笔<765532665@qq.com>
  4.  */
  5. function pre_donate(data) {
  6.     $.ajax({
  7.         url : "{:create_addon_url('pre_donate')}",
  8.         type : 'post',
  9.         dataType : 'json',
  10.         data : data,
  11.         success : function(res) {
  12.             if (res.errcode == 1) {
  13.                 var price = res.money;
  14.                 var orderid = res.orderid;
  15.                 var notify = res.notify;
  16.                 pay(price, orderid, notify, res, pay_ok);           // 发起支付
  17.             } else {
  18.                 alert(res.errmsg);
  19.             }
  20.         },
  21.         error : function() {
  22.             alert('捐赠失败');
  23.         }
  24.     });
  25. }

pay()是豆信封装的调起微信支付的方法，只要按照pay(price, orderid, notify, res, pay_ok)的固定格式即可调起微信支付。其中price为支付的金额（单位：元）、orderid为自己定义的业务订单号、notify为支付完成后发送异步通知到并用来更新订单支付状态的地址、res为附加数据（例如发起支付前填写的备注信息、留言内容等）、pay_ok为异步处理支付成功推送消息后进行前端响应的方法。pay()方法所需的参数均在请求的url : "{:create_addon_url('pre_donate')}"中进行设置。

7、上一步提到需要用一个控制器方法来对数据进行支付前的处理。可以按照这种方式进行处理并返回调起支付所需的参数。

  1. /**
  2.  * 预捐赠
  3.  * @author 艾逗笔<765532665@qq.com>
  4.  */
  5. public function pre_donate() {
  6.     $data['mpid'] = get_mpid();
  7.     $data['openid'] = get_openid();
  8.     $data['money'] = floatval(I('price'));
  9.     $data['is_anonymous'] = intval(I('is_anonymous'));
  10.     $data['pay_status'] = 0;
  11.     $data['create_time'] = time();
  12.     $data['content'] = I('content');
  13.     $data['is_show'] = 0;
  14.     $data['orderid'] = $data['mpid'] . time() . rand(100,999);
  15.     $res = M('idou_donate_list')->add($data);
  16.     if (!$res) {
  17.         $data['errcode'] = 0;
  18.         $data['errmsg'] = '捐赠失败';
  19.     } else {
  20.         $data['errcode'] = 1;
  21.         $data['errmsg'] = '捐赠成功';
  22.         $data['notify'] = create_addon_url('pay_ok');
  23.         $data['jump_url'] = create_addon_url('pay_ok');
  24.     }
  25.     $this->ajaxReturn($data);
  26. }

此步骤的关键是把数据写入到数据表并设置pay_status=0，处理完数据后返回notify=create_addon_url('pay_ok')，即接受支付成功异步通知的地址为同一控制器中的pay_ok方法。

8、完成前面所有步骤之后，用户端能够成功调起微信支付框。用户输入支付密码完成微信支付后，微信支付结果会异步发送到notify指定地址，即控制器中的pay_ok方法。支付完成后也会同步调用pay()方法最后一个参数指定的js方法，即调起微信支付的html页面中的js方法pay_ok。

9、异步处理（控制器方法）

  1. /**
  2.  * 支付成功
  3.  * @author 艾逗笔<765532665@qq.com>
  4.  */
  5. public function pay_ok() {
  6.     if (I('out_trade_no')) {
  7.         $orderid = I('out_trade_no');
  8.         $mchid = I('mch_id');
  9.         $payStatus = M('mp_payment')->where([
  10.             'mchid' => $mchid,
  11.             'orderid' => $orderid
  12.         ])->getField('status');
  14.         if ($payStatus == 1) {
  15.             $data['pay_status'] = 1;
  16.             $data['is_show'] = 1;
  17.             M('idou_donate_list')->where(['orderid'=>$orderid])->save($data);
  18.         }
  19.     }
  20.     $this->display();
  21. }

此步骤的关键是接受微信支付结果的异步通知，如果支付结果是SUCCESS，则把先前创建的订单的支付状态设置为1。

10、同步处理（视图中的js方法）

  1. /**
  2.   * 支付成功后的回调函数
  3.   * @author 艾逗笔<765532665@qq.com>
  4.   */
  5. function pay_ok(data) {
  6.     if (data.errcode == 1) {
  7.         window.location.href = data.jump_url;
  8.     }
  9. }

以上即为在插件中使用豆信封装的业务逻辑调起微信支付的全过程。理解起来可能有点困难，可以参考微捐赠插件实现的微信支付功能来加深对此文档的理解。

支付完成后，可以在框架后台>微信支付>支付记录页面插件支付记录微信支付 - 图3