微信支付之JSAPI支付（普通商户版）

我会带着你远行 2023-06-08 03:21 111阅读 0赞

## 前言 ##

以前还未失业的时候，是在一家外包公司工作的，经常会有一些支付业务需求，那时候因为工作繁忙，没有时间去总结这些开发经验，现在失业了，总有些时间整理一下了。以此回顾一下，也希望能够帮到大家。

> TIPS[ 官方文档][Link 1]

![9150e4e5ly1fduldih6jhj205305k0sz.jpg][]

--------------------

## 场景介绍 ##

用户通过微信扫码、关注公众号等方式进入商家**H5**页面，并在微信内调用JSSDK完成支付。  
  
  
我的通俗理解就是，就是在微信内打开的H5页面，支付时就会调用这个JSAPI支付。（说错了，记得帮我纠正）

--------------------

## 开发前准备 ##

*  **第一步：申请微信服务号**

\*\*  
![image.png][]

*  **第二步：申请微信支付商户号**

**注意：请确保服务号的经营主体与商户号的主体一致，否则可能会审核不通过。可以通过微信服务号中直接申请（推荐）**  
  
  
![image.png][image.png 1]  
  
  
  
  
也可以从微信支付平台申请  
  
  
![image.png][image.png 2]  
  
  
  
  
**绑定之前的服务号的APPID（产品中心->APPID授权管理），默认情况下，从服务号申请的商户号已经绑定了；如果还未绑定，需要提交绑定申请，并到服务号进行确认（如果服务号和商户号的经营主体不一致，则需要经过审核）**  
  
  
![image.png][image.png 3]

*  **第三步：开通JSAPI并授权APPID**

如果是从服务号申请的商户号，默认就开通了JSAPI支付，否则需要从产品中心->JSAPI提交申请

![image.png][image.png 4]

*  **第四步：设置API秘钥**

**设置API密钥需要安装操作证书，如果前面操作中已经安装过，则可以无需再安装**  
  
  
![image.png][image.png 5]  
  
  
**API密钥需要手动设置32位的密钥**  
  
  
![image.png][image.png 6]

*  **第五步：配置支付授权目录**

**公众号支付跟其他支付方式有点不一样，这里的授权目录需要填前端的地址，因为公众号支付的预下单是由前端发起的。**  
  
  
![image.png][image.png 7]

*  **第六步：设置网页授权回调**

**回到服务号，开发JSAPI支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。**  
\*\*  
**但是在设置网页授权回调前，需要确保设置的域名能访问到MP\_verify\_*.txt 文件，例如http://www.abc.com/MP\_verify\_wleifiw23438.txt能够使用浏览器访问，请把MP\_verify\_*.txt 文件访问域名根目录下**

![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9wbmcvMjE0MDYxLzE1NzExNTUwMzQ3ODUtMDIzNGVlNzgtNzU1Mi00YWI2LTlkMjQtMzcyMDdmYTBlODkzLnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=330&name=image.png&originHeight=659&originWidth=895&search=&size=99534&status=done&width=447.5)

*  **第七步：收集好需要的配置信息，以便开发中使用**

如在application.xml配置实例

wx:
      # 公众平台商户 用于公众号内支付
      mp:
        app-id: 对应微信服务号的APPID
        mch-id: 商户号
        mch-key: 商户密钥
        key-path: 支付退款的key文件

--------------------

## 代码实现 ##

在此我提醒一下，我是用Springboot实现的。如果有不满意的，请笑一笑，然后继续撸码。哈哈哈，开玩笑的！！！嘎嘎嘎！！！

*  **第一步：POM文件添加依赖**

这个依赖，我认为是目前开发微信支付最好的工具包了，里面包含了整合了所有微信支付API，注释也是十分清楚明白的。给这个工具包一百个赞。以下是在POM文件中加入依赖的示例。

<properties>
    	<wechat.sdk.version>3.3.7.B</wechat.sdk.version>
    </properties>
    
    <dependency>
       <groupId>com.github.binarywang</groupId>
       <artifactId>weixin-java-pay</artifactId>
       <version>${ wechat.sdk.version}</version>
    </dependency>

*  **第二步：yml配置文件中添加配置信息**

wx:
      pay:
        appId: 
        mchId: 
        mchKey: 
        subAppId: #服务商模式下的子商户公众账号ID
        subMchId: #服务商模式下的子商户号
        keyPath: # p12证书的位置，可以指定绝对路径，也可以指定类路径（以classpath:开头）

