【畅购商城】微信支付模块之微信支付二维码

比眉伴天荒 2024-03-31 16:27 54阅读 0赞

**目录**

流程分析

微信支付概述

账号申请

已有账号

支付接口和SDK(了解)

入门案例

统一下单

查询订单

JS版二维码：QRCode.js

概述

入门案例

## **流程分析** ##

![69cb2e5538b742078a177daa8c8648fc.png][]

## **微信支付概述** ##

### 账号申请 ###

步骤一：注册公众号，根据自身主体类型注册对应的公众号

只能申请**服务号**，订阅号没有办法申请支付

https://kf.qq.com/product/weixinmp.html\#hid=87

![ae3b1a6149574dc0a80ea7a2f50fab97.png][]

步骤二：微信认证，公众号认证后才可申请微信支付

![6531f8e3e8cd4d349b93877a94c241aa.png][]

![97597b8d64134544b3fcd58e72765e58.png][]

步骤三：申请微信支付

登录公众平台，点击左侧菜单【微信支付】，开始填写资料等待审核，审核时间为1-5个工作日内。

![382cdb62e113406a97e1e77e311845d4.png][]

步骤四：商户账号审核

审核通过之后会往您填写的邮箱里发一封邮件是关于微信支付商户的帐号信息，同时您对公账户上也会收到几毛钱的汇款，需要您查看下具体的金额然后登录微信支付商户平台进行验证

步骤五：在线签署协议

本协议为线上电子协议，签署后方可进行交易及资金结算，签署完立即生效。

步骤六：完成上述步骤，你可以得到调用API用到的账号和密钥

appid：微信公众账号或开放平台APP的唯一标识

mch\_id：商户号

key：商户密钥

![92d32dd40b4548f99c952c8a75d9facc.png][]

### **已有账号** ###

以下为“传智播客”的微信支付账号

> appid：  wx8397f8696b538317
> 
> mch\_id：1473426802
> 
> key： T6m9iK73b0kn9g5v426MKfHQH7X8rKwb

### **支付接口和SDK(了解)** ###

微信支付帮助文档地址：https://pay.weixin.qq.com/wiki/doc/api/index.html

手动调用，常见的接口（了解）

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:90.45pt;"> </td> 
 <td style="vertical-align:top;width:402.2pt;"> 接口 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:90.45pt;"> 下订单 </td> 
 <td style="vertical-align:top;width:402.2pt;"> https://api.mch.weixin.qq.com/pay/unifiedorder </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:90.45pt;"> 查询订单 </td> 
 <td style="vertical-align:top;width:402.2pt;"> https://api.mch.weixin.qq.com/pay/orderquery </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:90.45pt;"> 关闭订单 </td> 
 <td style="vertical-align:top;width:402.2pt;"> https://api.mch.weixin.qq.com/pay/closeorder </td> 
 </tr> 
 </tbody> 
</table>

手动调用整体思路：

根据接口要求，组装请求参数

以XML的方式，通过POST请求，发送给支付接口

微信支付接口，以XML方式给予响应

实际开发中，我们很少直接使用“接口操作”。通常情况下使用微信提供的SDK（工具类）

com.github.wxpay.sdk.WXPay类就是核心操作封装类。

<table style="margin-left:-4.35pt;width:442.85pt;"> 
 <tbody> 
 <tr> 
 <td style="background-color:#f8f8f8;"> 方法名 </td> 
 <td style="background-color:#f8f8f8;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> microPay </td> 
 <td style="background-color:#ffffff;"> 刷卡支付 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f8f8f8;"> unifiedOrder </td> 
 <td style="background-color:#f8f8f8;"> 统一下单 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> orderQuery </td> 
 <td style="background-color:#ffffff;"> 查询订单 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f8f8f8;"> reverse </td> 
 <td style="background-color:#f8f8f8;"> 撤销订单 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> closeOrder </td> 
 <td style="background-color:#ffffff;"> 关闭订单 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f8f8f8;"> refund </td> 
 <td style="background-color:#f8f8f8;"> 申请退款 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> refundQuery </td> 
 <td style="background-color:#ffffff;"> 查询退款 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f8f8f8;"> downloadBill </td> 
 <td style="background-color:#f8f8f8;"> 下载对账单 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> report </td> 
 <td style="background-color:#ffffff;"> 交易保障 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#f8f8f8;"> shortUrl </td> 
 <td style="background-color:#f8f8f8;"> 转换短链接 </td> 
 </tr> 
 <tr> 
 <td style="background-color:#ffffff;"> authCodeToOpenid </td> 
 <td style="background-color:#ffffff;"> 授权码查询openid </td> 
 </tr> 
 </tbody> 
</table>

## **入门案例** ##

### 统一下单 ###

在测试项目完成操作：test-wxpay

步骤一：添加依赖

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

步骤二：编写配置类，实现WXPayConfig接口

![97186bbd720d428bb01e53fbd29dab72.png][]

