以下是一个简单的示例
代码，演示如何使用
Vue和Spring Boot
实现微信支付：
前端
Vue代码：
```
vue
<template>
<div>
<button @click="pay">
微信支付</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
pay() {
axios.post('/api/wechat/pay').then(response => {
const data = response.data
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
'appId': data.appId, //
公众号名称，由商户传入
'timeStamp': data.timeStamp, //时间戳，自1970年以来的秒数
'nonceStr': data.nonceStr, //随机串
'package': data.packageValue,
'signType': data.signType, //微信签名方式：
'paySign': data.paySign //微信签名
},
function (res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
alert('支付成功')
} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
alert('取消支付')
} else {
alert('支付失败')
}
}
)
})
}
}
}
</script>
```
后端Spring Boot
代码：
```java
@RestController
@RequestMapping("/api/wechat")
public class WechatController {
@Autowired
private WechatPayService wechatPayService;
@PostMapping("/pay")
public Map<String, String> pay() throws Exception {
return wechatPayService.unifiedOrder();
}
}
@Service
public class WechatPayServiceImpl implements WechatPayService {
@Autowired
private WechatPayConfig wechatPayConfig;
@Override
public Map<String, String> unifiedOrder() throws Exception {
//生成
微信支付参数
Map<String, String> parameters = new HashMap<>();
parameters.put("appid", wechatPayConfig.getAppId());
parameters.put("mch_id", wechatPayConfig.getMchId());
parameters.put("nonce_str", UUID.randomUUID().toString().replace("-", ""));
parameters.put("body", "测试商品");
parameters.put("out_trade_no", UUID.randomUUID().toString().replace("-", ""));
parameters.put("total_fee", "1");
parameters.put("spbill_create_ip", "127.0.0.1");
parameters.put("notify_url", wechatPayConfig.getNotifyUrl());
parameters.put("trade_type", "JSAPI");
parameters.put("openid", "openid");
String sign = WechatPayUtil.generateSignature(parameters, wechatPayConfig.getKey());
parameters.put("sign", sign);
//调用
微信支付统一下单API
String xml = WechatPayUtil.mapToXml(parameters);
String result = HttpUtil.post(wechatPayConfig.getUnifiedOrderUrl(), xml);
Map<String, String> resultMap = WechatPayUtil.xmlToMap(result);
//生成前端需要的支付参数
Map<String, String> payParameters = new HashMap<>();
payParameters.put("appId", wechatPayConfig.getAppId());
payParameters.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
payParameters.put("nonceStr", UUID.randomUUID().toString().replace("-", ""));
payParameters.put("packageValue", "prepay_id=" + resultMap.get("prepay_id"));
payParameters.put("signType", "MD5");
String paySign = WechatPayUtil.generateSignature(payParameters, wechatPayConfig.getKey());
payParameters.put("paySign", paySign);
return payParameters;
}
}
@Configuration
@ConfigurationProperties(prefix = "wechat.pay")
public class WechatPayConfig {
private String appId; //公众账号ID
private String mchId; //商户号
private String key; //商户密钥
private String unifiedOrderUrl; //统一下单地址
private String notifyUrl; //支付结果通知地址
//省略getter和setter方法
}
```
以上
代码示例中，前端
Vue代码中使用axios发送POST请求到后端的`/api/wechat/pay`接口，后端Spring Boot
代码中生成
微信支付参数，调用
微信支付统一下单API，然后将生成的前端需要的支付参数返回给前端。前端再将支付参数传给微信客户端进行支付。
最低0.47元/天 解锁文章
487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
