100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 详解用vue.js和laravel实现微信支付

详解用vue.js和laravel实现微信支付

时间:2018-07-18 07:01:44

相关推荐

详解用vue.js和laravel实现微信支付

注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:/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.接下来你就可以测试了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。