微信公众号，关联网页支付功能（公众号支付）的实现

水深无声 2022-05-28 04:43 556阅读 0赞

公众号支付是用户在微信中打开商户的H5页面，商户在H5页面通过调用微信支付提供的JSAPI接口调起微信支付模块完成支付。应用场景有：

1、 用户在微信公众账号内进入商家公众号，打开某个主页面，完成支付

2、用户的好友在朋友圈、聊天窗口等分享商家页面连接，用户点击链接打开商家页面，完成支付

3、将商户页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付

公众号支付具体实现步骤见官方文档《微信支付开发文档境内普通商户》，官方链接地址：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=3\_1

一、申请支付账户

商户在微信公众平台(申请扫码支付、公众号支付)或开放平台(申请APP支付)按照相应提示，申请相应微信支付模式。微信支付工作人员审核资料无误后开通相应的微信支付权限。微信支付申请审核通过后，商户在申请资料填写的邮箱中收取到由微信支付小助手发送的邮件，此邮件包含开发时需要使用的支付账户信息，见图3.1所示。

70

二、配置支付目录和授权域名

设置支付目录

请确保实际支付时的请求目录与后台配置的目录一致，否则将无法成功唤起微信支付。

在微信商户平台（pay.weixin.qq.com）设置您的公众号支付支付目录，设置路径：商户平台—>产品中心—>开发配置，如图7.7所示。公众号支付在请求支付的时候会校验请求来源是否有在商户平台做了配置，所以必须确保支付目录已经正确的被配置，否则将验证失败，请求支付不成功。

70 1

设置授权域名

开发公众号支付时，在统一下单接口中要求必传用户openid，而获取openid则需要您在公众平台设置获取openid的域名，只有被设置过的域名才是一个有效的获取openid的域名，否则将获取失败。具体界面如图7.8所示：

70 2

三、支付业务流程

70 3

四、示例代码：

StringUtil 

  1. /**
  2.      * 按指定长度生成随机字符串
  3.      * @param length
  4.      * @return
  5.      */
  6.     public static String getRandomString(int length) { //length表示生成字符串的长度
  7.         String base = "abcdefghijklmnopqrstuvwxyz0123456789";   
  8.         Random random = new Random();   
  9.         StringBuffer sb = new StringBuffer();   
  10.         for (int i = 0; i < length; i++) {   
  11.             int number = random.nextInt(base.length());   
  12.             sb.append(base.charAt(number));   
  13.         }   
  14.         return sb.toString();   
  15.      }

