小编给大家分享一下怎么用vue.js和laravel实现微信支付，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！
创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都做网站、网站建设、滨湖网络推广、小程序设计、滨湖网络营销、滨湖企业策划、滨湖品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供滨湖建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com
注：此项是微信公众号开发，请在往下看之前，先实现网页微信授权登陆功能，具体参看我简书的另一篇文章：https://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','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.接下来你就可以测试了
看完了这篇文章，相信你对“怎么用vue.js和laravel实现微信支付”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
