vue+laravel使用微信Natvite支付

沈大灰

Navite支付介绍

Native支付是指商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。适用于PC网站、实体店单品或订单、媒体广告支付等场景
1.先阅读微信支付接入前的准备文档 文档连接：Native支付接入前准备
2.php下载插件 composer require wechatpay/wechatpay
3.需要把证书文件下载下来用于签名验证。下载的签名文件有例如

4.需要用到的参数配置到env环境变量中 如下

5.代码实现
获取支付二维码链接

1. /**
2.      * 微信二维码预支付
3.      * @param string $total 价格
4.      * @param string $outTradeNo 商户订单号
5.      * @param int $duration 二维码有效时长 单位:秒
6.      * @return array 返回二维码链接
7.      */
8.     public static function wxNativePrePay(string $total, string $outTradeNo, $duration = 180)
9.     {
10.         try {
11.             $config = Common::get_platform_payInfo();
12.             $time = \time();
13.             $time_expire = $time + $duration;
14.             $rfc3339_time = date(DATE_RFC3339, $time_expire);
15.             $total = intval(bcmul($total, 100));
17.             $payInfo = [
18.                 'out_trade_no' => $outTradeNo,
19.                 'appid' => $config['appId'],
20.                 'description' => '支付维修费用',
21.                 'total' => $total,
22.                 'time_expire' => (string)$rfc3339_time,
23.             ];
25.             $instance = Common::wxPayObj();
26.             $resp = $instance
27.                 ->chain('v3/pay/transactions/native')
28.                 ->post(['json' => [
29.                     'mchid' => $config['merchantId'],
30.                     'out_trade_no' => $payInfo['out_trade_no'],
31.                     'time_expire' => $payInfo['time_expire'],
32.                     'appid' => $config['appId'],
33.                     'description' => $payInfo['description'],
34.                     'notify_url' => $config['notify_url'],
35.                     'amount' => [
36.                         'total' => $payInfo['total'],
37.                         'currency' => 'CNY'
38.                     ],
39.                 ]]);
40.             $data = [];
41.             $data['code'] = (int)$resp->getStatusCode();
42.             $data['body'] = $resp->getBody();
43.             return $data;
45.         } catch (\Exception $exception) {
46.             if ($exception instanceof RequestException && $exception->hasResponse()) {
47.                 $message = "错误回复：" + $exception->getResponse() + "错误码:" + $exception->getResponse()->getStatusCode();
48.                 +"错误原因" + $exception->getResponse()->getReasonPhrase();
49.                 Log::info($message);
50.             }
51.             return [];
52.         }
53.     }

复制代码

common使用的方法

1. public static function  get_platform_payInfo() {
2.         $data['merchantPrivateKeyFilePath'] = env('MERCHANT_FILE_PATH');
3.         $data['platformCertificateFilePath'] = env('PLATFORM_FILE_PATH');
4.         $data['merchantId'] = env('WX_MERCHANT_ID');
5.         $data['merchantCertificateSerial'] = env('CERTIFICATE_SERIAL');
6.         $data['appId'] = env('WX_APP_ID');
7.         $data['appSecret'] = env('WX_APP_SECRET');
8.         $data['notify_url'] = env('WX_NOTIFY_URL');
9.         $data['api_key'] = env('WX_API_KEY');
10.         return $data;
11.     }
13.     public static function wxPayObj()
14.     {
15.         try {
16.            $payInfo = self::get_platform_payInfo();
17.             // 从本地文件中加载「商户API私钥」，「商户API私钥」会用来生成请求的签名
18.             $merchantPrivateKeyInstance = Rsa::from($payInfo['merchantPrivateKeyFilePath'], Rsa::KEY_TYPE_PRIVATE);
19.             // 从本地文件中加载「微信支付平台证书」，用来验证微信支付应答的签名
20.             $platformPublicKeyInstance = Rsa::from($payInfo['platformCertificateFilePath'], Rsa::KEY_TYPE_PUBLIC);
21.             // 从「微信支付平台证书」中获取「证书序列号」
22.             $platformCertificateSerial = PemUtil::parseCertificateSerialNo($payInfo['platformCertificateFilePath']);
23.             // 构造一个 APIv3 客户端实例
24.             $instance = Builder::factory([
25.                 'mchid'      => $payInfo['merchantId'],
26.                 'serial'     => $payInfo['merchantCertificateSerial'],
27.                 'privateKey' => $merchantPrivateKeyInstance,
28.                 'certs'      => [
29.                     $platformCertificateSerial => $platformPublicKeyInstance,
30.                 ],
31.             ]);
32.             return $instance;
33.         } catch (\Exception $e) {
34.             Log::info("返回微信支付对象失败", $e);
35.             return false;
36.         }
37.     }

复制代码

前端vue DEMO

需要用的的插件 qrcode
点击查看代码

1. <template>
2.   
3.     <el-button type="primary" @click="toWxPrePay">支付</el-button>
4.     <el-dialog title="支付" :visible.sync="payVisible" width="30%">
5.       
6.         <canvas id="canvas" ref="qrcodeCanvas" ></canvas>
7.         请使用微信支付
8.       
9.     </el-dialog>
10.   
11. </template>

复制代码

来源:https://www.cnblogs.com/spinachead/p/18568273
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！