UnifiedOrderRequest 

  1. package com.common.entity;
  3. public class UnifiedOrderRequest extends BaseEntity {
  4.     private String appid;// 公众账号ID
  5.     private String mch_id;// 微信支付分配的商户号
  6.     private String nonce_str;// 随机字符串
  7.     private String sign;// 签名
  8.     private String body;// 商品简单描述
  9.     private String out_trade_no;// 商户订单号
  10.     private String total_fee;// 标价金额
  11.     private String spbill_create_ip;// 终端IP
  12.     private String notify_url;// 通知地址
  13.     private String trade_type = "JSAPI";// 交易类型
  14.                                         // JSAPI--公众号支付、NATIVE--原生扫码支付、APP--app支付
  15.     // 其他不必填参数
  16.     private String device_info;// 设备号
  17.     private String sign_type;// 签名类型 默认为MD5
  18.     private String detail;// 商品详情
  19.     private String attach;// 附加数据
  20.     private String fee_type;// 标价币种
  21.     private String time_start;// 交易起始时间
  22.     private String time_expire;// 交易结束时间
  23.     private String goods_tag;// 商品标记
  24.     private String product_id;// 商品ID
  25.     private String limit_pay;// 指定支付方式
  26.     private String openid;// 用户标识
  28.     public String getAppid() {
  29.         return appid;
  30.     }
  32.     public void setAppid(String appid) {
  33.         this.appid = appid;
  34.     }
  36.     public String getMch_id() {
  37.         return mch_id;
  38.     }
  40.     public void setMch_id(String mch_id) {
  41.         this.mch_id = mch_id;
  42.     }
  44.     public String getNonce_str() {
  45.         return nonce_str;
  46.     }
  48.     public void setNonce_str(String nonce_str) {
  49.         this.nonce_str = nonce_str;
  50.     }
  52.     public String getSign() {
  53.         return sign;
  54.     }
  56.     public void setSign(String sign) {
  57.         this.sign = sign;
  58.     }
  60.     public String getBody() {
  61.         return body;
  62.     }
  64.     public void setBody(String body) {
  65.         this.body = body;
  66.     }
  68.     public String getOut_trade_no() {
  69.         return out_trade_no;
  70.     }
  72.     public void setOut_trade_no(String out_trade_no) {
  73.         this.out_trade_no = out_trade_no;
  74.     }
  76.     public String getTotal_fee() {
  77.         return total_fee;
  78.     }
  80.     public void setTotal_fee(String total_fee) {
  81.         this.total_fee = total_fee;
  82.     }
  84.     public String getSpbill_create_ip() {
  85.         return spbill_create_ip;
  86.     }
  88.     public void setSpbill_create_ip(String spbill_create_ip) {
  89.         this.spbill_create_ip = spbill_create_ip;
  90.     }
  92.     public String getNotify_url() {
  93.         return notify_url;
  94.     }
  96.     public void setNotify_url(String notify_url) {
  97.         this.notify_url = notify_url;
  98.     }
  100.     public String getTrade_type() {
  101.         return trade_type;
  102.     }
  104.     public void setTrade_type(String trade_type) {
  105.         this.trade_type = trade_type;
  106.     }
  108.     public String getDevice_info() {
  109.         return device_info;
  110.     }
  112.     public void setDevice_info(String device_info) {
  113.         this.device_info = device_info;
  114.     }
  116.     public String getSign_type() {
  117.         return sign_type;
  118.     }
  120.     public void setSign_type(String sign_type) {
  121.         this.sign_type = sign_type;
  122.     }
  124.     public String getDetail() {
  125.         return detail;
  126.     }
  128.     public void setDetail(String detail) {
  129.         this.detail = detail;
  130.     }
  132.     public String getAttach() {
  133.         return attach;
  134.     }
  136.     public void setAttach(String attach) {
  137.         this.attach = attach;
  138.     }
  140.     public String getFee_type() {
  141.         return fee_type;
  142.     }
  144.     public void setFee_type(String fee_type) {
  145.         this.fee_type = fee_type;
  146.     }
  148.     public String getTime_start() {
  149.         return time_start;
  150.     }
  152.     public void setTime_start(String time_start) {
  153.         this.time_start = time_start;
  154.     }
  156.     public String getTime_expire() {
  157.         return time_expire;
  158.     }
  160.     public void setTime_expire(String time_expire) {
  161.         this.time_expire = time_expire;
  162.     }
  164.     public String getGoods_tag() {
  165.         return goods_tag;
  166.     }
  168.     public void setGoods_tag(String goods_tag) {
  169.         this.goods_tag = goods_tag;
  170.     }
  172.     public String getProduct_id() {
  173.         return product_id;
  174.     }
  176.     public void setProduct_id(String product_id) {
  177.         this.product_id = product_id;
  178.     }
  180.     public String getLimit_pay() {
  181.         return limit_pay;
  182.     }
  184.     public void setLimit_pay(String limit_pay) {
  185.         this.limit_pay = limit_pay;
  186.     }
  188.     public String getOpenid() {
  189.         return openid;
  190.     }
  192.     public void setOpenid(String openid) {
  193.         this.openid = openid;
  194.     }
  196. }

