〔支付接入〕微信的 h5 支付和 jsapi 支付

✨ 目录

• • 🎈 申请商户号
  • 🎈 申请商户证书
  • 🎈 设置APIv3密钥
  • 🎈 下载 SDK 开发包
  • 🎈 下载平台证书
  • 🎈 关联 AppID 账号
  • 🎈 开通 H5 支付
  • 🎈 H5支付流程
  • 🎈 开通 JSAPI 支付
  • 🎈 JSAPI 支付流程
  • 🎈 通���微信支付库封装

    🎈 申请商户号

    • 申请地址： https://pay.weixin.qq.com/
    • 如果你还没有微信商户号，请点击上面的链接进行申请，如果已经有了，可以跳过这一步

      🎈 申请商户证书

      • 首先点击 账户中心 ▶ API安全 ▶ 申请API证书
      • 申请详细步骤： https://kf.qq.com/faq/161222NneAJf161222U7fARv.html

        

        🎈 设置APIv3密钥

        • 首先点击 账户中心 ▶ API安全 ▶ 设置APIv3密钥 ▶ 设置
        • 会看到有两个密钥，分别是 APIv2密钥 和 APIv3密钥，由于 APIv2密钥 已经逐渐废弃了，所以只需要申请 APIv3密钥 即可
        • 密钥可由数字大小写字母组合，输入任意的 32 位字符，该密钥需要保存好，供后面使用

          

          

          // 生成32位的APIv3随机密钥
          $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
          echo substr(str_shuffle($chars), 0, $length);
          

          🎈 下载 SDK 开发包

          • 微信官方提供了 JAVA、PHP、GO 三种语言版本的开发库，请根据自己开发语言选择
          • JAVA语言： wechatpay-java ‹推荐›、wechatpay-apache-httpclient
          • PHP语言： wechatpay-php ‹推荐›、wechatpay-guzzle-middleware
          • GO语言： wechatpay-go ‹推荐›
          • 由于 php 实现支付相对简单，所以我将以 php 作为支付的讲解
          • 首先使用 composer 安装 sdk

            # 初始化文件夹
            composer init
            # 推荐使用 PHP 包管理工具 Composer 安装 SDK
            composer require wechatpay/wechatpay
            

            🎈 下载平台证书

            • 平台证书跟上面申请的商户证书不是同一个东西，在后期请求中，平台证书和商户证书都要带上
            • 上面命令执行完之后，会有一个 vendor/bin/CertificateDownloader.php 文件
            • 如果你是第一次申请平台证书，需要执行命令：php CertificateDownloader.php -k ${apiV3key} -m ${mchId} -f ${mchPrivateKeyFilePath} -s ${mchSerialNo} -o ${outputFilePath}
            • -k： apiv3 秘钥，上面自己设置的32位数的密钥
            • -m： 商户号，微信商户平台可以查询
            • -f： 微信商户API私钥文件目录，也就是第二步申请商户证书里面生成的 apiclient_key.pem 路径
            • -s： 证书序列号，在 账户中心 ▶ API安全 ▶ 管理证书 中可以看见，如果有多个证书，找到自己正在使用的证书序列号
            • -o： 生成后的证书保存地址

              cd vendor/bin/
              php CertificateDownloader.php -k 241xxxxxxxxxxxxxxxxx44 -m 1xxxxxxx1 -f ../../cert/merchant/apiclient_key.pem -s Wxxxxxxxxxxxxxxxx4 -o  ../../cert/wechatpay/
              

              

              🎈 关联 AppID 账号

              • 因为使用的是微信支付，所以用户支付后，需要通过微信号通知用户支付的一些信息，所以需要在商户号下至少关联一个公众号

                

                🎈 开通 H5 支付

                • 点击 产品中心 ▶ 我的产品 ▶ H5支付 ▶ 点击开通
                • 开通后，选择 开发配置 ▶ H5支付域名 申请添加 H5支付域名
                • 申请支付域名需要先做好产品的页面，申请的时候需要有页面的截图，截图中还要 截取到域名，支付的审核算是很严格的，如果申请不过，驳回后再申请，审核通过的时间会越来越长，所以最好一次性就把材料收集好，另外还要域名的备案的 IPC 截图
                • IPC 备案查询地址： https://beian.miit.gov.cn/
                • 关于域名的填写，如果只填写域名不填写具体域名路径，微信在支付的时候就只会校验域名，这也是最方便的，因为域名下有多个项目有支付功能的话，就不需要重复添加了

                  

                  

                  🎈 H5支付流程

                  • H5支付是在微信以外的浏览器使用的，如果是微信内的话，使用的是 jsapi 支付
                  • 所以一般用户进入页面的第一件事，就是检测用户使用的环境是微信浏览器还是其他浏览器
                  • 前端传一些用户挑选商品后的参数，并请求后端处理接口，后端应该将一些参数进行入库，顺便请求 H5 支付接口
                  • 接口应该返回跳转链接 h5_url，如果你想用户付款之后到结果页面，需要添加 redirect_url 参数，这个参数一定要用 encodeURIComponent 进行处理
                  • 由于官方在 jssapi 支付中说明，不要相信前端的 success 结果，所以需要在结果页中，让用户自动触发查询结果，因此需要返回后端生成的订单号，用作在结果页的用户手动点击查询

                    // 判断是否微信浏览器
                    function isWeChat() {
                        var ua = navigator.userAgent.toLowerCase();
                        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                            return true;
                        } else {
                            return false;
                        }
                    }
                    if(isWeChat()) {
                        // 是微信中打开的产品页面
                        alert('微信内不支持h5支付，请在外部浏览器打开页面');
                    } else {
                        // 非微信内打开的产品页面，请求接口，获取支付的跳转链接
                        // 前端用户选的产品，以及产品的金额，传一些参数过去
                        let params = {
                            total: 2, // 单位：元
                            description: 'Image形象店-深圳腾大-QQ公仔' // 产品的介绍
                            // ....更多入库参数
                        };
                        
                        $.getJSON('后端接口地址/h5?' + $.param(params) + '&callback=?', function(res) {
                            // 拉起微信支付界面，成功后会跳转到redirect_url链接
                            $(location).attr("href", res.data.h5_url + "&redirect_url=" + encodeURIComponent(`https://xxxxxx/finish?out_trade_no=${res.data.out_trade_no}`))
                        });
                    }