详解用vue.js和laravel实现微信支付
注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:https://www.nhooo.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的方法
/** *这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝! */ publicfunctionwxpay(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=newOrder($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); returnresponse()->json($config); } } }
4.在相应的控制器里添加回调wxnotify方法
/** *这是我自己项目的内部代码示例,具体根据自己的业务逻辑调整,切不可直接拷贝! */ publicfunctionwxnotify() { $response=$this->wechat->payment->handleNotify(function($notify,$successful){ $order=$this->bill->getBillByOrderno($notify->out_trade_no);//查询订单($notify->out_trade_no); if(!$order){//如果订单不存在 return'Ordernotexist.';//告诉微信,我已经处理完了,订单没找到,别再通知我了 } //如果订单存在 //检查订单是否已经更新过支付状态 if($order->paid_at){//假设订单字段“支付时间”不为空代表已经支付 returntrue;//已经支付成功了就不再更新了 } //用户是否支付成功 if($successful){ //不是已经支付状态则修改为已经支付状态 $order->paid_at=Carbon::now();//更新支付时间为当前时间 $order->status='paid'; }else{//用户支付失败 $order->status='paid_fail'; } $order->save();//保存订单 returntrue;//返回处理完成 }); return$response; }
5.vue.js中methods的方法代码参考
wechatpay(){ varparam={ '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.接下来你就可以测试了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。