后台

  1.         @RequestMapping(value = "/charge")
  2.     public Map<String, Object> charge(HttpServletRequest req) throws Exception {
  3.         super.pageLoad(req);
  4.         String total_fee = (String) super.parameterMap.get("total_fee");// 金额
  5.         // 将元转换为分
  6.         BigDecimal tf = new BigDecimal(total_fee);
  7.         BigDecimal real_total_fee = tf.multiply(new BigDecimal(100));
  8.         Map<String, Object> dataMap = new LinkedHashMap<String, Object>();
  9.         long timeStamp = System.currentTimeMillis() / 1000;// 时间戳(毫秒转换为秒)
  10.         String nonceStr = StringUtil.getRandomString(32);// 随机串
  11.         // 获取prepay_id,即获取微信生成的订单号，需要我们调用统一订单接口来获取
  12.         UnifiedOrderRequest uniOrder = new UnifiedOrderRequest();
  13.         uniOrder.setAppid(AppString.getAppid());
  14.         uniOrder.setMch_id(PublicConstants.MCH_ID);
  15.         uniOrder.setNonce_str(nonceStr);
  16.         uniOrder.setBody("xx充值");
  17.         uniOrder.setOut_trade_no(Utils.createTradeNo("O"));// 订单号生成
  18.         uniOrder.setTotal_fee(String.valueOf(real_total_fee.longValue()));
  19.         uniOrder.setOpenid((String) super.session.getAttribute("openId"));
  20.         uniOrder.setSpbill_create_ip(getIpAddr(req));
  21.         uniOrder.setNotify_url(
  22.                 req.getScheme() + "://" + req.getServerName() + req.getContextPath() + "/wxpay/payNotify");
  23.         uniOrder.setSign(Utils.createSign(Utils.convertBeanToMap(uniOrder)));
  24.         // 调用微信接口获取prepay_id
  25.         String result = httpSender.sendPost("https://api.mch.weixin.qq.com/pay/unifiedorder",
  26.                 Utils.reqObjectToXml(uniOrder));
  27.         logger.info(result);
  29.         UnifiedOrderResult uniOrderResult = (UnifiedOrderResult) Utils.getMsgResultEntity(result,
  30.                 UnifiedOrderResult.class.getName());
  31.         if (!uniOrderResult.getReturn_code().equals("SUCCESS")) {
  32.             dataMap.put("success", false);
  33.             dataMap.put("msg", "调用微信统一下单接口失败，原因：" + uniOrderResult.getReturn_msg());
  34.             return dataMap;
  35.         }
  36.         dataMap.put("appId", AppString.getAppid());
  37.         dataMap.put("nonceStr", nonceStr);
  38.         dataMap.put("package", "prepay_id=" + uniOrderResult.getPrepay_id());
  39.         dataMap.put("signType", PublicConstants.SIGN_TYPE);
  40.         dataMap.put("timeStamp", String.valueOf(timeStamp));
  41.         dataMap.put("paySign", Utils.createSign(dataMap));
  42.         return dataMap;
  43.     }
  45.     @RequestMapping(value = "/payNotify")
  46.     public void payNotify(HttpServletRequest request, HttpServletResponse response) throws Exception {
  47.         Map<String, String> returnMap = new HashMap<>();
  48.         // 读取请求头，获取参数
  49.         StringBuilder requestSb = new StringBuilder();
  50.         BufferedReader reader = request.getReader();
  51.         String line = null;
  52.         while (null != (line = reader.readLine())) {
  53.             requestSb.append(line);
  54.         }
  55.         logger.info("payNotify支付回调通知结果：" + requestSb.toString());
  56.         Map<String, String> wxResultMap = WXPayUtil.xmlToMap(requestSb.toString());
  57.         // 判断通知中的sign是否有效
  58.         WXPay wxPay = new WXPay(new WXPayConfig() {
  59.             @Override
  60.             public String getMchID() {
  61.                 return PublicConstants.MCH_ID;
  62.             }
  64.             @Override
  65.             public String getAppID() {
  66.                 return AppString.getAppid();
  67.             }
  69.             @Override
  70.             public String getKey() {
  71.                 return PublicConstants.API_KEY;
  72.             }
  74.             @Override
  75.             public int getHttpReadTimeoutMs() {
  76.                 return 5000;
  77.             }
  79.             @Override
  80.             public int getHttpConnectTimeoutMs() {
  81.                 return 5000;
  82.             }
  84.             @Override
  85.             public InputStream getCertStream() {
  86.                 return null;
  87.             }
  88.         });
  89.         boolean signValid = wxPay.isPayResultNotifySignatureValid(wxResultMap);
  90.         if (signValid) {
  91.             if ("SUCCESS".equals(wxResultMap.get("return_code")) && "SUCCESS".equals(wxResultMap.get("result_code"))) {
  92.                 String guid = wxResultMap.get("openid");// 用户标识
  93.                 Integer total_fee = Integer.valueOf(wxResultMap.get("openid"));// 订单金额，单位为分
  94.                 String transaction_id = wxResultMap.get("transaction_id");// 微信支付订单号
  95.                 /* 支付成功处理 写入交易记录 */
  96.                 // 1、微信订单号处理过了不再处理 2.通过guid查找用户手机号 3、将充值记录写入数据库
  97.                 Map<String, Object> paramMap = new HashMap<>();
  98.                 paramMap.put("wxTransactionId", transaction_id);
  99.                 List<TransactionRecord> transactionRecordList = this.transactionRecordService.findByParams(paramMap);
  100.                 if (!CollectionUtils.isEmpty(transactionRecordList)) {// 微信支付订单号已存在则不进行处理
  101.                     returnMap.put("return_code", "SUCCESS");
  102.                     returnMap.put("return_msg", "OK");
  103.                     logger.info("payNotify支付回调返回微信参数【" + transaction_id + "已处理直接返回】：" + returnMap);
  104.                     response.getWriter().write(WXPayUtil.mapToXml(returnMap));
  105.                     return;
  106.                 }
  107.                 paramMap.put("guid", guid);
  108.                 List<Account> userList = this.accountService.findByParams(paramMap);
  109.                 String tellphone = userList.get(0).getTellphone();// 用户手机号
  110.                 this.transactionRecordService.add(new TransactionRecord(tellphone, guid,
  111.                         new BigDecimal(total_fee / 100), transaction_id, TransactionTypeEnum.RECHARGE.getValue()));// 保存充值记录
  112.                 returnMap.put("return_code", "SUCCESS");
  113.                 returnMap.put("return_msg", "OK");
  114.             } else {
  115.                 returnMap.put("return_code", "FAIL");
  116.                 returnMap.put("return_msg", wxResultMap.get("return_msg"));
  117.             }
  118.         } else {
  119.             returnMap.put("return_code", "FAIL");
  120.             returnMap.put("return_msg", "签名失败");
  121.         }
  122.         logger.info("payNotify支付回调返回微信参数：" + returnMap);
  123.         response.getWriter().write(WXPayUtil.mapToXml(returnMap));
  124.     }

