詳解用vue.js和laravel實現(xiàn)微信支付
注:此項是微信公眾號開發(fā),請在往下看之前,先實現(xiàn)網(wǎng)頁微信授權登陸功能,具體參看我簡書的另一篇文章:http://www.dbjr.com.cn/article/117004.htm
1.打開app/config/wechat.php,配置微信支付參數(shù):
/* * 微信支付 */ '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', ''), // ... ],
以上參數(shù),請依照自己的情況配置,請勿直接拷貝代碼!
2.配置微信支付和回調路由
//以下路由我放在api.php路由里,如果你放在web.php路由,請自行調整! Route::middleware('api')->post('wxpay','BillsController@wxpay'); Route::middleware('api')->post('wx_notify','BillsController@wxnotify');
3.在相應的控制器里創(chuàng)建wxpay的方法
/** * 這是我自己項目的內部代碼示例,具體根據(jù)自己的業(yè)務邏輯調整,切不可直接拷貝! */ public function wxpay(Request $request) { //本實例傳遞的參數(shù)為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', // 支付結果通知網(wǎng)址,如果不設置則會使用配置里的默認地址 'openid' => $openid, // trade_type=JSAPI,此參數(shù)必傳,用戶在商戶appid下的唯一標識, // ... ]; $order = new Order($attributes); $result = $this->wechat->payment->prepare($order); if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){ //創(chuàng)建預訂單 $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方法
/** * 這是我自己項目的內部代碼示例,具體根據(jù)自己的業(yè)務邏輯調整,切不可直接拷貝! */ 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.'; // 告訴微信,我已經(jīng)處理完了,訂單沒找到,別再通知我了 } // 如果訂單存在 // 檢查訂單是否已經(jīng)更新過支付狀態(tài) if ($order->paid_at) { // 假設訂單字段“支付時間”不為空代表已經(jīng)支付 return true; // 已經(jīng)支付成功了就不再更新了 } // 用戶是否支付成功 if ($successful) { // 不是已經(jīng)支付狀態(tài)則修改為已經(jīng)支付狀態(tài) $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) 在“微信支付”—“開發(fā)配置”頁面中,公眾賬號支付下填寫“支付授權目錄”,注意的是,此授權url為前端支付按鈕所在頁面的url
7.接下來你就可以測試了
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
element input輸入框自動獲取焦點的實現(xiàn)
本文主要介紹了element input輸入框自動獲取焦點的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10基于Vue的SPA動態(tài)修改頁面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動態(tài)修改頁面title的方法,需要的朋友可以參考下2018-01-01Vue3 composition API實現(xiàn)邏輯復用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復用的方法,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08