https://pay.wechatpay.cn/wiki/doc/apiv3/assets/img/pay/wechatpay/6_2.png
微信支付时序图
必要且重要流程:生成微信支付二维码的code_url,转为二维码图片,根据微信支付订单号或者商家订单号查询支付状态。
前端项目与后端项目交互需要跨域,推荐后端进行跨域,不能两端均跨域。
1.生成微信支付二维码的code_url
申请api的前提:商家经营许可证
jar包:
<!--wx支付需要的依赖--> <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version> </dependency> <!--java端发送请求--> <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId>httpclient</artifactId> <version> 4.5.3</version> </dependency>
参数说明(从上到下):
字面意思
字面意思
随机字符串
常为商品信息
订单号
支付金额
请求的来源地址,即网页地址,本地为127.0.0.1,用户的客户端IP(唤起微信支付的客户端IP)
通知地址,后端查询订单状态的地址,网页回调URL:该链接是通过基础下单接口中的请求参数“notify_url”来设置的,要求必须为https地址。 请确保回调URL是外部可正常访问的,且不能携带后缀参数,否则可能导致商户无 …
交易的币种,本地币种native
商品订单号
public String wxpay(){
try {
HttpClient httpClient = new HttpClient("https://api.mch.weixin.qq.com/pay/unifiedorder");
httpClient.setHttps(true);
Map<String, String> map = new HashMap<>();
map.put("appid", "自己的appid");
map.put("mch_id", "自己的mch_id");
map.put("nonce_str", WXPayUtil.generateNonceStr());
map.put("body", "Ipad mini 16G 白色");
//偷懒,生成随机订单号
map.put("out_trade_no", WXPayUtil.generateNonceStr());
map.put("total_fee", "1");
map.put("spbill_create_ip", "127.0.0.1");
map.put("notify_url", "http://localhost:8080/wxpay/back");
map.put("trade_type", "NATIVE");
map.put("product_id", "123456789");
httpClient.setXmlParam(WXPayUtil.generateSignedXml(map, "自己的支付key"));
httpClient.post();
String xml = httpClient.getContent();
Map<String, String> resultMap = WXPayUtil.xmlToMap(xml);
if ("SUCCESS".equals(resultMap.get("return_code"))) {
return resultMap.get("code_url");
} else {
return resultMap.get("return_msg");
}
} catch (Exception e) {
e.printStackTrace();
}
return "";
}
2.转为二维码图片
以vue前端为例,npm安装vue-qr组件,即npm install vue-qr -g (-g表示作为全局组件安装)。:text绑定一个数据,将链接字符串转为二维码图片
<template>
<!--定寛图片显示区域-->
<div style="width: 200px; height: 200px; border: 1px solid #000; margin: 0 auto; text-align: center; line-height: 200px;">
<vue-qr :text="text" :size="200"
:margin="10" ></vue-qr>
</div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
name: "app",
methods: {},
data(){
return {
text: '自己的code_url'
}
},
components: {
vueQr
}
}
</script>
<style>
</style>
3.根据微信支付订单号或者商家订单号查询支付状态
public String back(String xml){
//根据订单号查找订单状态,如果订单状态是已支付,则调用微信的支付成功接口,通知微信支付成功
//如果订单状态是未支付,则调用微信的支付失败接口,通知微信支付失败
//调用微信的支付成功接接口
try {
Map<String, String> map = new HashMap<>();
HttpClient httpClient = new HttpClient("https://api.mch.weixin.qq.com/pay/orderquery");
map.put("appid", "自己的appid");
map.put("mch_id", "自己的");
map.put("out_trade_no", "商家订单号");
map.put("nonce_str", WXPayUtil.generateNonceStr());
httpClient.setHttps(true);
httpClient.setXmlParam(WXPayUtil.generateSignedXml(map, "支付key"));
httpClient.post();
String xml1 = httpClient.getContent();
Map<String, String> resultMap = WXPayUtil.xmlToMap(xml1);
if ("SUCCESS".equals(resultMap.get("trade_state"))) {
//调用微信的支付成功接口
return "success";
}
} catch (Exception e) {
e.printStackTrace();
}
return "fail";
}