jsp

  1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  7. <title>公众号支付</title>
  8. <link href="<%=request.getContextPath()%>/css/app_comm.css" rel="stylesheet" type="text/css" />
  9. <link href="<%=request.getContextPath()%>/css/app_style.css" rel="stylesheet" type="text/css" />
  10. <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
  11. <script type="text/javascript" src="<%=request.getContextPath()%>/js/app_comm.js"></script>
  12. <script type="text/javascript" src="<%=request.getContextPath()%>/js/common.js"></script>
  13. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  15. <script language="javascript" type="text/javascript">
  16. //全局变量
  17. //可退金额
  18. var refundAmount = 0;
  20. $(document).ready(function(){
  21.     //隐藏弹窗
  22.     hideWin();
  23.     //充值金额切换
  24.     $(".div_ul>li").click(function(){
  25.         $(".div_ul>li").removeClass("ar_rci");
  26.         $(this).addClass("ar_rci");
  27.         //显示或者隐藏输入框
  28.         if($(this).attr("id")==("other_amount")){
  29.             $("#input_amount").show();
  30.             $("#input_amount").val("其他金额（元）");
  31.             $("#charge_amount").val("");
  32.         }else{
  33.             $("#input_amount").hide();
  34.             var str = $(this).text();
  35.             $("#charge_amount").val(str.substring(0,str.length - 1));
  36.         }                                    
  37.     });
  38.     $("#input_amount").hide();    
  39.     //设置按钮点击样式
  40.     $("#chgbtn").click(function(){
  41.         $(this).css("background","#ddd");
  42.         var that = $(this);
  43.         setTimeout(function() {   
  44.             that.css("background",""); 
  45.         }, 50);
  46.     });
  47.     //获取用户金额
  48.     ajaxSyncRequest("wx/amount",{},function(data){
  49.            if(data.success){
  50.                $("#balance").text(data.amount);
  51.            }else{
  52.                alert(data.msg);
  53.            }
  54.     });    
  55. });
  57. //输入框获得焦点
  58. function inputOnFocus(){
  59.     $("#input_amount").attr('type','number');
  60.     if($("#input_amount").val()=='其他金额（元）'){
  61.         $("#input_amount").val("");
  62.     }
  63. }
  65. //输入框失去焦点
  66. function inputBlur(){
  67.     $("#input_amount").attr('type','text');
  68.     $("#charge_amount").val($("#input_amount").val());
  69.     if($("#input_amount").val()==''){
  70.         $("#input_amount").val('其他金额（元）');
  71.     }
  72. }
  74. //隐藏弹窗
  75. function hideWin(){
  76.     $(".app_rec").hide();
  77.     $(".lock").hide();
  78. }
  80. //显示弹窗
  81. function showWin(){
  82.     $(".lock").show();
  83.     $(".app_rec").show();
  84. }
  86. //充值
  87. function charge(){
  88.     //调用微信支付接口进行充值
  89.     wxPay();
  90. }
  92. //确定判断有无注册之后，在执行支付操作
  93. function wxPay(){
  94.     var text = $("#charge_amount").val();
  95.     if(text == ""){
  96.         alert("请输入充值金额！");       
  97.     }else if(!/^[0-9](([0-9]*\.[0-9]{2})|([0-9]*\.[0-9]{1})|([0-9]*))$/.test(text)){
  98.         alert("请正确输入充值金额！最多两位小数");
  99.     }else{
  100.         var value = Number(text);
  101.         ajaxSyncRequest("wxpay/charge",{"total_fee": value},function(data){
  102.             if(typeof data.success != 'undefined' && !data.success){
  103.                 alert(data.msg);
  104.                 return;
  105.             }
  106.             var onBridgeReady = function(){
  107.                 WeixinJSBridge.invoke(
  108.                       'getBrandWCPayRequest', {
  109.                           "appId": data.appId,  //公众号名称，由商户传入     
  110.                           "timeStamp": data.timeStamp,      //时间戳，自1970年以来的秒数     
  111.                           "nonceStr": data.nonceStr,       //随机串     
  112.                           "package": data.package,    //微信生成的订单号 
  113.                           "signType": data.signType,  //微信签名方式：     
  114.                           "paySign": data.paySign //微信签名 
  115.                       },
  116.                       function(res){     
  117.                           if(res.err_msg == "get_brand_wcpay_request:ok" ) {
  118.                               //alert("充值成功！");
  119.                               //充值成功，写入数据库(总金额，充值记录)
  120.                               ajaxSyncRequest("wx/chargeRecord",{"amount":value},function(data){
  121.                                if(data.success){
  122.                                    window.location.reload();                                   
  123.                                }else{    
  124.                                    alert(data.msg);
  125.                                }
  126.                            });
  127.                           }
  128.                       }
  129.                   ); 
  130.             }
  131.             //调用微信支付接口
  132.             if (typeof(WeixinJSBridge) == "undefined"){
  133.                 if( document.addEventListener ){
  134.                     document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  135.                 }else if (document.attachEvent){
  136.                     document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
  137.                     document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  138.                 }
  139.              }else{
  140.                  onBridgeReady(); 
  141.              } 
  142.         });
  143.     }
  144. }
  145. </script>
  146. </head>
  147. <body>
  149. <div class="w_all app_main">
  150.     <div class="app_rech">
  151.         <div class="app_rech_ra">
  152.             <i id="balance">0.00</i>
  153.             <b>钱包余额（元）</b>
  154.         </div>
  155.         <div class="app_rech_ras">
  156.             <div class="app_rech_rast">充值金额</div>
  157.             <ul class="div_ul" style="display:block;">
  158.                 <li class="ar_rc">300元</li>
  159.                 <li class="ar_rc">200元</li>
  160.                 <li class="ar_rc ar_rci">100元</li>
  161.                 <li class="ar_rc">50元</li>
  162.                 <li class="ar_rc" id="other_amount">其他</li>
  163.             </ul>
  164.             <input name="" id="charge_amount" type="hidden" value="100"/>
  165.             <div class="app_rech_rasi"><input name="" id="input_amount" type="text" οnfοcus="inputOnFocus();" οnblur="inputBlur();" οnkeyup="findConcerns()" value="其他金额（元）"/></div>
  166.         </div>
  167.         <div class="app_info_but"><a class="app_cont_but" id="chgbtn" οnclick="charge()">充值</a></div>
  168.     </div>
  169.     <div class="app_menu">
  170.         <ul>
  171.         </ul>
  172.     </div>
  173. </div>
  175. </body>
  176. </html>

发表评论

表情：
评论列表 （有 0 条评论，556人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信公众号支付

    最重要：公众号必须有支付权限 具体如何查看请百度 先配置一下 否则开发很蛋疼 楼主这几天都在蛋疼中 1.在公众号中获取 appid, mch

    怼烎@怼烎@/ 0 赞/ 468 阅读