晚能 发表于 2025-6-4 13:19:05

vue+laravel使用微信Natvite支付

Navite支付介绍

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

4.需要用到的参数配置到env环境变量中 如下 https://img2024.cnblogs.com/blog/1599619/202411/1599619-20241125174237539-1373707977.png
5.代码实现
获取支付二维码链接/**
   * 微信二维码预支付
   * @param string $total 价格
   * @param string $outTradeNo 商户订单号
   * @param int $duration 二维码有效时长 单位:秒
   * @return array 返回二维码链接
   */
    public static function wxNativePrePay(string $total, string $outTradeNo, $duration = 180)
    {
      try {
            $config = Common::get_platform_payInfo();
            $time = \time();
            $time_expire = $time + $duration;
            $rfc3339_time = date(DATE_RFC3339, $time_expire);
            $total = intval(bcmul($total, 100));

            $payInfo = [
                'out_trade_no' => $outTradeNo,
                'appid' => $config['appId'],
                'description' => '支付维修费用',
                'total' => $total,
                'time_expire' => (string)$rfc3339_time,
            ];

            $instance = Common::wxPayObj();
            $resp = $instance
                ->chain('v3/pay/transactions/native')
                ->post(['json' => [
                  'mchid' => $config['merchantId'],
                  'out_trade_no' => $payInfo['out_trade_no'],
                  'time_expire' => $payInfo['time_expire'],
                  'appid' => $config['appId'],
                  'description' => $payInfo['description'],
                  'notify_url' => $config['notify_url'],
                  'amount' => [
                        'total' => $payInfo['total'],
                        'currency' => 'CNY'
                  ],
                ]]);
            $data = [];
            $data['code'] = (int)$resp->getStatusCode();
            $data['body'] = $resp->getBody();
            return $data;

      } catch (\Exception $exception) {
            if ($exception instanceof RequestException && $exception->hasResponse()) {
                $message = "错误回复：" + $exception->getResponse() + "错误码:" + $exception->getResponse()->getStatusCode();
                +"错误原因" + $exception->getResponse()->getReasonPhrase();
                Log::info($message);
            }
            return [];
      }
    }common使用的方法public static functionget_platform_payInfo() {
      $data['merchantPrivateKeyFilePath'] = env('MERCHANT_FILE_PATH');
      $data['platformCertificateFilePath'] = env('PLATFORM_FILE_PATH');
      $data['merchantId'] = env('WX_MERCHANT_ID');
      $data['merchantCertificateSerial'] = env('CERTIFICATE_SERIAL');
      $data['appId'] = env('WX_APP_ID');
      $data['appSecret'] = env('WX_APP_SECRET');
      $data['notify_url'] = env('WX_NOTIFY_URL');
      $data['api_key'] = env('WX_API_KEY');
      return $data;
    }

    public static function wxPayObj()
    {
      try {
         $payInfo = self::get_platform_payInfo();
            // 从本地文件中加载「商户API私钥」，「商户API私钥」会用来生成请求的签名
            $merchantPrivateKeyInstance = Rsa::from($payInfo['merchantPrivateKeyFilePath'], Rsa::KEY_TYPE_PRIVATE);
            // 从本地文件中加载「微信支付平台证书」，用来验证微信支付应答的签名
            $platformPublicKeyInstance = Rsa::from($payInfo['platformCertificateFilePath'], Rsa::KEY_TYPE_PUBLIC);
            // 从「微信支付平台证书」中获取「证书序列号」
            $platformCertificateSerial = PemUtil::parseCertificateSerialNo($payInfo['platformCertificateFilePath']);
            // 构造一个 APIv3 客户端实例
            $instance = Builder::factory([
                'mchid'      => $payInfo['merchantId'],
                'serial'   => $payInfo['merchantCertificateSerial'],
                'privateKey' => $merchantPrivateKeyInstance,
                'certs'      => [
                  $platformCertificateSerial => $platformPublicKeyInstance,
                ],
            ]);
            return $instance;
      } catch (\Exception $e) {
            Log::info("返回微信支付对象失败", $e);
            return false;
      }
    }前端vue DEMO

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

    <el-button type="primary" @click="toWxPrePay">支付</el-button>
    <el-dialog title="支付" :visible.sync="payVisible" width="30%">
      
      <canvas id="canvas" ref="qrcodeCanvas" ></canvas>
      请使用微信支付
      
    </el-dialog>

</template>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

旁拮猾 发表于 2025-11-7 14:32:29

感谢分享，下载保存了，貌似很强大

轮达 发表于 2025-12-14 01:22:34

感谢，下载保存了

注思 发表于 2025-12-17 00:03:13

喜欢鼓捣这些软件，现在用得少，谢谢分享！

姬宜欣 发表于 2025-12-20 14:50:32

感谢分享，下载保存了，貌似很强大

向梦桐 发表于 2025-12-20 21:31:27

谢谢分享，辛苦了

尝琨 发表于 2025-12-23 09:40:05

感谢发布原创作品，程序园因你更精彩

忆雏闲 发表于 2026-1-9 05:48:04

前排留名，哈哈哈

老僻贞 发表于 2026-1-11 23:21:42

这个好，看起来很实用

章娅萝 发表于 2026-1-18 10:27:58

热心回复！

唐茗 发表于 2026-1-21 15:02:19

谢谢分享，试用一下

祉遛吾 发表于 2026-1-22 07:05:11

用心讨论，共获提升！

喳谍 发表于 2026-1-25 09:49:32

热心回复！

但婆 发表于 2026-1-30 04:37:22

鼓励转贴优秀软件安全工具和文档！

轩辕琳芳 发表于 2026-2-2 02:26:59

收藏一下   不知道什么时候能用到

后沛若 发表于 2026-2-5 19:01:18

新版吗？好像是停更了吧。

这帜 发表于 2026-2-6 13:09:56

感谢分享

啤愿 发表于 2026-2-7 08:34:41

不错，里面软件多更新就更好了

叟减 发表于 2026-2-8 03:11:14

这个有用。

厥轧匠 发表于 2026-2-8 06:03:29

感谢分享，下载保存了，貌似很强大
页: [1] 2
查看完整版本: vue+laravel使用微信Natvite支付