詳解用vue.js和laravel實(shí)現(xiàn)微信支付
注:此項(xiàng)是微信公眾號(hào)開發(fā),請(qǐng)?jiān)谕驴粗埃葘?shí)現(xiàn)網(wǎng)頁(yè)微信授權(quán)登陸功能,具體參看我簡(jiǎn)書的另一篇文章: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'),//商家號(hào)ID,請(qǐng)將其放在.env文件中
'key' => env('WECHAT_PAYMENT_KEY', 'key-for-signature'),//商家支付key,請(qǐng)將其放在.env文件中
'cert_path' => env('WECHAT_PAYMENT_CERT_PATH', storage_path('app/public/apiclient_cert.pem')), //微信支付證書apiclient_cert.pem的絕對(duì)路徑,我放在storage/app/public/下
'key_path' => env('WECHAT_PAYMENT_KEY_PATH', storage_path('app/public/apiclient_key.pem')), //微信支付證書apiclient_key.pem的絕對(duì)路徑,我放在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ù),請(qǐng)依照自己的情況配置,請(qǐng)勿直接拷貝代碼!
2.配置微信支付和回調(diào)路由
//以下路由我放在api.php路由里,如果你放在web.php路由,請(qǐng)自行調(diào)整!
Route::middleware('api')->post('wxpay','BillsController@wxpay');
Route::middleware('api')->post('wx_notify','BillsController@wxnotify');
3.在相應(yīng)的控制器里創(chuàng)建wxpay的方法
/**
* 這是我自己項(xiàng)目的內(nèi)部代碼示例,具體根據(jù)自己的業(yè)務(wù)邏輯調(diào)整,切不可直接拷貝!
*/
public function wxpay(Request $request)
{
//本實(shí)例傳遞的參數(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', // 支付結(jié)果通知網(wǎng)址,如果不設(shè)置則會(huì)使用配置里的默認(rèn)地址
'openid' => $openid, // trade_type=JSAPI,此參數(shù)必傳,用戶在商戶appid下的唯一標(biāo)識(shí),
// ...
];
$order = new Order($attributes);
$result = $this->wechat->payment->prepare($order);
if ($result->return_code == 'SUCCESS' && $result->result_code == 'SUCCESS'){
//創(chuàng)建預(yù)訂單
$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.在相應(yīng)的控制器里添加回調(diào)wxnotify方法
/**
* 這是我自己項(xiàng)目的內(nèi)部代碼示例,具體根據(jù)自己的業(yè)務(wù)邏輯調(diào)整,切不可直接拷貝!
*/
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)處理完了,訂單沒(méi)找到,別再通知我了
}
// 如果訂單存在
// 檢查訂單是否已經(jīng)更新過(guò)支付狀態(tài)
if ($order->paid_at) { // 假設(shè)訂單字段“支付時(shí)間”不為空代表已經(jīng)支付
return true; // 已經(jīng)支付成功了就不再更新了
}
// 用戶是否支付成功
if ($successful) {
// 不是已經(jīng)支付狀態(tài)則修改為已經(jīng)支付狀態(tài)
$order->paid_at = Carbon::now(); // 更新支付時(shí)間為當(dāng)前時(shí)間
$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" ) {
# 回調(diào)成功后跳轉(zhuǎn)
# router.push({name: 'Room',params:{id:this.id}});
}
}
);
})
},
6.微信公眾平臺(tái)配置
1) 在“公眾賬號(hào)設(shè)置”—“JS接口安全域名”設(shè)置中填寫前端域名
2) 在“微信支付”—“開發(fā)配置”頁(yè)面中,公眾賬號(hào)支付下填寫“支付授權(quán)目錄”,注意的是,此授權(quán)url為前端支付按鈕所在頁(yè)面的url
7.接下來(lái)你就可以測(cè)試了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程
pinia是一個(gè)輕量級(jí)的狀態(tài)管理庫(kù),屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下2022-11-11
element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn)
本文主要介紹了element input輸入框自動(dòng)獲取焦點(diǎn)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10
基于Vue的SPA動(dòng)態(tài)修改頁(yè)面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動(dòng)態(tài)修改頁(yè)面title的方法,需要的朋友可以參考下2018-01-01
Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實(shí)現(xiàn)邏輯復(fù)用的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
Vue 實(shí)用分頁(yè)paging實(shí)例代碼
本篇文章主要介紹了Vue 實(shí)用分頁(yè)paging實(shí)例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
Vue 權(quán)限控制的兩種方法(路由驗(yàn)證)
這篇文章主要介紹了Vue 權(quán)限控制的兩種方法(路由驗(yàn)證),每種方法給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08