package com.czxy.test.pay;
    
    import com.github.wxpay.sdk.WXPayConfig;
    
    import java.io.InputStream;
    
    /**
     * Created by liangtong.
     */
    public class MyWXPayConfig implements WXPayConfig {
        /**
         * 应用ID：微信开放平台审核通过的应用APPID
         * @return
         */
        @Override
        public String getAppID() {
            return "wx8397f8696b538317";
        }
    
        /**
         * 商户号：微信支付分配的商户号
         * @return
         */
        @Override
        public String getMchID() {
            return "1473426802";
        }
    
        /**
         * 秘钥，用于生成签名(sign)
         * @return
         */
        @Override
        public String getKey() {
            return "T6m9iK73b0kn9g5v426MKfHQH7X8rKwb";
        }
    
        @Override
        public InputStream getCertStream() {
            return null;
        }
    
        /**
         * 连接超时时间，单位是毫秒
         * @return
         */
        @Override
        public int getHttpConnectTimeoutMs() {
            return 0;
        }
    
        /**
         * 读超时时间，单位是毫秒
         * @return
         */
        @Override
        public int getHttpReadTimeoutMs() {
            return 0;
        }
    }

步骤三：测试类

package com.czxy.test.pay;
 
 import com.github.wxpay.sdk.WXPay;
 
 import java.util.HashMap;
 import java.util.Map;
 
 /**
 * Created by liangtong.
 */
 public class TestPayUnifiedOrder {
 public static void main(String[] args) throws Exception {
 
 WXPay wxPay = new WXPay(new MyWXPayConfig());
 
 Map<String,String> map=new HashMap();
 map.put("body","畅购"); //商品描述
 map.put("out_trade_no","20200401001"); //订单号
 map.put("total_fee","1"); //金额
 map.put("spbill_create_ip","127.0.0.1"); //终端IP
 map.put("notify_url","http://www.baidu.com");//回调地址
 //JSAPI--JSAPI支付（或小程序支付）、NATIVE--Native支付、APP--app支付，MWEB--H5支付
 map.put("trade_type","NATIVE"); //交易类型
 
 Map<String, String> result = wxPay.unifiedOrder( map );
 System.out.println("支付结果：" + result.get("code_url"));
 System.out.println("返回状态码：" + result.get("return_code"));
 System.out.println("返回信息：" + result.get("return_msg"));
 System.out.println("业务结果：" + result.get("result_code"));
 System.out.println(result);
 }
 }

步骤四：结果

支付结果：weixin://wxpay/bizpayurl?pr=Mfqcl2R

返回状态码：SUCCESS

返回信息：OK

业务结果：SUCCESS

### **查询订单** ###

package com.czxy.test.pay;
 
 import com.github.wxpay.sdk.WXPay;
 
 import java.util.HashMap;
 import java.util.Map;
 
 /**
 * Created by liangtong.
 */
 public class TestPayOrderQuery {
 public static void main(String[] args) throws Exception {
 
 WXPay wxPay = new WXPay(new MyWXPayConfig());
 
 Map<String,String> map=new HashMap();
 map.put("out_trade_no","20200401001"); //订单号
 
 Map<String, String> result = wxPay.orderQuery( map );
 System.out.println("返回状态码：" + result.get("return_code"));
 System.out.println("返回信息：" + result.get("return_msg"));
 System.out.println("业务结果：" + result.get("result_code"));
 System.out.println("交易状态：" + result.get("trade_state"));
 /*
 SUCCESS—支付成功
 REFUND—转入退款
 NOTPAY—未支付
 CLOSED—已关闭
 REVOKED—已撤销（刷卡支付）
 USERPAYING--用户支付中
 PAYERROR--支付失败
 */
 System.out.println("交易状态：" + result.get("trade_state"));
 System.out.println("交易状态描述：" + result.get("trade_state_desc"));
 System.out.println(result);
 }
 }

## **JS版二维码：QRCode.js** ##

### **概述** ###

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5

Canvas 绘制而成,不依赖任何库。

### **入门案例** ###

拷贝 qrcode.min.js

![61e88f9eb53b4cc8a753129f630e4ee8.png][]

编写wxpay.html

<html lang="en">
 <head>
 <title>二维码入门案例</title>
 </head>
 <body>
 <div id='qrcode'></div>
 </body>
 </html>
 
 <script src="/js/qrcode.min.js" ></script>
 <script type="text/javascript">
 let qrcode = new QRCode(document.getElementById("qrcode"), {
 width : 200,
 height : 200
 });
 qrcode.makeCode("weixin://wxpay/bizpayurl?pr=Mfqcl2R");
 </script>

1.  [http://localhost:3000/wxpay.html][http_localhost_3000_wxpay.html]

![ab56af4e15e94d3e8c4202427676aa25.png][]

[69cb2e5538b742078a177daa8c8648fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/23f8198feb77499783200d3a9c954c45.png
[ae3b1a6149574dc0a80ea7a2f50fab97.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1d5a256801984564af516c2925ff6836.png
[6531f8e3e8cd4d349b93877a94c241aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/3e235b6a9c02487e9b3043d57015a3c6.png
[97597b8d64134544b3fcd58e72765e58.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f31b814d68e54362ae9f8e16de3b4c14.png
[382cdb62e113406a97e1e77e311845d4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/dded3db129af4600a83d0f8cdf6df36e.png
[92d32dd40b4548f99c952c8a75d9facc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c4ae71a88c044145b13ce8a67202751e.png
[97186bbd720d428bb01e53fbd29dab72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/01508161318e4155b2df4fd60a54d39c.png
[61e88f9eb53b4cc8a753129f630e4ee8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/a8dc6bce5195495f9385a105a8c67899.png
[http_localhost_3000_wxpay.html]: http://localhost:3000/wxpay.html
[ab56af4e15e94d3e8c4202427676aa25.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/76b82e6c26ae43a8a5102ee917ee5c31.png