您的位置: 首页  >  文章  >  微信公众号开发中遇到的支付问题

微信公众号开发中遇到的支付问题

分类: 文章 • 2023-03-29 08:44:05

原文地址：http://blog.****.net/u013076997/article/details/52327958

第一次开发微信公众号，也是第一次接触微信公众号的支付，我使用的是jssdk，用h5页面调用的支付，后台使用的是java。首先声明，我不是一个愤世嫉俗的人，也不喜欢吐槽，我认为别人提供接口就已经很不错了，干嘛要吐槽呢？但是，这一次，我不得不说，微信公众号支付的文档真是渣！！！你没有也就算了，既然有了，为何不好好写？就好像别人问你路该怎么走，你给别人指了路，但指偏了。下面我记录一下我这次微信支付开发中遇到的坑，希望能给大家一点帮助。

开始之前，有几个地方需要配置一下（比较容易遗忘）：
1、js接口安全域名

公众号设置————功能设置

微信公众号开发中遇到的支付问题



2、微信支付中的开发配置


微信公众号开发中遇到的支付问题


支付授权目录：看了文档之后，我以为是jsp页面的地址，最后，才发现原来是调用后台方法的地址，只是不用写到方法名，如果你调用支付的方法是www.XXX.com/pay/prepay.action；那么你的支付授权目录应该是：www.XXX.com/pay/
测试授权目录：就是测试环境的授权目录。可能有些人不知道支付怎么测试，那么，你需要做两点：①调用支付方法的链接地址。②把该链接地址发送到测试公众号的聊天记录里面。注意是你自己测试微信公众号的链接地址中。
测试白名单：测试微信公众号支付时，把你们自己的微信账号添加到测试白名单中；

3、我想吐槽一下，我的支付签名有问题（后来换ios系统测试时弹出框弹出来的），但是我之前用android手机一直测试，都报的是get_brand_wcpay_request:fail或chooseWXPay:fail（取决于你用哪种方法），你根本不知道究竟是什么错误。

4、当我要调用支付接口时，打开商户的微信公众号支付文档，发现了一个H5调起的支付API，我本以为这里的方法应该是chooseWXPay，但是为什么是function onBridgeReady。。。。。。这又是什么鬼？彻底把我搞晕了，有没有？后来查资料才知道，两个方法的本质是一样的，新版本的微信都会使用chooseWXPay方法，chooseWXPay方法中封装了onBridgeReady这东西，但是用onBridgeReady不用引用http://res.wx.qq.com/open/js/jweixin-1.0.0.js文件，用chooseWXPay方法方法需要引用js文件方法，因为chooseWXPay方法封装了onBridgeReady，查看js文件就可以知道。

微信公众号开发中遇到的支付问题



微信公众号开发中遇到的支付问题



既然是H5页面调用，那么肯定首先是要看jssdk文档了：
一、绑定域名
    这里有一点建议，绑定的域名最好是你开发用的域名，如果你开发用的是二级域名，那么就用二级域名，不要用一级域名，因为如果在该一级域名下面还有其他的二级域名，也要开发另一个公众号，那么就会遇到问题（我没有试过，这两天在网上查资料时看到的）。
二、引入js文件，在调用微信支付的页面引入http://res.wx.qq.com/open/js/jweixin-1.0.0.js；
三、通过config接口注入权限验证配置
    wx.config({
        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的唯一标识
        timestamp: , // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名，见附录1
        jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2，如果只是支付，只用这一个参数就够了
    });
    参数说明：debug，测试环境下打开，会alert出注入参数是否正确的信息；其它几个参数一定要注意大小写！大小写！大小写！继续向下看，我会给出timestamp，nonceStr和signature几个参数的算法；

四、通过ready接口处理成功验证

    wx.ready(function(){
     // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

    });
    wx.error(function(res){

    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

    });
五、发起支付
wx.ready(function(){
    wx.chooseWXPay({
        timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: '', // 支付签名随机串，不长于 32 位
        package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
        signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: '', // 支付签名
        success: function (res) {
            // 支付成功后的回调函数
        },
        //如果你按照正常的jQuery逻辑，下面如果发送错误，一定是error，那你就太天真了，当然，jssdk文档中也有提到
        fail: function(res) {
            //接口调用失败时执行的回调函数。
        },
        complete: function(res) {
            //接口调用完成时执行的回调函数，无论成功或失败都会执行。
        },
        cancel: function(res) {
            //用户点击取消时的回调函数，仅部分有用户取消操作的api才会用到。
        },
        trigger: function(res) {
            //监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
        }
    });
});

