springBoot微信支付（native）基本使用

不做太多判断什么的，就是单纯支付，剩下的自己完善，更开始学的时候我还是喜欢这样，不容易和其他知识弄混

pom.xml

     <!-- wxpay的依赖 -->
        <dependency>
            <groupId>com.github.wxpay</groupId>
            <artifactId>wxpay-sdk</artifactId>
            <version>0.0.3</version>
        </dependency>

1，创建一类，实现WxPayConfig接口
2，重写三分方法，分别设置商户AppID\商户ID\商户密钥

package com.qfedu.config;

import com.github.wxpay.sdk.WXPayConfig;
import org.springframework.stereotype.Component;

import java.io.InputStream;

//在这个配置类中填写商户信息
@Component
public class MyWxPayConfig implements WXPayConfig {

    @Override
    public String getAppID() {
        return "wx632c8f11111111111111111211f8122c6";
    }

    @Override
    public String getMchID() {
        return "12222222222222222222";
    }

    @Override
    public String getKey() {
        return "sb33333333333333333GxFnC";
    }

    @Override
    public InputStream getCertStream() {
        return null;
    }

    @Override
    public int getHttpConnectTimeoutMs() {
        return 0;
    }

    @Override
    public int getHttpReadTimeoutMs() {
        return 0;
    }
}

2.5.2.3、修改订单添加接口

这里按照微信支付规范需要做如下工作：

设置申请支付交易的参数
申请支付链接

package com.mall.controller;


import com.github.wxpay.sdk.WXPay;
import com.mall.beans.RespBean;
import com.mall.config.WxPayConfig;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.Map;

/**
 * <p>
 * 订单  前端控制器
 * </p>
 *
 * @author wei
 * @since 2021-11-07
 */
@Api(tags = "订单接口")
@RestController
@CrossOrigin
@RequestMapping("/orders")
public class OrdersController {
    @Autowired
    private WxPayConfig wxPayConfig;

    @ApiOperation("微信支付")
    @PostMapping("/pay")
    public RespBean add() throws Exception {
        //微信支付
        //设置申请支付交易的参数
        HashMap<String, String> data = new HashMap<>();
        data.put("out_trade_no", "123gduiaa"); //交易号，使用订单编号作为支付交易的交易号
        data.put("body", "百年孤独"); //body 支付交易的订单描述
        data.put("total_fee", "1"); //total_fee 支付金额 分
        data.put("fee_type", "CNY"); //fee_type 支持币种 CNY 人民币
        data.put("trade_type", "NATIVE"); //trade_type 交易类型
        data.put("notify_url", "http://zrx.free.svipss.top/wxpay/callback"); //notify_url 支付成功之后支付平台通知地址（回调接口）

        //申请支付链接
        WXPay wxPay = new WXPay(wxPayConfig);
        Map<String, String> resp = wxPay.unifiedOrder(data);
        String payUrl = resp.get("code_url");
        System.out.println(resp);
        // 返回很多数据，最重要的就是code_url，打开连接，就是支付码
        //{nonce_str=jEZ8aIzvGT46sUlA,
        // code_url=weixin://wxpay/bizpayurl?pr=9geXpbYzz,

        return new RespBean(200, "success", payUrl);

    }
}

复制这个连接，随便去到二维码生成器，打开微信扫一扫即可完成支付
在这里插入图片描述

前端使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h3>订单支付页面</h3>

    <hr/>
    <div style="width: 200px; height: 200px; border: 1px lightgray solid; border-radius: 5px; padding: 10px;">
        <div id="payQrcodeDiv" style="width: 200px; height: 200px; background: aqua;">{{tips}}</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.js"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            payUrl: 'weixin://wxpay/bizpayurl?pr=sC2QNfuzz',
            tips: '',
            count: 3
        },

        mounted() {
            let qrCode = new QRCode(document.getElementById('payQrcodeDiv'), {
                width: 200,
                height: 200
            })
            qrCode.makeCode(this.payUrl)
        }
    })
</script>
</body>
</html>