微信支付及二维码生成

逃离我推掉我的手 2024-04-18 10:48 71阅读 0赞

# 完整流程![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70] #

从微信官方的文档来看，开发需要做的事情主要有一下几个步骤：  
1.生成订单并调用统一下单api；  
2.接收预支付链接。  
3.将链接生成为二维码。  
4.等待微信通知支付结果。  
5.回执。  
6.可调用查询api查询订单状态（可选）。

# 1.下单接口调用： #

### 请求参数： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 4]  
关键的必填信息就几个：  
**公众号ID、商户号、随机字符串、签名、商品描述、商户订单号、标价金额、终端ip、通知地址、交易类型。**

# java实现： #

引入依赖

<dependency>
        <groupId>com.github.wxpay</groupId>
        <artifactId>wxpay-sdk</artifactId>
        <version>0.0.3</version>
    </dependency>

编写配置文件类，实现WXPayConfig  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 5]  
属性信息：  
**公众号id，商户id，秘钥，链接超时时长，等待超时时长，通知地址**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 6]  
前三项为微信提供，剩下的三项为开发者提供  
将配置注入到配置文件类。构造WXPay，参数为配置文件，以及签名方式。将WXPay注入到Spring。就可以利用WXPay这个工具类了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 7]  
最终完整工具类，使用的时候仅需要传入订单号、支付金额、商品描述![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 8]

## 通知与ack ##

支付成功后，微信将调用配置的地址来通知商户支付成功。商户接收后需要回执  
notifyUrl需要一个带http的完整外网ip

详细见微信支付开发者文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=23\_8&index=5，接口且不能设置验证登录状态。  
微信会post一个xml，默认@RequestBody注解会转换json格式，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 9]  
需要有`com.fasterxml.jackson.dataformat.xml.XmlMapper`类存在，所以引入注解

<dependency>
                <groupId>com.fasterxml.jackson.dataformat</groupId>
                <artifactId>jackson-dataformat-xml</artifactId>
            </dependency>

再使用@RequestBody即可映射xml格式

### ACK ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 10]  
微信接收一个xml，所以返回produces加入参数"application/xml"![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 11]  
如果不ack微信会在二十四小时内发送15次通知。如果无法接收通知，可以调用查询api来手动验证支付结果。  
本地需要做签名校验、以及通信成功校验，修改本地订单状态等，这里不详细说了

# 前端 #

前端拿到二维码链接之后，需要转换成二维码展示。  
这里使用qrcode.min.js插件

### 引入插件 ###

![在这里插入图片描述][20190905210146714.png]  
异步调用从后台获取二维码url ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 12]

页面加入标签 qrImage  
![在这里插入图片描述][20190905210343752.png]  
详见https://github.com/davidshimjs/qrcodejs

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/31fda864d1d64bb087b1c8939ed330f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/25ec1f3f791c41558a25821d3efe6a1d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/105b7d5ba73a4ff2b172d7755f4e947a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cb84d2a9c0564343a61c3f470499db32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d2b418e1ea134bf69421e49e6d428b18.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/77cc15fc87ce452295aaba7b7fb391c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f23ca98a4bde43e6bd66a1e4f1ffba06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5e3ff346457b49b7a4db63db262d501a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/83a38bdae8974bbeabf91df49d617239.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2d4a98a3531743648fe8f3149b01b4e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/adc724cf00054f0083412ef00c4948c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f2357465519b453995283807cb52da11.png
[20190905210146714.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/9a26924fc0604db386e9449add6d1be3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Zpdmlicm8_size_16_color_FFFFFF_t_70 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/905cd17fb021482ea607fecdf55f920e.png
[20190905210343752.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4940a8c2b5d545998860f24463ddb0f9.png