至此，微信公众号支付的jssdk已经描述完毕，但是不要高兴得太早，微信支付的坑才刚刚开始。
1、wx.config中signature的算法

    jssdk文档上面给出了算法的步骤，但是没有给一个demo，这里我给出大家一个signature的demo，大家可以根据这个按照自己的需要进行修改。

首先，我封装了一个Jssdk对象（该对象封装了 wx.config中所需要的参数）：

[java] view plain copy
  1.  
  2.   
  3.    /** 
  4.     * 微信js-sdk安全验证 
  5.     * */  
  6.     public class JsSdk {  
  7.     //随机数  
  8.     private String noncestr;  
  9.     //时间戳  
  10.     private String timestamp;  
  11.     //授权url  
  12.     private String url;  
  13.     //签名  
  14.     private String signature;  
  15.     public String getNoncestr() {  
  16.         return noncestr;  
  17.     }  
  18.     public void setNoncestr(String noncestr) {  
  19.         this.noncestr = noncestr;  
  20.     }  
  21.     public String getTimestamp() {  
  22.         return timestamp;  
  23.     }  
  24.     public void setTimestamp(String timestamp) {  
  25.         this.timestamp = timestamp;  
  26.     }  
  27.     public String getUrl() {  
  28.         return url;  
  29.     }  
  30.     public void setUrl(String url) {  
  31.         this.url = url;  
  32.     }  
  33.     public String getSignature() {  
  34.         return signature;  
  35.     }  
  36.     public void setSignature(String signature) {  
  37.         this.signature = signature;  
  38.     }  
  39.   }    

然后，给Jssdk对象属性赋值：

[java] view plain copy

  2.   
  3.     public static JsSdk sign(String jsapi_ticket, String url) {  
  4.         JsSdk jsSdk = new JsSdk();  
  5.         jsSdk.setUrl(url);  
  6.         String nonce_str = create_nonce_str();  
  7.         jsSdk.setNoncestr(nonce_str);  
  8.         String timestamp = create_timestamp();  
  9.         jsSdk.setTimestamp(timestamp);  
  10.           
  11.         String signature = "";  
  12.   
  13.         //注意这里参数名必须全部小写，且必须有序  
  14.          String string1 = "jsapi_ticket=" + jsapi_ticket +  
  15.                   "&noncestr=" + nonce_str +  
  16.                   "×tamp=" + timestamp +  
  17.                   "&url=" + url;  
  18.         try  
  19.         {  
  20.             MessageDigest crypt = MessageDigest.getInstance("SHA-1");  
  21.             crypt.reset();  
  22.             crypt.update(string1.getBytes("UTF-8"));  
  23.             signature = byteToHex(crypt.digest());  
  24.             jsSdk.setSignature(signature);  
  25.         }  
  26.         catch (NoSuchAlgorithmException e)  
  27.         {  
  28.             jsSdk = null;  
  29.             e.printStackTrace();  
  30.         }  
  31.         catch (UnsupportedEncodingException e)  
  32.         {  
  33.             jsSdk = null;  
  34.             e.printStackTrace();  
  35.         }  
  36.          
  37.         return jsSdk;  
  38.     }  
生成随机字符串：这里大家可以选择其他算法
[java] view plain copy

  2.   
  3.     private static String create_nonce_str() {  
  4.         return UUID.randomUUID().toString().substring(0, 20);  
  5.     }  
生成时间戳的方法：
[java] view plain copy

  2.     private static String create_timestamp() {  
  3.         return Long.toString(System.currentTimeMillis() / 1000);  
  4.     }  

sign方法的调用需要两个参数，jsapi_ticket和url：

jsapi_ticket根据token来获取，https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi，

url为request.getRequestURL().toString()来获取，实际上就是调用支付方法的完整URL。


2、chooseWXPay方法中的timestamp,nonceStr和wx.config中的参数是一样的，signType为MD5
3、chooseWXPay中的package，格式是'prepay_id=${prepayId }'，${prepayId }是后台计算得出的，我用的是java。

prepayId的算法：

