小程序支付_小程序支付php - CSDN
精华内容
参与话题
  • 微信小程序调用微信支付接口

    万次阅读 多人点赞 2018-12-05 15:17:12
    前言:应项目要求,需要使用微信小程序支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说)。此次开发在因站在巨人的肩膀上顺利完成。 微信支付文档传送门:...

    前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说)。此次开发在因站在巨人的肩膀上顺利完成。

    微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3

    1.开发工具:

    Eclipse+Tomcat+微信web开发工具

    2.开发环境:

    java+maven

    3.开发前准备:

    3.1 所需材料

    小程序的appid,APPsecret,支付商户号(mch_id),商户密钥(key),付款用户的openid。

    申请接入微信商户地址:https://pay.weixin.qq.com/static/applyment_guide/applyment_detail_miniapp.shtml

    3.2 开发模式

    本次开发采用的开发模式是:普通模式,适用于有自己开发团队或外包开发商的直连商户收款。开发者申请自己的appid和mch_id,两者需具备绑定关系,以此来使用微信支付提供的开放接口,对用户提供服务。

     

    4 开发

    4.1 小程序端

    wx.request({
    
        url: address + 'wxPay',
    
        data: {
    
            openId: openId
        
            // amount: amount,
    
            // openId: openId
    
        },
    
        header: {
    
            'content-type': 'application/x-www-form-urlencoded' // 默认值
        
        },
    
        method: "POST",
    
        success: function (res) {
    
            console.log(res);
    
            that.doWxPay(res.data);
        },
    
        fail: function (err) {
    
            wx.showToast({
    
                icon: "none",
    
                title: '服务器异常,清稍候再试'
    
            })
    
        },
    
    });
    
    
    
    doWxPay(param) {
    
    //小程序发起微信支付
    
    wx.requestPayment({
    
    timeStamp: param.data.timeStamp,//记住,这边的timeStamp一定要是字符串类型的,不然会报错
    
    nonceStr: param.data.nonceStr,
    
    package: param.data.package,
    
    signType: 'MD5',
    
    paySign: param.data.paySign,
    
    success: function (event) {
    
    // success
    
    console.log(event);
    
    
    
    wx.showToast({
    
    title: '支付成功',
    
    icon: 'success',
    
    duration: 2000
    
    });
    
    },
    
    fail: function (error) {
    
    // fail
    
    console.log("支付失败")
    
    console.log(error)
    
    },
    
    complete: function () {
    
    // complete
    
    console.log("pay complete")
    
    }
    
    });
    
    },

    4.2 java后台

    4.2.1 PayUtil.java

    private static Logger logger = Logger.getLogger(PayUtil.class);
    public static JSONObject wxPay(String openid,HttpServletRequest request){
    JSONObject json = new JSONObject();
            try{
                //生成的随机字符串
                String nonce_str = Util.getRandomStringByLength(32);
                //商品名称 
                String body = new String(WXConst.title.getBytes("ISO-8859-1"),"UTF-8");
                //获取本机的ip地址
                String spbill_create_ip = Util.getIpAddr(request);
                String orderNo = WXConst.orderNo;
                String money = "1";//支付金额,单位:分,这边需要转成字符串类型,否则后面的签名会失败
    
                Map<String, String> packageParams = new HashMap<String, String>();
                packageParams.put("appid", WXConst.appId);
                packageParams.put("mch_id", WXConst.mch_id);
                packageParams.put("nonce_str", nonce_str);
                packageParams.put("body", body);
                packageParams.put("out_trade_no", orderNo);//商户订单号
                packageParams.put("total_fee", money);
                packageParams.put("spbill_create_ip", spbill_create_ip);
                packageParams.put("notify_url", WXConst.notify_url);
                packageParams.put("trade_type", WXConst.TRADETYPE);
                packageParams.put("openid", openid);
    
    
                // 除去数组中的空值和签名参数
                packageParams = PayUtil.paraFilter(packageParams);
                String prestr = PayUtil.createLinkString(packageParams); // 把数组所有元素,按照“参数=参数值”的模式用“&”字符拼接成字符串
    
    
                //MD5运算生成签名,这里是第一次签名,用于调用统一下单接口
                String mysign = PayUtil.sign(prestr, WXConst.key, "utf-8").toUpperCase();
                logger.info("=======================第一次签名:" + mysign + "=====================");
    
    
                //拼接统一下单接口使用的xml数据,要将上一步生成的签名一起拼接进去
                String xml = "<xml version='1.0' encoding='gbk'>" + "<appid>" + WXConst.appId + "</appid>"
                        + "<body><![CDATA[" + body + "]]></body>"
                        + "<mch_id>" + WXConst.mch_id + "</mch_id>"
                        + "<nonce_str>" + nonce_str + "</nonce_str>"
                        + "<notify_url>" + WXConst.notify_url + "</notify_url>"
                        + "<openid>" + openid + "</openid>"
                        + "<out_trade_no>" + orderNo + "</out_trade_no>"
                        + "<spbill_create_ip>" + spbill_create_ip + "</spbill_create_ip>"
                        + "<total_fee>" + money + "</total_fee>"
                        + "<trade_type>" + WXConst.TRADETYPE + "</trade_type>"
                        + "<sign>" + mysign + "</sign>"
                        + "</xml>";
    
    
                System.out.println("调试模式_统一下单接口 请求XML数据:" + xml);
    
    
                //调用统一下单接口,并接受返回的结果
                String result = PayUtil.httpRequest(WXConst.pay_url, "POST", xml);
    
    
                System.out.println("调试模式_统一下单接口 返回XML数据:" + result);
    
    
                // 将解析结果存储在HashMap中
                Map map = PayUtil.doXMLParse(result);
    
    
                String return_code = (String) map.get("return_code");//返回状态码
    
    
                //返回给移动端需要的参数
                Map<String, Object> response = new HashMap<String, Object>();
                if(return_code == "SUCCESS" || return_code.equals(return_code)){
                    // 业务结果
                    String prepay_id = (String) map.get("prepay_id");//返回的预付单信息
                    response.put("nonceStr", nonce_str);
                    response.put("package", "prepay_id=" + prepay_id);
                    Long timeStamp = System.currentTimeMillis() / 1000;
                    response.put("timeStamp", timeStamp + "");//这边要将返回的时间戳转化成字符串,不然小程序端调用wx.requestPayment方法会报签名错误
    
    
                    String stringSignTemp = "appId=" + WXConst.appId + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id+ "&signType=" + WXConst.SIGNTYPE + "&timeStamp=" + timeStamp;
                    //再次签名,这个签名用于小程序端调用wx.requesetPayment方法
                    String paySign = PayUtil.sign(stringSignTemp, WXConst.key, "utf-8").toUpperCase();
                    logger.info("=======================第二次签名:" + paySign + "=====================");
    
    
                    response.put("paySign", paySign);
    
    
                    //更新订单信息
                    //业务逻辑代码
                }
    
    
                response.put("appid", WXConst.appId);
                json.put("errMsg", "OK");
                //json.setSuccess(true);
                json.put("data", response);
                //json.setData(response);
            }catch(Exception e){
                e.printStackTrace();
                json.put("errMsg", "Failed");
                //json.setSuccess(false);
                //json.setMsg("发起失败");
            }
            return json;
        }
    
    
    
    /**  
         * 签名字符串  
         * @param text需要签名的字符串  
         * @param key 密钥  
         * @param input_charset编码格式  
         * @return 签名结果  
         */   
        public static String sign(String text, String key, String input_charset) {   
            text = text + "&key=" + key;   
            return DigestUtils.md5Hex(getContentBytes(text, input_charset));   
        }   
        /**  
         * 签名字符串  
         * @param text需要签名的字符串  
         * @param sign 签名结果  
         * @param key密钥  
         * @param input_charset 编码格式  
         * @return 签名结果  
         */   
        public static boolean verify(String text, String sign, String key, String input_charset) {   
            text = text + key;   
            String mysign = DigestUtils.md5Hex(getContentBytes(text, input_charset));   
            if (mysign.equals(sign)) {   
                return true;   
            } else {   
                return false;   
            }   
        }   
        /**  
         * @param content  
         * @param charset  
         * @return  
         * @throws SignatureException  
         * @throws UnsupportedEncodingException  
         */   
        public static byte[] getContentBytes(String content, String charset) {   
            if (charset == null || "".equals(charset)) {   
                return content.getBytes();   
            }   
            try {   
                return content.getBytes(charset);   
            } catch (UnsupportedEncodingException e) {   
                throw new RuntimeException("MD5签名过程中出现错误,指定的编码集不对,您目前指定的编码集是:" + charset);   
            }   
        }   
        /**  
         * 生成6位或10位随机数 param codeLength(多少位)  
         * @return  
         */   
        public static String createCode(int codeLength) {   
            String code = "";   
            for (int i = 0; i < codeLength; i++) {   
                code += (int) (Math.random() * 9);   
            }   
            return code;   
        }   
        @SuppressWarnings("unused")
    private static boolean isValidChar(char ch) {   
            if ((ch >= '0' && ch <= '9') || (ch >= 'A' && ch <= 'Z') || (ch >= 'a' && ch <= 'z'))   
                return true;   
            if ((ch >= 0x4e00 && ch <= 0x7fff) || (ch >= 0x8000 && ch <= 0x952f))   
                return true;// 简体中文汉字编码   
            return false;   
        }   
        /**  
         * 除去数组中的空值和签名参数  
         * @param sArray 签名参数组  
         * @return 去掉空值与签名参数后的新签名参数组  
         */   
        public static Map<String, String> paraFilter(Map<String, String> sArray) {   
            Map<String, String> result = new HashMap<String, String>();   
            if (sArray == null || sArray.size() <= 0) {   
                return result;   
            }   
            for (String key : sArray.keySet()) {   
                String value = sArray.get(key);   
                if (value == null || value.equals("") || key.equalsIgnoreCase("sign")   
                        || key.equalsIgnoreCase("sign_type")) {   
                    continue;   
                }   
                result.put(key, value);   
            }   
            return result;   
        }   
        /**  
         * 把数组所有元素排序,并按照“参数=参数值”的模式用“&”字符拼接成字符串  
         * @param params 需要排序并参与字符拼接的参数组  
         * @return 拼接后字符串  
         */   
        public static String createLinkString(Map<String, String> params) {   
            List<String> keys = new ArrayList<String>(params.keySet());   
            Collections.sort(keys);   
            String prestr = "";   
            for (int i = 0; i < keys.size(); i++) {   
                String key = keys.get(i);   
                String value = params.get(key);   
                if (i == keys.size() - 1) {// 拼接时,不包括最后一个&字符   
                    prestr = prestr + key + "=" + value;   
                } else {   
                    prestr = prestr + key + "=" + value + "&";   
                }   
            }   
            return prestr;   
        }   
        /**  
         *  
         * @param requestUrl请求地址  
         * @param requestMethod请求方法  
         * @param outputStr参数  
         */   
        public static String httpRequest(String requestUrl,String requestMethod,String outputStr){   
            // 创建SSLContext   
            StringBuffer buffer = null;   
            try{   
            URL url = new URL(requestUrl);   
            HttpURLConnection conn = (HttpURLConnection) url.openConnection();   
            conn.setRequestMethod(requestMethod);   
            conn.setDoOutput(true);   
            conn.setDoInput(true);   
            conn.connect();   
            //往服务器端写内容   
            if(null !=outputStr){   
                OutputStream os=conn.getOutputStream();   
                os.write(outputStr.getBytes("utf-8"));   
                os.close();   
            }   
            // 读取服务器端返回的内容   
            InputStream is = conn.getInputStream();   
            InputStreamReader isr = new InputStreamReader(is, "utf-8");   
            BufferedReader br = new BufferedReader(isr);   
            buffer = new StringBuffer();   
            String line = null;   
            while ((line = br.readLine()) != null) {   
            buffer.append(line);   
            }   
            br.close();
            }catch(Exception e){   
                e.printStackTrace();   
            }
            return buffer.toString();
        }     
        public static String urlEncodeUTF8(String source){   
            String result=source;   
            try {   
                result=java.net.URLEncoder.encode(source, "UTF-8");   
            } catch (UnsupportedEncodingException e) {   
                // TODO Auto-generated catch block   
                e.printStackTrace();   
            }   
            return result;   
        } 
        /**
    * 解析xml,返回第一级元素键值对。如果第一级元素有子节点,则此节点的值是子节点的xml数据。
    * @param strxml
    * @return
    * @throws JDOMException
    * @throws IOException
    */
    public static Map doXMLParse(String strxml) throws Exception {
        if(null == strxml || "".equals(strxml)) {
            return null;
           }
    
        Map m = new HashMap();
        InputStream in = String2Inputstream(strxml);
        SAXBuilder builder = new SAXBuilder();
        Document doc = builder.build(in);
        Element root = doc.getRootElement();
        List list = root.getChildren();
        Iterator it = list.iterator();
        while(it.hasNext()) {
            Element e = (Element) it.next();
            String k = e.getName();
            String v = "";
            List children = e.getChildren();
            if(children.isEmpty()) {
                v = e.getTextNormalize();
            } else {
                v = getChildrenText(children);
        }
    
        m.put(k, v);
    }
    
    //关闭流
    in.close();
    
    return m;
    }
    /**
    * 获取子结点的xml
    * @param children
    * @return String
    */
    public static String getChildrenText(List children) {
        StringBuffer sb = new StringBuffer();
        if(!children.isEmpty()) {
        Iterator it = children.iterator();
        while(it.hasNext()) {
            Element e = (Element) it.next();
            String name = e.getName();
            String value = e.getTextNormalize();
            List list = e.getChildren();
            sb.append("<" + name + ">");
            if(!list.isEmpty()) {
                sb.append(getChildrenText(list));
            }
            sb.append(value);
            sb.append("</" + name + ">");
        }
    }
    
        return sb.toString();
    }
    public static InputStream String2Inputstream(String str) {
        return new ByteArrayInputStream(str.getBytes());
    }
    
    
    
    
    
    public static void wxNotify(HttpServletRequest request,HttpServletResponse response) throws Exception{  
    BufferedReader br = new BufferedReader(new InputStreamReader((ServletInputStream)request.getInputStream()));
            String line = null;
            StringBuilder sb = new StringBuilder();
            while((line = br.readLine())!=null){
                sb.append(line);
            }
            br.close();
            //sb为微信返回的xml
            String notityXml = sb.toString();
            String resXml = "";
            System.out.println("接收到的报文:" + notityXml);
    
    
            Map map = PayUtil.doXMLParse(notityXml);
    
    
            String returnCode = (String) map.get("return_code");
            if("SUCCESS".equals(returnCode)){
                //验证签名是否正确
                if(PayUtil.verify(PayUtil.createLinkString(map), (String)map.get("sign"), WXConst.key, "utf-8")){
                    /**此处添加自己的业务逻辑代码start**/
    
    
    
    
                    /**此处添加自己的业务逻辑代码end**/
    
    
                    //通知微信服务器已经支付成功
                    resXml = "<xml>" + "<return_code><![CDATA[SUCCESS]]></return_code>"
                            + "<return_msg><![CDATA[OK]]></return_msg>" + "</xml> ";
                }
            }else{
                resXml = "<xml>" + "<return_code><![CDATA[FAIL]]></return_code>"
                        + "<return_msg><![CDATA[报文为空]]></return_msg>" + "</xml> ";
            }
            System.out.println(resXml);
            System.out.println("微信支付回调数据结束");
    
    
            BufferedOutputStream out = new BufferedOutputStream(
                    response.getOutputStream());
            out.write(resXml.getBytes());
            out.flush();
            out.close();  
        }

     

     

    4.2.2 Util.java

    /**
         * Util工具类方法
         * 获取一定长度的随机字符串,范围0-9,a-z
         * @param length:指定字符串长度
         * @return 一定长度的随机字符串
         */
        public static String getRandomStringByLength(int length) {
            String base = "abcdefghijklmnopqrstuvwxyz0123456789";
            Random random = new Random();
            StringBuffer sb = new StringBuffer();
            for (int i = 0; i < length; i++) {
                int number = random.nextInt(base.length());
                sb.append(base.charAt(number));
            }
            return sb.toString();
        }
        
        
        /**
         * Util工具类方法
         * 获取真实的ip地址
         * @param request
         * @return
         */
        public static String getIpAddr(HttpServletRequest request) {
            String ip = request.getHeader("X-Forwarded-For");
            if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){
                //多次反向代理后会有多个ip值,第一个ip才是真实ip
                int index = ip.indexOf(",");
                if(index != -1){
                    return ip.substring(0,index);
                }else{
                    return ip;
                }
            }
            ip = request.getHeader("X-Real-IP");
            if(StringUtils.isNotEmpty(ip) && !"unKnown".equalsIgnoreCase(ip)){
                return ip;
            }
            return request.getRemoteAddr();
    
        }

     

    4.2.3 WXConst.java

        

    //微信小程序appid
    public static String appId = "";
    //微信小程序appsecret
    public static String appSecret = "";
    //微信支付主体
    public static String title = "";
    public static String orderNo = "";
    //微信商户号
    public static String mch_id="";
    //微信支付的商户密钥
    public static final String key = "";
    //获取微信Openid的请求地址
    public static String WxGetOpenIdUrl = "";
    //支付成功后的服务器回调url
    public static final String notify_url="https://api.weixin.qq.com/sns/jscode2session";
    //签名方式
    public static final String SIGNTYPE = "MD5";
    //交易类型
    public static final String TRADETYPE = "JSAPI";
    //微信统一下单接口地址
    public static final String pay_url = "https://api.mch.weixin.qq.com/pay/unifiedorder";

     

    5 可能出现的问题

    5.1 商户号

    会出现一个什么异常我忘了,重置一下微信商户密钥就好了

    5.2 中文参数

    String body = new String(WXConst.title.getBytes("ISO-8859-1"),"UTF-8");

    这行很重要,如果报参数索引-2异常,很可能是出现了中文,对中文进行如上处理即可通过。

    5.3 invalid spbill_create_ip

    使用微信web开发工具直接测试的,出现了这个问题,调试记得用真机哦。

    整个小程序前后端一个人开发,测试成功上线前夕又嫌弃微信支付收取的手续费(0.6%)太高,结算周期(T+7)太长,所以就被无情抛弃了,这个月项目重启(2018-11)和工商银行达成一致,直接转账到对公账户,目前项目进展顺利已上线。改需求请先扫码(小声bb)

    展开全文
  • 小程序支付---代码可直接用

    千次阅读 2018-09-19 17:41:31
    业务场景:用户点击会员中心的不同等级,进行支付   前台代码:  参数解释:  用户点击对应等级时,对应获取到需要支付的金额,在... 这里的openid和user_id都是在用户登录授权后获取的信息 ... * wechat:...

     业务场景:用户点击会员中心的不同等级,进行支付

     

    前台代码:

           参数解释:

                  用户点击对应等级时,对应获取到需要支付的金额,在获取到用户的对应id和openid

                  这里的openid和user_id都是在用户登录授权后获取的信息

    /*
     * author:咔咔
     * address:陕西西安
     * wechat:fangkangfk
     * content:微信小程序支付
     * */
    
    
    
    pay: function (e) {
          // 获取到需要支付的价钱
          var price = e.currentTarget.dataset.price;
          var user_id = wx.getStorageSync('user_id');
          // 验证是否获取到值
          if (typeof (price) == "undefined") {
            wx.showToast({
              title: '支付数据错误'
            })
            return false;
          }
          //后台订单生成
          wxb.Post('/api/automatic.pay/creatOrder', {
            openid: wxb.getOpenId(),
            price: price,
            user_id: user_id
          }, function (data) {
            var data = JSON.parse(data);
            console.log(data)
            wx.requestPayment({
              'timeStamp': data.timeStamp,
              'nonceStr': data.nonceStr,
              'package': data.package,
              'signType': 'MD5',
              'paySign': data.paySign,
              'success': function (res) {
    
                wxb.Post('/api/cards.member/confirm_integral', {
    
                  // 支付成功的业务逻辑代码
    
                }, function (datas) {
                  wx.redirectTo({
                    url: '/pages/mine/index'
                  })
    
                });
              },
              'fail': function (res) {
                
                wxb.Post('/api/cards.member/confirm_integral', {
                  // 支付失败或者取消支付代码
                }, function (datas) {
                });
              }
    
            });
          });
        },
    

     

     

    后台代码:

       获取到前台传的数据,进行创建订单,在进行请求获取统一下单的数据

    public function creatOrder(){
            $orderData = $this->request->param();
            $opneid = $orderData['openid'];
            if($orderData['user_id']){
                //appid
                $data['member_miniapp_id'] = $orderData['appid'];
                //支付金额
                $data['pay_money'] = $orderData['price'];
                //用户id
                $data['user_id'] = $orderData['user_id'];
                $orderModel = new OrderModel();
                $order = $orderModel->save($data);
                if($order){
                    //获取到订单id
                    $orderId = $orderModel->order_id;
                    //支付的金额
                    $orderPrice = $orderModel->pay_money;
                }
                if($orderId>=0){
                    $orderinfo = $this->buy($opneid);
                    $this->result($orderinfo, 200, '订单生成成功', 'json');
                }
            }
        }
    
    
    
    
    
    
    public function buy($opneid){
            $params = [
                'appid' => '小程序id',
                'mch_id' => '商户号',
                // 随机串,32字符以内
                'nonce_str' => (string) mt_rand(10000, 99999),
                // 商品名
                'body' => '购买vip',
                // 订单号,自定义,32字符以内。多次支付时如果重复的话,微信会返回“重复下单”
                'out_trade_no' => '20170823001' . time(),
                // 订单费用,单位:分
                'total_fee' => 1,
                'spbill_create_ip' => $_SERVER['REMOTE_ADDR'],
                // 支付成功后的回调地址,服务端不一定真得有这个地址
                'notify_url' => 'https://myserver.com/notify.php',
                'trade_type' => 'JSAPI',
                // 小程序传来的OpenID
                'openid' =>$opneid,
            ];
    
            // 按照要求计算sign
    
            ksort($params);
            $sequence = '';
            foreach ($params as $key => $value) {
                $sequence .= "$key=$value&";
            }
    
            $sequence = $sequence . "key=你的秘钥";
            $params['sign'] = strtoupper(md5($sequence));
    
            // 给微信发出的请求,整个参数是个XML
    
            $xml = '<xml>' . PHP_EOL;
            foreach ($params as $key => $value) {
                $xml .= "<$key>$value</$key>" . PHP_EOL;
            }
            $xml .= '</xml>';
    
            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL, 'https://api.mch.weixin.qq.com/pay/unifiedorder');
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_POST, 1);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $xml);
            curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
            $output = curl_exec($ch);
    
            if (false === $output) {
                echo 'CURL Error:' . curl_error($ch);
            }
    
            // 下单成功的话,微信返回个XML,里面包含prepayID,提取出来
    
            if (0 === preg_match('/<prepay_id><\!\[CDATA\[(\w+)\]\]><\/prepay_id>/', $output, $match)) {
                echo $output;
                exit(0);
            }
    
            // 这里不是给小程序返回个prepayID,而是返回一个包含其他字段的JSON
            // 这个JSON小程序自己也可以生成,放在服务端生成是出于两个考虑:
            //
            // 1. 小程序的appid不用写在小程序的代码里,appid、secret信息全部由服务器管理,比较安全
            // 2. 计算paySign需要用到md5,小程序端使用的是JavaScript,没有内置的md5函数,放在服务端计算md5比较方便
    
            $prepayId = $match[1];
            $response= [
                'appId' => '小程序id',
                // 随机串,32个字符以内
                'nonceStr' => (string) mt_rand(10000, 99999),
                // 微信规定
                'package' => 'prepay_id=' . $prepayId,
                'signType' => 'MD5',
                // 时间戳,注意得是字符串形式的
                'timeStamp' => (string) time(),
            ];
            $sequence = '';
            foreach ($response as $key => $value) {
                $sequence .= "$key=$value&";
            }
            $response['paySign'] = strtoupper(md5("{$sequence}key=你的秘钥"));
    
            return json_encode($response);
        }

     

    测试结果:

    展开全文
  • 小程序微信支付功能开发

    万次阅读 2019-03-19 08:44:38
    关于小程序内唤起微信支付功能,不同人有不同的思路,有嵌套H5页面的,也有跳转第三方链接网站的,也有放收钱码等图片的。 今天讲一下微信原生的微信支付功能基础版块,支付页面和支付逻辑。 先上个效果图: 页面...

    关于小程序内唤起微信支付功能,不同人有不同的思路,有嵌套H5页面的,也有跳转第三方链接网站的,也有放收钱码等图片的。
    今天讲一下微信原生的微信支付功能基础版块,支付页面和支付逻辑。
    先上个效果图:
    在这里插入图片描述
    在这里插入图片描述
    页面展示上提供了,商品名称,支付方式,用户信息,支付金额。更详细的可以包含手机号,订单号等信息。而在微信支付文档中所必须提供的内容就是商品价格{{total_fee}},还有商品描述{{body}},以及我们要录入的用户信息{{unioid}}或者{{openid}}。如何获取openid和unioid我会在另一篇中讲到
    这是前端提供给后端的数据,那么后端需要布置什么内容呢?
    就是基础项:

    $appid='wx1234567890';
    $openid= $_GET['openid'];
    $mch_id='150xxxxxxxxxx';
    $key='DLMYXYdlmyxyxxxxxxxxxxxxXY18';
    $out_trade_no = $mch_id. time();
    $total_fee = $_GET['fee'];
    

    这些基础内容除了openid和total_fee是获取前端,其他的信息就是小程序账号的设置信息,以及微信开放平台的商户信息。商户信息需要始终正确。
    有了这些信息,我们可以通过前端JS来执行接口调试。

    //微信支付
      wxPay: function (e) {
        var code = wx.getStorageSync("code");//获取app的code
        var openid = wx.getStorageSync("openid");
        var a = e.detail.value; //由支付页面带来的信息
        var time = util.toMd5(new Date());
        var userNid = wx.getStorageSync("unionid");
        var Md5Time = md5.hexMD5(time + userNid);
        wx.request({
          url: app.globalData.Url + '/pay/prepay',
          data: { //传递openid and total_fee
            openid: openid,
            unioid: userNid,
            total_fee: a.price,
            name: a.nickName,
            gtag: "VIP_1",
            buy_num: 1,
            body: 'VIP充值购买',
            body_des: "0003" + Md5Time,
          },
          method: "POST",
          header: {
            'content-type': 'application/x-www-form-urlencoded' // 默认值
          },
          success: function (res) {
            console.log(res);
            var data = res.data.data;
            wx.requestPayment({
              'timeStamp': data.timeStamp + '',
              'nonceStr': data.nonceStr,
              'package': data.package,
              'signType': 'MD5',
              'paySign': data.paySign,
              'success': function (res) {
                console.log("支付成功!")
              },
              'fail': function (res) {
              }
            })
          },
          fail: function (res) {
            console.log(res)
          }
        })
      },
      //取消支付
      channelSelect: function () {
        wx.showToast({
          title: "你取消了订单"
        })
        this.hidePay();
      },
    

    在执行过程中唤起支付弹窗,调试接口信息是否有错误;下面是提交的信息,
    在这里插入图片描述
    下面是返回的信息:
    在这里插入图片描述
    至此完整的原生支付功能就实现了。
    支付接口信息有微信官方提供的支付文档下载包,我用的是php版本的。
    附上支付页面的代码和样式代码:

    <view class="payWay-container">
      <view class="pay-container">
        <form bindsubmit="moneySubmit">
          <view class="pay-title">支付</view>
          <view>
            <view class="pay-content">
              <text style="width: 30%">商品名称</text>
              <input class="pay-content-right detail" name="des" disabled='true' value="{{des}}"></input>
            </view>
            <view class="pay-content">
              <text>微信用户</text>
              <input class="pay-content-right name" name="nickName" disabled='true' value='{{nickName}}'></input>
            </view>
            <view class="pay-content">
              <text>支付方式</text>
              <input class="pay-content-right name" name="nickName" disabled='true' value='{{payType}}'></input>
            </view>
            <view class="pay-content">
              <text>支付金额</text>
              <input class="pay-content-right price" placeholder='请输入金额/元' name="price" value='{{price}}'></input>
            </view>
          </view>
          <view class="pay-btn">
            <view catchtap="channelSelect" class="btns">取消</view>
            <button formType="submit" class="btns submit" data-submit="true">立即支付</button>
          </view>
        </form>
      </view>
      <couponComponent bind:selectChange="selectChange" bindcouponInfo="couponInfo" bindhideUserCouponList="hideUserCouponList" bindtoggleModule="toggleCouponModule" productInfo="{{productInfo}}" selectIdx="{{selectIdx}}" showUserCoupons="{{hideListShowCode}}"
        userCoupons="{{userCoupons}}" wx:if="{{showCouponModule&&!error}}"></couponComponent>
      <view class="pay-container order-fail" wx:if="{{error}}">
        <view wx:if="{{!errMsg}}"> 订单提交失败,请稍后重试!</view>
        <view wx:if="{{errMsg}}"> {{errMsg}}</view>
        <view bindtap="channelSelect" class="coupon-submit">确定</view>
      </view>
      <loading loading="{{loading}}" wx:if="{{loading.state}}"></loading>
    </view>
    

    WXSS代码;

    .payWay-container {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      background-color: rgba(22, 23, 24, 0.5);
    }
    
    .prompt {
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(22, 23, 24, 0.5);
      z-index: 102;
    }
    
    .pay-container {
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      background: #fff;
      z-index: 9999;
    }
    
    .error {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: #fff;
      z-index: 999;
    }
    
    .pay-title {
      position: relative;
      height: 83.3333rpx;
      border-bottom: 1rpx solid #ddd;
      color: #222;
      font-size: 37.5rpx;
      line-height: 83.3333rpx;
      text-align: center;
    }
    
    .pay-img image {
      width: 240rpx;
      height: 240rpx;
      display: flex;
      justify-content: center;
      margin: 0 auto;
    }
    
    .pay-content {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin: 0 auto;
      width: 90%;
      min-height: 68rpx;
      color: #666;
      font-size: 30rpx;
    }
    
    .getphone {
      border-radius: 80rpx;
      margin: 70rpx 50rpx;
      font-size: 30rpx;
      width: 100%;
    }
    
    .pay-content.honey-content {
      border-bottom: 1rpx solid #ddd;
    }
    
    .pay-content.honey-content .pay-content-right {
      color: #999;
    }
    
    .pay-content.honey-content .pay-content-right {
      color: #f80;
    }
    
    .pay-content-left {
      display: flex;
      align-items: center;
    }
    
    .honey-logo {
      width: 43rpx;
      height: 43rpx;
      margin-right: 16rpx;
    }
    
    .pay-content:last-child {
      border-bottom: 1rpx solid #ddd;
    }
    
    .pay-content .pay-content-right {
      color: #222;
      font-size: 29.167rpx;
    }
    
    .pay-content .pay-content-right.price {
      color: #f80;
    }
    
    .pay-content .detail {
      color: #00b93b;
    }
    
    .pay-content .name {
      color: #d16c29;
    }
    
    .pay-content .phone {
      color: #2694dd;
    }
    
    .pay-content .coupon-detail {
      color: #999;
    }
    
    .pay-content .coupon-detail.detail {
      color: #00b93b;
    }
    
    .pay-content .explain-left {
      width: 20%;
    }
    
    .pay-content .explain {
      color: #f80;
      font-size: 20rpx;
    }
    
    .pay-content .pay-image {
      margin-left: 5.556rpx;
      width: 11.1111rpx;
      height: 21.52778rpx;
    }
    
    .pay-content .coupon-left {
      display: flex;
      align-items: center;
    }
    
    .pay-content .coupon-left .use-len {
      margin-left: 10rpx;
      padding: 6rpx 8rpx;
      border: 1rpx solid #fd3735;
      color: #f74d62;
      font-size: 16rpx;
    }
    
    .pay-content .coupon-left .use-len.match-best {
      color: #fff;
      background-color: #fd3735;
    }
    
    .pay-list {
      margin: 0 auto;
      width: 90%;
      border-top: 1rpx solid #c2c2c2;
    }
    
    .pay-list-li, .pay-list-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .pay-list-li {
      height: 108.33rpx;
      border-bottom: 1rpx solid #c2c2c2;
      color: #333;
      font-size: 31.25rpx;
    }
    
    .pay-list .pay-list-img {
      margin-right: 20.833rpx;
      width: 66.6667rpx;
      height: 66.6667rpx;
    }
    
    .pay-list .pay-list-detail {
      margin-left: 20.833rpx;
      color: #999;
      font-size: 25rpx;
    }
    
    .select-pay {
      position: relative;
      width: 41.667rpx;
      height: 41.667rpx;
      border: 1rpx solid #d8d8d8;
      border-radius: 50%;
    }
    
    .select-pay.active {
      background: #00b93b;
    }
    
    .select-pay .select-check {
      position: absolute;
      width: 26.38889rpx;
      height: 17.361rpx;
      top: 14.111rpx;
      left: 7.3rpx;
    }
    
    .pay-btn {
      display: flex;
      margin: 50rpx auto 70rpx;
      flex-direction: row;
      justify-content: center;
      width: 480rpx;
      height: 75rpx;
    }
    
    .pay-btn .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0;
      padding: 0;
      width: 240rpx;
      height: 75rpx;
      background: #fff;
      border: 1rpx solid #00b93b;
      border-radius: 0;
      border-top-left-radius: 42rpx;
      border-bottom-left-radius: 42rpx;
      color: #00b93b;
      font-size: 29.166rpx;
    }
    
    .pay-btn .submit {
      background: #00b93b;
      box-sizing: content-box;
      border-radius: 0;
      border-top-right-radius: 42rpx;
      border-bottom-right-radius: 42rpx;
      color: #fff;
    }
    
    .order-fail {
      padding-top: 60rpx;
      color: #222;
      font-size: 37.5rpx;
      text-align: center;
    }
    
    .order-fail .coupon-submit {
      border-color: #00b93b;
      color: #00b93b;
    }
    
    button::after {
      border: none;
    }
    
    .coupon-submit {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 50rpx auto;
      width: 416.667rpx;
      height: 75rpx;
      border: 1rpx solid #d8d8d8;
      border-radius: 45rpx;
      color: #c2c2c2;
      font-size: 31.25rpx;
    }
    .isPayShow {
      display: block;
    }
    
    .isPayHide {
      display: none;
    }
    
    

    以上这个属于template模板,供其页面来动态调用的;

    <view class="shadow-box {{isPayTrue?'isPayShow':'isPayHide'}}">
      <include src="../../template/helppay/helppay"></include>
    </view>
    

    后续会继续补充小程序支付功能的开发。

    展开全文
  • 10分钟实现微信小程序支付功能

    千人学习 2019-08-13 10:24:31
    只需要一个简单的云函数,就可以轻松的实现微信小程序支付功能。 核心代码就下面这些 一,创建一个云开发小程序 关于如何创建云开发小程序,这里我就不再做具体讲解。不知道怎么创建云开发...
  • 微信小程序调用支付接口支付

    万次阅读 多人点赞 2019-03-17 13:07:45
    我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法。我就讲讲我从完全懵到完成的过程吧。 在微信提供的...

    我前段时间做微信支付,遇到了很多坑,网上也没有讲解的特别明白的,通过借鉴各路人才的经验,最后也完成了,网上有很多讲解,我在这只讲一些注意点和解决的方法。我就讲讲我从完全懵到完成的过程吧。

    在微信提供的接口文档中提供了一个微信支付接口,应该是直接调用这个接口就可以发起微信支付

    文档路径:https://developers.weixin.qq.com/miniprogram/dev/api/api-pay.html#wxrequestpaymentobject

    但是,当开始信心满满的去看所需参数时,懵逼了,这些参数是什么

    在这些参数中最难理解和获取的就是这两个了,仔细研究后发现,package这个参数的获取要调用微信提供的另一个接口,统一下单接口。原来在微信中支付需要先进行一下预下单。这里的时间戳使用的是秒值不是毫秒值

    文档路径:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1

    这个接口就需要后台通过http请求来调了

    而在这些参数中,有两个参数很眼熟,在第一步发起微信请求时也有这两个参数,后发现这里的随机字符串就是调起支付时用到的随机字符串,而且是必须一致,那么签名呢,要是也认为一样就完全调沟里了,这里的签名我称为一次签名,因为支付的时候要进行第二次签名。签名生成算法有讲解,多读几遍就明白了,我建议读个几十遍。

    把这些必填的参数都准备好

    很重要的是你要首先有个店铺,就有商户号了

    订单号必须唯一哦,通知地址就是当支付成功后微信会回调这个地址,在这里你可以做一些事,比如修改订单状态什么的。

    然后就是签名生成,这个很重要:把需要的参数都放到一个map中,然后对这些参数进行排序,然后把商品key拼接到后面进行MD5加密就生成签名了,我还是建议仔细看看签名生成算法,不要想太复杂,就是排序,拼接,加密三步完成。

    最后就是准备参数传输了,这里的参数传输是以xml的方式传输,下面就是传输的数据,其实就是一个大的字符串,

    你可以这样

    String s =“<xml>”

        +"<appid>wxdxxxxxxxxx</appid>"

        +"<mch_id>10000100</mch_id>"

        +"<nonce_str>24jtlk2j3ltjl2kjlkt3j</nonce_str>"

        +"<sign>432l4j5j4325l23k4j5lj34</sign>"

        +"</xml>"

    我就意思一下了,大家懂就行,其实就是一个字符串,完全可以通过遍历参数map来自己拼接的。

    然后就是把这个大字符串传过去,以上没问题的话就会返回一个字符串的xml,格式类型咱们拼接的参数。

    从中取出我们需要的东西,最重要的应该就是这个,预下单id,这就是之前咱们需要的package

    使用时是这样的:package='prepay_id=201411109120471241k1241240124bk1k24'

    然后就是二次签名了,签名生成顺序和第一次是一样的,主要要确定需要哪些参数。

    然后把这些参数返回给前台使用,取出来放进去就行了。

    到这里前端调用一下就发起支付了。

    有什么问题欢迎提问

     

    展开全文
  • 小程序支付,详细过程

    万次阅读 2018-03-29 18:57:17
    2、绑定商户号。3、在小程序填写合法域二、完成以上条件,你可以得到 “小程序appid 小程序秘钥 ” 这两个用于获取用户openid;...三、拿到这四样东西我们开始小程序支付; 前端代码: /* 调起微信支付 @p...
  • 详解微信小程序支付流程

    万次阅读 多人点赞 2018-07-02 18:29:54
    花了几天把小程序的支付模块接口写了一下,可能有着公众号开发的一点经验,没有入太多的坑,在此我想记录一下整个流程。首先先把小程序微信支付的图搬过来:...在小程序支付这块,还需要跟微信服务器进行交互。过程...
  • 小程序支付

    2018-11-29 16:02:25
    微信小程序开发----基于JAVA实现微信支付过程(小程序支付JSAPI) 项目需求:小程序中带支付功能(刚刚做完带微信支付功能的小程序项目,将自己做过的项目中用到的知识进行梳理、总结)  微信支付其实就是调用...
  • 小程序支付流程

    千次阅读 2018-12-28 16:35:18
    微信支付作为小程序很重要的部分,今天有空,就来总结一下它 的基本流程,闲话少说,我们直接开始。 一:准备工作 1、小程序注册,要以公司的以身份去注册一个小程序,才有微信支付权限; 2、绑定商户号。 3、在...
  • 小程序微信支付 实例配置详解

    万次阅读 热门讨论 2019-07-05 12:24:01
    近期进行小程序的开发,毕竟是商城项目的开发,最后牵扯到的微信支付是必要的个人开发过程中也是遇到各种问题。在此,进行代码的详细配置,以方便小程序新手的快速操作 使用语言:PHP 框架:ThinkPHP 3.2 整理时间...
  • 前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能。 传送门 借助小程序云开发实现小程序...
  • 微信小程序支付报 签名错误

    万次阅读 2018-05-31 20:50:27
    今天在开发小程序支付时,将之前的公众号appId改为了小程序的appId,将appKey改为了小程序的appSecret。再次进行支付时,报出了签名错误的问题!问题原因:微信支付时,需要几个参数:appId,appKey,mchId这三个...
  • 微信小程序支付源码 Demo 后台服务端代码

    万次阅读 多人点赞 2017-12-28 16:56:50
    微信小程序支付绕坑指南 步骤 A:小程序向服务端发送商品详情、金额、openid B:服务端向微信统一下单 C:服务器收到返回信息二次签名发回给小程序 D:小程序发起支付 E:服务端收到回调 源代码已经上传到 ...
  • 小程序如何开通微信支付

    万次阅读 2018-05-14 18:24:54
    目前开通微信小程序支付功能有两种方式,一个是你已经有微信商户号的情况下直接绑定一下商户号就可以了,另一个就是需要新申请一个微信支付的商户号。第一种:绑定已有微信支付商户号如果您开通过微信支付商户,绑定...
  • 小程序实现h5页面的微信支付

    万次阅读 2019-02-15 16:03:40
    为了达到兼容,因为支付页面是同一个,所以项目必须同时兼容两个支付,一个是原本h5项目的支付能正常使用,另一个是当在小程序中点击支付的时候调用小程序自己的支付功能。   实现思路: 先判断h5的加载...
  • 小程序支付的时候出现“支付验证签名失败”,在微信支付接口签名验证工具检查是正确的 解决方案; 在开发微信小程序支付的时候 统一下单签名是正常的,能正常获取到prepayid。 用同样的方法做二次签名,每次支付小...
  • 微信小程序 调用支付jsapi时缺少参数:total_fee
  • 第1个坑:微信支付的api密钥(签名需要的key参数) 商户中心(https://pay.weixin.qq.com/index.php/extend/employee) – API安全 – API密钥 API密钥是不能查询,只能更新。我直接从公众号的微信支付代码中复制...
  • 因为微信服务号支付,是微信商户号的一个支付功能,他们以前开通过,所以希望把这个利用起来,跟小程序支付绑定,今天子恒老师来跟你详细分享下实现的方法。一、 小程序绑定服务号支付需要注意的地方你的主体必须要...
  • 5月8日起小程序关闭虚拟支付,对于此次小程序关闭虚拟支付影响最大的,应该是知识付费/在线教育类的小程序,这类小程序现有的变现模式将受到巨大的冲击。   一、这次整改意味着什么?有3个需要注意   1、虚拟...
1 2 3 4 5 ... 20
收藏数 104,929
精华内容 41,971
关键字:

小程序支付