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>