[java] view plain copy

  2.   
  3.         SortedMap<Object, Object> parameters = new TreeMap<Object,Object>();  
  4.         parameters.put("appid", appId);//你自己公众号的appId  
  5.         parameters.put("mch_id", CacheManager.getValue("MCH_ID"));//此处为商户号  
  6.         parameters.put("nonce_str", jssdk.getNoncestr());//封装在jssdk对象中的noncestr  
  7.         parameters.put("body", "测试");  
  8.         String outTraceNo = getOutTradeNo();//生成订单号的方法，测试时可以随便指定  
  9.         log.info("outTraceNo = " + outTraceNo);  
  10.         parameters.put("out_trade_no", outTraceNo);  
  11.         parameters.put("total_fee", 1);  
  12.         parameters.put("spbill_create_ip", CommonUtil.getRealIp(request));//测试时就写成本机ip即可  
  13.         parameters.put("notify_url", "");  
  14.         parameters.put("trade_type", "JSAPI");  
  15.         parameters.put("openid", openid);  
  16.         parameters.put("sign", PayCommonUtil.createSign("utf-8", parameters));  
  17.         String requestXml = PayCommonUtil.getRequestXml(parameters);  
  18.         log.info("requestXml = " + requestXml);  
  19.         prepayId = AdvancedUtil.createOrder(requestXml);  

createSign和getRequestXml方法：

[java] view plain copy
  1.        
  2.   
  3.     /** 
  4.      * @Description：sign签名 
  5.      * @param characterEncoding 编码格式 
  6.      * @param parameters 请求参数 
  7.      * @return 
  8.      */  
  9.     @SuppressWarnings("rawtypes")  
  10.     public static String createSign(String characterEncoding,SortedMap<Object,Object> parameters)    {  
  11.         StringBuffer sb = new StringBuffer();  
  12.         Set es = parameters.entrySet();  
  13.         Iterator it = es.iterator();  
  14.         while(it.hasNext()) {  
  15.             Map.Entry entry = (Map.Entry)it.next();  
  16.             String k = (String)entry.getKey();  
  17.             Object v = entry.getValue();  
  18.             if(null != v && !"".equals(v)   
  19.                     && !"sign".equals(k) && !"key".equals(k)) {  
  20.                 sb.append(k + "=" + v + "&");  
  21.             }  
  22.         }  
  23.         //设置微信商户平台上的秘钥  
  24.         sb.append("key=" + CacheManager.getValue("API_KEY"));  
  25.         String sign = CommonUtil.MD5(sb.toString(), characterEncoding).toUpperCase();  
  26.         return sign;  
  27.     }  
  28.     /** 
  29.      * @Description：将请求参数转换为xml格式的string 
  30.      * @param parameters  请求参数 
  31.      * @return 
  32.      */  
  33.     @SuppressWarnings("rawtypes")  
  34.     public static String getRequestXml(SortedMap<Object,Object> parameters){  
  35.         StringBuffer sb = new StringBuffer();  
  36.         sb.append("<xml>");  
  37.         Set es = parameters.entrySet();  
  38.         Iterator it = es.iterator();  
  39.         while(it.hasNext()) {  
  40.             Map.Entry entry = (Map.Entry)it.next();  
  41.             String k = CommonUtil.getStringNotNullValue(entry.getKey());  
  42.             String v = CommonUtil.getStringNotNullValue(entry.getValue());  
  43.             if ("attach".equalsIgnoreCase(k)||"body".equalsIgnoreCase(k)||"sign".equalsIgnoreCase(k)) {  
  44.                 sb.append("<"+k+">"+"<![CDATA["+v+"]]></"+k+">");  
  45.             }else {  
  46.                 sb.append("<"+k+">"+v+"</"+k+">");  
  47.             }  
  48.         }  
  49.         sb.append("</xml>");  
  50.         return sb.toString();  
  51.     }  

4、wx.chooseWXPay方法中的paySign测算法
[html] view plain copy
  1.              
  2.         SortedMap<Object, Object> paySignParameters = new TreeMap<Object,Object>();  
  3.         paySignParameters.put("appId", appId);  
  4.         paySignParameters.put("nonceStr", jssdk.getNoncestr());  
  5.         paySignParameters.put("package", "prepay_id=" + prepayId);  
  6.         paySignParameters.put("signType", "MD5");  
  7.         paySignParameters.put("timeStamp", jssdk.getTimestamp());  
  8.         paySign = PayCommonUtil.createSign("utf-8", paySignParameters);  
  9.   
5、到这里，我也必须吐槽一下微信搞了三个类似签名的东西，wx.config中signature，wx.chooseWXPay中的paySign，和调用统一下单接口所用的sign。这三个东西彻底把我搞晕了，算法描述也不是很清楚，希望我上面写的能给大家一些帮助。

相关推荐