目录
移动端微信支付有以下好处:
-
方便快捷:用户只需要打开微信,扫码或输入商家提供的支付金额,即可完成支付。
-
安全可靠:微信支付采用高级加密技术,确保用户支付信息的安全性。
-
全天候服务:微信支付支持24小时不间断的支付服务,用户可以随时随地进行付款。
-
适用范围广:微信支付已经覆盖了众多消费场合,包括线上购物、线下实体店铺、公共交通等。
-
管理简单:商家可以通过微信支付后台管理系统轻松管理支付,包括查询交易记录、退款等操作。
总之,移动端微信支付方便快捷、安全可靠,是一种用户体验良好的支付方式
这是一个简单的Java + Vue实现移动端微信支付的例子:
1.前端实现
在Vue项目中添加一个支付页面,用户可选择支付金额,点击支付按钮后调用后端接口获取微信支付参数,并使用WeixinJSBridge调起微信支付。
<template>
<div>
<h2>支付页面</h2>
<div>
<label>支付金额:</label>
<select v-model="amount">
<option value="1">1元</option>
<option value="10">10元</option>
<option value="100">100元</option>
</select>
</div>
<br>
<div>
<button @click="pay">支付</button>
</div>
</div>
</template>
<script>
export default {
name: 'PayPage',
data() {
return {
amount: '1'
}
},
methods: {
// 调用后端接口获取微信支付参数
getPayParams() {
return this.$axios.get('/api/pay/params', {
params: {
amount: this.amount
}
})
},
// 调起微信支付
callWeixinPay(payParams) {
return new Promise((resolve, reject) => {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady(payParams);
}
function onBridgeReady(payParams) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": payParams.appId, // 公众号名称,由商户传入
"timeStamp": payParams.timestamp, // 时间戳,自1970年以来的秒数
"nonceStr": payParams.nonceStr, // 随机串
"package": payParams.package, // 微信规定格式的订单详情扩展字符串,固定值"prepay_id="加微信订单号
"signType": "MD5", // 微信签名方式:
"paySign": payParams.paySign // 微信支付签名
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
resolve();
} else {
reject(res.err_desc || "支付失败");
}
}
);
}
})
},
// 支付按钮点击事件
pay() {
// 调用后端接口获取微信支付参数
this.getPayParams().then((response) => {
// 调起微信支付
this.callWeixinPay(response.data).then(() => {
this.$router.push('/pay-success')
}).catch((error) => {
alert(error)
})
}).catch((error) => {
alert(error)
})
}
}
}
</script>
2.后端实现
在Spring Boot项目中添加一个支付接口,用户传递支付金额,后端使用微信官方提供的统一下单API生成预支付订单,返回给前端支付参数。
@RestController
@RequestMapping("/api/pay")
public class PaymentController {
@Autowired
private WxConfig wxConfig;
/**
* 获取微信支付参数
*/
@GetMapping("/params")
public ResultData<Map<String, String>> getPayParams(@RequestParam int amount) {
try {
String nonceStr = UUID.randomUUID().toString().replace("-", "");
String outTradeNo = UUID.randomUUID().toString().replace("-", "");
// 组装请求参数
Map<String, String> data = new HashMap<>();
data.put("appid", wxConfig.getAppId());
data.put("mch_id", wxConfig.getMchId());
data.put("nonce_str", nonceStr);
data.put("body", "测试支付");
data.put("out_trade_no", outTradeNo);
data.put("total_fee", String.valueOf(amount));
data.put("spbill_create_ip", "127.0.0.1");
data.put("notify_url", "http://localhost:8080/api/pay/notify");
data.put("trade_type", "APP");
// 签名
String sign = WxPayUtil.generateSignature(data, wxConfig.getMchKey());
data.put("sign", sign);
// 统一下单
String xml = WxPayUtil.mapToXml(data); // 将请求参数转换为XML格式
String responseXml = HttpUtil.post("https://api.mch.weixin.qq.com/pay/unifiedorder", xml); // 发送POST请求
Map<String, String> responseMap = WxPayUtil.xmlToMap(responseXml); // 转换为Map格式
// 组装支付参数
Map<String, String> payParams = new HashMap<>();
payParams.put("appId", wxConfig.getAppId());
payParams.put("timeStamp", String.valueOf(System.currentTimeMillis() / 1000));
payParams.put("nonceStr", UUID.randomUUID().toString().replace("-", ""));
payParams.put("package", "prepay_id=" + responseMap.get("prepay_id"));
payParams.put("signType", "MD5");
payParams.put("paySign", WxPayUtil.generateSignature(payParams, wxConfig.getMchKey()));
return ResultData.success(payParams);
} catch (Exception e) {
e.printStackTrace();
return ResultData.error(ResultCode.FAIL, "获取支付参数失败");
}
}
/**
* 支付结果通知接口
*/
@PostMapping("/notify")
public String payNotify(HttpServletRequest request) {
try {
String xml = HttpUtil.readData(request.getInputStream());
Map<String, String> data = WxPayUtil.xmlToMap(xml);
if (WxPayUtil.isSignatureValid(data, wxConfig.getMchKey())) {
if (data.get("return_code").equals("SUCCESS") && data.get("result_code").equals("SUCCESS")) {
// 支付成功,业务处理
// ...
// 返回通知结果
Map<String, String> resultMap = new HashMap<>();
resultMap.put("return_code", "SUCCESS");
resultMap.put("return_msg", "OK");
return WxPayUtil.mapToXml(resultMap);
}
}
} catch (Exception e) {
e.printStackTrace();
}
// 返回通知结果
Map<String, String> resultMap = new HashMap<>();
resultMap.put("return_code", "FAIL");
resultMap.put("return_msg", "ERROR");
return WxPayUtil.mapToXml(resultMap);
}
}
以上是一个简单的Java + Vue实现移动端微信支付的例子