林梓技术分享集Vue.js专区Laravel

用vue.js和laravel实现微信支付

2017-06-16  本文已影响355人  童蒙vlog

注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:http://www.jianshu.com/p/f670b37336ff

1.打开app/config/wechat.php,配置微信支付参数:

    /*
     * 微信支付
     */
     'payment' => [
         'merchant_id'        => env('WECHAT_PAYMENT_MERCHANT_ID', 'your-mch-id'),//商家号ID,请将其放在.env文件中
         'key'                => env('WECHAT_PAYMENT_KEY', 'key-for-signature'),//商家支付key,请将其放在.env文件中
         'cert_path'          => env('WECHAT_PAYMENT_CERT_PATH', storage_path('app/public/apiclient_cert.pem')), //微信支付证书apiclient_cert.pem的绝对路径,我放在storage/app/public/下
         'key_path'           => env('WECHAT_PAYMENT_KEY_PATH', storage_path('app/public/apiclient_key.pem')),     //微信支付证书apiclient_key.pem的绝对路径,我放在storage/app/public/下径
         // 'device_info'     => env('WECHAT_PAYMENT_DEVICE_INFO', ''),
         // 'sub_app_id'      => env('WECHAT_PAYMENT_SUB_APP_ID', ''),
         // 'sub_merchant_id' => env('WECHAT_PAYMENT_SUB_MERCHANT_ID', ''),
         // ...
     ],

以上参数,请依照自己的情况配置,请勿直接拷贝代码!

2.配置微信支付和回调路由

//以下路由我放在api.php路由里,如果你放在web.php路由,请自行调整!
Route::middleware('api')->post('wxpay','BillsController@wxpay');
Route::middleware('api')->post('wx_notify','BillsController@wxnotify');

3.在相应的控制器里创建wxpay的方法

  /**
    * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
    */
    public function wxpay(Request $request)
    {
        //本实例传递的参数为user_id 和 broadcast_id,具体
        if($request->has('user_id') && $request->has('broadcast_id')){
           $out_trade_no = md5(Carbon::now().str_random(8));
            $user_id = $request->get('user_id');
            $broadcast_id = $request->get('broadcast_id');
            $num = $request->get('num');
            $flag = $request->get('flag');

            $openid = $this->user->getOpenid($user_id);
            $broadcast = $this->broadcast->getById($broadcast_id);
            $speaker_id = $broadcast->speaker_id;
            $body = $broadcast->title;
            $detail = '';
            $paid_at = null;

            $status = 'pre_paid';
            $amount = ($broadcast->price)*$num;

            $attributes = [
                'trade_type'       => 'JSAPI', // JSAPI,NATIVE,APP...
                'body'             => $body, 
                'detail'           => $detail,
                'out_trade_no'     => $out_trade_no,
                'total_fee'        => $amount, // 单位:分
                'notify_url'       => $_ENV['APP_URL'].'/api/wx_notify', // 支付结果通知网址,如果不设置则会使用配置里的默认地址
                'openid'           => $openid, // trade_type=JSAPI,此参数必传,用户在商户appid下的唯一标识,
                // ...
            ];

            $order = new Order($attributes);
            $result = $this->wechat->payment->prepare($order);
            if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){
                //创建预订单
                $param = [
                    'out_trade_no'=>$out_trade_no,
                    'user_id'=>$user_id,
                    'broadcast_id'=>$broadcast_id,
                    'speaker_id'=>$speaker_id,
                    'body'=>$body,
                    'detail'=>$detail,
                    'paid_at'=>$paid_at,
                    'amount'=>$amount,
                    'flag'=>$flag,
                    'status'=>$status,
                    'num'=>$num
                ];
                $this->bill->store($param);
                //返回
                $prepayId = $result->prepay_id;
                $config = $this->wechat->payment->configForPayment($prepayId,false);

                return response()->json($config);
            }
        }

    }

4.在相应的控制器里添加回调wxnotify方法

     /**
     * 这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝!
     */
    public function wxnotify()
    {
        $response = $this->wechat->payment->handleNotify(function($notify, $successful){
            $order = $this->bill->getBillByOrderno($notify->out_trade_no);//查询订单($notify->out_trade_no);
            if (!$order) { // 如果订单不存在
                return 'Order not exist.'; // 告诉微信,我已经处理完了,订单没找到,别再通知我了
            }
            // 如果订单存在
            // 检查订单是否已经更新过支付状态
            if ($order->paid_at) { // 假设订单字段“支付时间”不为空代表已经支付
                return true; // 已经支付成功了就不再更新了
            }
            // 用户是否支付成功
            if ($successful) {
                // 不是已经支付状态则修改为已经支付状态
                $order->paid_at = Carbon::now(); // 更新支付时间为当前时间
                $order->status = 'paid';
            } else { // 用户支付失败
                $order->status = 'paid_fail';
            }
            $order->save(); // 保存订单
            return true; // 返回处理完成
        });
        return $response; 
    }

5.vue.js中methods的方法代码参考

      wechatpay(){
        var param = {
          'user_id':this.getStorage(),
          'broadcast_id':this.id,
          'num':1,
          'flag':'buy',
        }
        this.$http.post(this.GLOBAL.apiUrl+'/wxpay',param).then((response) => {
          WeixinJSBridge.invoke(
            'getBrandWCPayRequest', response.data,
            function(res){
              if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                # 回调成功后跳转
                # router.push({name: 'Room',params:{id:this.id}});
              }
            }
          );
        })
      },

6.微信公众平台配置

  1. 在“公众账号设置”—“JS接口安全域名”设置中填写前端域名
  1. 在“微信支付”—“开发配置”页面中,公众账号支付下填写“支付授权目录”,注意的是,此授权url为前端支付按钮所在页面的url

7.接下来你就可以测试了,如有问题,请留言.

上一篇下一篇

猜你喜欢

热点阅读