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

注：此项是微信公众号开发，请在往下看之前，先实现网页微信授权登陆功能，具体参看我简书的另一篇文章：

1.打开app/config/wechat.PHP，配置微信支付参数：

[ '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.配置微信支付和回调路由

post('wxpay','BillsController@wxpay'); Route::middleware('api')->post('wx_notify','BillsController@wxnotify');

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

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->g<a href="https://www.jb51.cc/tag/eto/" target="_blank" class="keywords">eto</a>penid($user_id);
  $<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast = $this-><a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast->getById($<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast_id);
  $speaker_id = $<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast->speaker_id;
  $body = $<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast->title;
  $detail = '';
  $paid_at = null;

  $status = 'pre_paid';
  $amount = ($<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast->price)*$num;

  $attributes = [
    '<a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_type'    => 'JSAPI',// JSAPI，NATIVE，APP...
    'body'       => $body,'detail'      => $detail,'out_<a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_no'   => $out_<a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_no,'total_fee'    => $amount,// 单位：分
    'notify_url'    => $_ENV['APP_URL'].'/api/wx_notify',// 支付结果<a href="https://www.jb51.cc/tag/tongzhi/" target="_blank" class="keywords">通知</a>网址，如果不设置则会使用配置里的<a href="https://www.jb51.cc/tag/mo/" target="_blank" class="keywords">默</a>认地址
    'openid'      => $openid,// <a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_type=JSAPI，此参数必传，<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>在商户appid下的唯一标识，
    // ...
  ];

  $order = new Order($attributes);
  $result = $this->wechat->payment->prepare($order);
  if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){
    //创建预订单
    $p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m = [
      'out_<a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_no'=>$out_<a href="https://www.jb51.cc/tag/Trad/" target="_blank" class="keywords">Trad</a>e_no,'user_id'=>$user_id,'<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast_id'=>$<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>adcast_id,'speaker_id'=>$speaker_id,'body'=>$body,'detail'=>$detail,'paid_at'=>$paid_at,'amount'=>$amount,'flag'=>$flag,'status'=>$status,'num'=>$num
    ];
    $this->bill->store($p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>m);
    //返回
    $prepayId = $result->prepay_id;
    $con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a> = $this->wechat->payment->con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>ForPayment($prepayId,false);

    return response()->json($con<a href="https://www.jb51.cc/tag/fig/" target="_blank" class="keywords">fig</a>);
  }
}

}

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

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的方法代码参考

{ 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.接下来你就可以测试了

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