微信 PC 网页二维码支付 相关研究

微信官方文档与例子,我使用不了,查找相关文档无数,找了几个靠谱的

https://blog.csdn.net/qq_32574435/article/details/78952325

https://blog.csdn.net/rentian1/article/details/78807199

http://kf.qq.com/faq/170830jimmaa170830B7F7NJ.html

(恩,点赞)

选择模式二开发,好用又快

上来你应该有个配置文件WXpayConfig

商户id,公证号,被扫api地址:就是官方给的统一下单的网址:public static String PAY_QUERY_API = "https://api.mch.weixin.qq.com/pay/orderquery";

我只写被扫,还有回调函数,就是客户扫码支付成功了,会调用后台的地址,一个二维码包含了很多机制与信息

controller

@RequestMapping(value="/qrcodePay",produces="application/json;charset=UTF-8")
    public String qrcodePay(ForWXPay record,HttpServletRequest req,HttpServletResponse response){
        JSONObject json = new JSONObject();
        record.setTrade_type("NATIVE");
        record.setSpbill_create_ip(WXPayUtil.getIpAddr(req));
        Map<String, String> map = wXPayService.unifiedorder(record);
        if(map.get("return_code").equals("SUCCESS")){
            if(map.get("result_code").equals("SUCCESS")){
                String url = map.get("code_url");
                System.out.println(url);
                json.put("data", url);
                json.put("code", 1);
            }else{
                json.put("code", 0);
                System.out.println(map.get("err_code_des"));
            }
        }else{
            json.put("code", 0);
            System.out.println(map.get("return_msg"));
        }
        return json.toJSONString();    
    }

serviceimpl实现类:

@Override
    public Map<String, String> unifiedorder(ForWXPay record) {
        String key = WXPayConfig.key;
        String currTime = WXPayUtil.getCurrTime();
        String strTime = currTime.substring(8, currTime.length());
        String strRandom = WXPayUtil.buildRandom(4) + "";
        String nonce_str = strTime + strRandom;
        //TbOrderForm orderForm = tbOrderFormMapper.selectByOrderNum(record.getOut_trade_no());
        //String total_fee = orderForm.getOrderAmount().multiply(new BigDecimal("100")).intValue() + "";
        String trade_type = record.getTrade_type();
        String time_start =  new SimpleDateFormat("yyyyMMddHHmmss").format(new Date());
        Calendar ca = Calendar.getInstance();
        ca.setTime(new Date());
        ca.add(Calendar.MINUTE, 10);         
        String time_expire =  new SimpleDateFormat("yyyyMMddHHmmss").format(ca.getTime());
        SortedMap<Object,Object> packageParams = new TreeMap<Object,Object>();
        packageParams.put("appid", WXPayConfig.appID);
        packageParams.put("mch_id", WXPayConfig.mchID);
        packageParams.put("nonce_str", nonce_str);
        packageParams.put("body", "aa");
        packageParams.put("out_trade_no", record.getOut_trade_no());
        packageParams.put("total_fee", "100");
        packageParams.put("spbill_create_ip", record.getSpbill_create_ip());
        packageParams.put("notify_url",WXPayConfig.NOTIFY_URL );
        packageParams.put("trade_type", trade_type);
        packageParams.put("time_start", time_start);
        packageParams.put("time_expire", time_expire);
        if(!StringUtils.isEmpty(record.getOpenid())){
            packageParams.put("openid", record.getOpenid());
        }
        String sign = WXPayUtil.createSign("UTF-8", packageParams,key);
        packageParams.put("sign", sign);
       
        String requestXML = WXPayUtil.getRequestXml(packageParams);
        System.out.println("请求xml::::"+requestXML);
 
        String resXml = WXPayUtil.postData(WXPayConfig.PAY_API, requestXML);
        System.out.println("返回xml::::"+resXml);
        
        Map<String, String> map = null;
        try {
            map = WXPayUtil.doXMLParse(resXml);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        
        return map;
    }

他需要的工具包,自己去找,请求与返回的都是xml的,解析之后拿到code_url,返回到前台,其实是一个网址,前台

js这么整:$("#img").attr("src","qrcode?code_url="+result.data);二维码出来了,支付调回调函数,这个我会在支付宝的通知里面一块写

   /**
     * 生成二维码图片 不存储 直接以流的形式输出到页面
     * @param content
     * @param response
     */
    @SuppressWarnings({ "unchecked", "rawtypes" })
    public static void encodeQrcode(String content,HttpServletResponse response){
        if(content==null || "".equals(content))
            return;
       MultiFormatWriter multiFormatWriter = new MultiFormatWriter();
       Map hints = new HashMap();
       hints.put(EncodeHintType.CHARACTER_SET, "UTF-8"); //设置字符集编码类型
       BitMatrix bitMatrix = null;
       try {
           bitMatrix = multiFormatWriter.encode(content, BarcodeFormat.QR_CODE, 300, 300,hints);
           BufferedImage image = toBufferedImage(bitMatrix);
           //输出二维码图片流
           try {
               ImageIO.write(image, "png", response.getOutputStream());
           } catch (IOException e) {
               // TODO Auto-generated catch block
               e.printStackTrace();
           }
       } catch (WriterException e1) {
           // TODO Auto-generated catch block
           e1.printStackTrace();
       }         
    }

 

要在 Vue PC端生成微信二维码进行支付,你可以使用第三方库,如 `qrcode` 来生成二维码,并且使用微信支付的 API 来实现支付功能。 首先,你需要安装 `qrcode` 库。你可以使用 npm 命令进行安装: ``` npm install qrcode --save ``` 接下来,在你的 Vue 组件中,你可以使用以下代码生成二维码: ```javascript import QRCode from 'qrcode' export default { data() { return { qrcodeUrl: '' // 用于存储生成的二维码图片地址 } }, methods: { generateQRCode() { const el = this.$refs.qrcode const url = '这里是二维码的内容,可以是一个链接或其他字符串' QRCode.toDataURL(url, { errorCorrectionLevel: 'H', margin: 1 }) .then(dataUrl => { this.qrcodeUrl = dataUrl }) .catch(err => { console.error(err) }) } } } ``` 这里使用 `QRCode.toDataURL()` 方法生成二维码,并将生成的图片地址存储在 `qrcodeUrl` 变量中。你可以将 `qrcodeUrl` 绑定到一个 `img` 标签上来显示二维码图片。 接下来,你需要实现微信支付功能。你可以使用微信支付的 API 来完成支付流程,具体步骤如下: 1. 获取支付参数:你需要向服务器发送请求,获取支付所需的参数,包括订单号、金额、签名等。 2. 调起微信支付:调用 `wx.chooseWXPay()` 方法,将支付参数传递给微信支付接口进行支付。 ```javascript // 获取支付参数 axios.get('/api/getPayParams') .then(res => { const params = res.data // 调起微信支付 wx.chooseWXPay({ timestamp: params.timestamp, // 时间戳 nonceStr: params.nonceStr, // 随机字符串 package: params.package, // 包含预支付订单 ID 的字符串 signType: params.signType, // 签名类型 paySign: params.paySign, // 签名 success: res => { // 支付成功 console.log('支付成功', res) }, fail: err => { // 支付失败 console.error('支付失败', err) } }) }) .catch(err => { console.error(err) }) ``` 注意,以上代码中的 `wx.chooseWXPay()` 方法需要在微信公众号中使用,如果需要在 PC 端使用,可以使用模拟器或者其他工具进行测试。 希望这能帮助到你。如果你有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值