详解用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.接下来你就可以测试了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。