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


Posted in Javascript onJune 23, 2017

注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:https://3water.com/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','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接口安全域名”设置中填写前端域名

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

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

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

Javascript 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
Mar 01 Javascript
深入浅析Vue组件开发
Nov 25 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
微信小程序页面间值传递的两种方法
Nov 26 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 #Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 #Javascript
VUE中v-model和v-for指令详解
Jun 23 #Javascript
JavaScript正则表达式简单实用实例
Jun 23 #Javascript
js中的事件委托或是事件代理使用详解
Jun 23 #Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 #Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 #Javascript
You might like
快速保存网页中所有图片的方法
2006/06/23 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)
2014/08/30 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
2016/04/07 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
jQuery插件扩展操作入门示例
2017/01/16 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
基于Vue实现关键词实时搜索高亮显示关键词
2018/07/21 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
js 判断当前时间是否处于某个一个时间段内
2019/09/19 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
numpy.ndarray 交换多维数组(矩阵)的行/列方法
2018/08/02 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
贪睡宠物用品:Snoozer Pet Products
2020/02/04 全球购物
小学生中国梦演讲稿
2014/04/23 职场文书
初中生毕业评语
2014/12/29 职场文书
员工考勤管理制度
2015/08/06 职场文书
MySQL约束超详解
2021/09/04 MySQL