*  **第三步：把配置信息加载到类中**

/** * 支付请求参数配置,如果yml文件的参数配置不够，可自行添加，比如回调url * * @author yanhuada */
    @Data
    @ConfigurationProperties(prefix = "wx.pay")
    public class WxPayProperties { 
    
        /** * 设置微信公众号或者小程序等的appid */
        private String appId;
    
        /** * 微信支付商户号 */
        private String mchId;
    
        /** * 微信支付商户密钥 */
        private String mchKey;
    
        /** * 微信支付交易类型 */
        private String tradeType;
    
        /** * 通知地址 */
        private String notifyUrl;
      
    }

*  **第四步：装配 WxPayService 类**

/** * @author yanhuada */
    @Configuration
    @ConditionalOnClass(WxPayService.class)
    @EnableConfigurationProperties({ WxPayProperties.class})
    public class WxPayConfiguration { 
    
        private WxPayProperties wxPayProperties;
    
        @Autowired
        public WxPayConfiguration(WxPayProperties wxPayProperties) { 
            this.wxPayProperties = wxPayProperties;
        }
    
    
        @Bean(autowire = Autowire.BY_NAME, name = "wxPayService")
        public WxPayService wxPayService() { 
            WxPayConfig payConfig = new WxPayConfig();
            payConfig.setAppId(StringUtils.trimToNull(this.wxPayProperties.getAppId()));
            payConfig.setMchId(StringUtils.trimToNull(this.wxPayProperties.getMchId()));
            payConfig.setMchKey(StringUtils.trimToNull(this.wxPayProperties.getMchKey()));
            payConfig.setTradeType(StringUtils.trimToNull(this.wxPayProperties.getTradeType()));
            payConfig.setNotifyUrl(StringUtils.trimToNull(this.wxPayProperties.getNotifyUrl()));
            WxPayService wxPayService = new WxPayServiceImpl();
            wxPayService.setConfig(payConfig);
            return wxPayService;
        }
    }

*  **第五步：在Service层注入WxPayService即可调用统一下单**

进去看看WxPayService类就可清楚里面的方法了，注释很齐全，所以这里就不一一列举了。

*  **第六步：定义支付回调接口**

这个过于简单，也略了。

--------------------

## 推荐博客 ##

这次给你们来个大礼包吧，不推荐博客了，推荐github某位大神，他的开源项目包括微信开发demo，微信登录demo等。

> [github某大神][github]

--------------------

## 邀请 ##

感谢各位观看我的文章，为了和大家一起交流，以及分享个人心得，我建立了一个微信公众号，“零创世界”，我会每天在上面分享自己的学习心得，或者各位认为投稿，我会把各位的投稿放到微信微信公众号，让大家可以共同学习，共同进步。我还会在公众号上，发布一些如破解IDEA方法的文章及资源。在此谢谢！！！  
  
  
以下就是一些联系方式：

*  **微信公众号**

![qrcode\_for\_gh\_b9e5fa1667b4\_344.jpg][qrcode_for_gh_b9e5fa1667b4_344.jpg]

*  **个人邮箱：17875512004@163.com**

[Link 1]: https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1
[9150e4e5ly1fduldih6jhj205305k0sz.jpg]: /images/20230531/eedfe8f592d147de8395aa92e55d0662.png
[image.png]: /images/20230531/e7ed24aaa0124e05b6655efed100ac82.png
[image.png 1]: /images/20230531/c310e053ea9747db9e22c912e2f6c0bb.png
[image.png 2]: /images/20230531/f83360257a7a48f69cec3f201a2ee741.png
[image.png 3]: /images/20230531/33aef1095bc04d1696bedc33501ccfb3.png
[image.png 4]: /images/20230531/3cf90ed2d6ae4516acec0bbc10821ee0.png
[image.png 5]: /images/20230531/8b1c53d42a994a328a211b86a0578b9c.png
[image.png 6]: /images/20230531/6644aa5802894e909b9cd6d0a771e6c9.png
[image.png 7]: /images/20230531/78ea420243604bc7ab6a8c4de045eadc.png
[github]: https://github.com/binarywang
[qrcode_for_gh_b9e5fa1667b4_344.jpg]: /images/20230531/ad046d9c221047888457c491fd868339.png