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

网络编程 JavaScript javascript类库 vue.js 分类:[default] 更新日期: 2016-09-25
本篇文章主要介绍了用vue.js和laravel实现微信支付,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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','[email protected]');
Route::middleware('api')->post('wx_notify','[email protected]');

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接口安全域名”设置中填写前端域名

2) 在“微信支付”—“开发配置”页面中,公众账号支付下填写“支付授权目录”,注意的是,此授权url为前端支付按钮所在页面的url

7.接下来你就可以测试了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • Yii2rbac权限控制之rule教程详解
    Yii2rbac权限控制之rule教程详解
    这篇文章主要介绍了Yii2 rbac权限控制之rule教程详解的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下在我们之前Yii2搭建后台并实现rbac权限控制完整实例教程中,不知道你曾经疑惑过没有一个问题,rule表是做什么的,为什么在整个过程中我们都没有涉及到这张表? 相信我不说,部分人也都会去尝试,或百度或google,到头来也会竹篮打水,这部 ...
  • 详解表单验证正则表达式实例(推荐)
    这篇文章主要介绍了详解表单验证正则表达式实例推荐的相关资料,非常不错,具有参考借鉴价值,特此分享到平台供大家参考验证:!reg.test(value) 邮箱: 代码如下:reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 代码如下:r ...
  • js选择器全面解析
    下面小编就为大家带来一篇js选择器全面解析.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四个选择器的用法. 1.getElemen ...
  • 利用ASP.NETMVC+Bootstrap搭建个人博客之praise.js点赞特效插件(二)
    这篇文章主要介绍了利用ASP.NET和MVC+Bootstrap搭建个人博客之praise.js点赞特效插件二的相关资料,需要的朋友可以参考下在上篇文章给大家介绍了利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一).接下来给大家介绍如果做个点赞插件,一起通过本文学习吧! 1. 为啥要做这个点赞插件?    praise.js是一款小 ...
  • 正则表达式单行、多行模式简介(使用说明)
    正则表达式单行、多行模式简介(使用说明)
    我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数继上几篇正则表达式相关说明(详情:正则表达式 ),我们今天继续讨论下,它的单行,多行模式使用,及容易出现错误地方.单行,多行模式,都是正则表达式的模式修饰符里面出现的参数.目前常用正则表达式都有该使用选项,如:javascript 正则表达 ...
  • 正则表达式性能优化方法高效正则表达式书写
    正则表达式性能优化方法高效正则表达式书写
    这里说的正则表达式优化,主要是针对目前常用的NFA模式正则表达式这里说的正则表达式优化,主要是针对目前常用的NFA模式正则表达式,详细可以参考:正则表达式匹配解析过程探讨分析(正则表达式匹配原理).从上面例子,我们可以推断出,影响NFA类正则表达式(常见语言:GNU Emacs,Java,ergp,less,more,.NET语言, PCRE library ...
猜你喜欢