1、申请
需要准备的材料
- 认证的服务号，300块一年认证费用
- 营业执照
- 公司对公银行账号
1、先申请服务号
2、通过后，申请微信支付
微信支付不同行业需要收手续费，一般0.6%
2、配置
之前没有接触过，看官网文档调用的图也是一脸懵，只知道有个预下单的操作获取prepay_id，用户支付完成之后，有微信回调的操作。
公众号和商户平台需要配置项
- 支付需要获取用户的openid，因此在公众号设置-功能设置-网页授权域名中加入域名
加入域名时，需要将下载的文件放到项目中，使填写的域名能访问到。我是放到了静态资源中，没有写其他目录，直接使用域名就可访问。
- 商户平台中公众号支付需要配置域名,产品中心-开发配置-支付配置
- 商户平台中需要设置API密钥和API证书，因为是第一次设置，所以需要按照提示操作，若已经有了密钥和证书，那就不要设置了。
3、开发
流程：
用户--->>打开页面确认授权获取CODE--->>跳转到订单页面--->>点击支付--->>将CODE发送到后台获取openid,拼装商品参数，调用微信预下单，获取到prepay_id,并将prepay_id发送到前端--->>获取prepay_id拉起支付界面，输入密码--->>支付成功，微信回调接口，并通知微信交易成功，停止微信回调。
后台配置
- 1、需要将商户平台配置的证书文件和公众号设置的授权文件，放到项目中
- 2、配置公众号相关信息
后台代码
关键后台代码
@Autowired
private BestPayServiceImpl bestPayService;
private static final String get_openid="https://api.weixin.qq.com/sns/oauth2/access_token?appid=%s&secret=%s&code=%s&grant_type=authorization_code";
@Autowired
private WechatAccountConfig accountConfig;
/**
* 授权获取CODE
* @return
*/
@GetMapping(value = "/pay")
public ModelAndView pay() {
return new ModelAndView("authon.html");
}
/**
* 发起支付
* 通过code, 获取openid,
*/
@GetMapping(value = "/goodspay")
public ModelAndView goodspay(@RequestParam("code") String code,String money,
Map<String, Object> map) {
String uri=String.format(get_openid,accountConfig.getMpAppId(),accountConfig.getSecret(),code);
log.info("【获取openid】request={}", uri);
String json=HttpUtil.get(uri);
log.info("【获取openid】request={}", json);
JSONObject jsonobj=JSONObject.parseObject(json);
log.info("openid={}",jsonobj.get("openid"));
String openid= (String) jsonobj.get("openid");
return pay(openid,money,map);
}
/**
* 发起支付
*/
public ModelAndView pay(String openid,String money,
Map<String, Object> map) {
PayRequest request = new PayRequest();
Random random = new Random();
//支付请求参数
request.setPayTypeEnum(BestPayTypeEnum.WXPAY_H5);
request.setOrderId(String.valueOf(random.nextInt(1000000000)));
if(StringUtils.isNotEmpty(money)){
request.setOrderAmount(new Double(money));
}else{
request.setOrderAmount(0.01);
}
request.setOrderName("支付测试");
request.setOpenid(openid);
log.info("【发起支付】request={}", JsonUtil.toJson(request));
PayResponse payResponse = bestPayService.pay(request);
log.info("【发起支付】response={}", JsonUtil.toJson(payResponse));
map.put("payResponse", payResponse);
return new ModelAndView("pay/create", map);
}
/**
* 异步回调
*/
@PostMapping(value = "/notify")
public ModelAndView notify(@RequestBody String notifyData) throws Exception {
log.info("【异步回调】request={}", notifyData);
PayResponse response = bestPayService.asyncNotify(notifyData);
log.info("【异步回调】response={}", JsonUtil.toJson(response));
return new ModelAndView("pay/success");
}
前端代码
获取用户授权页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>授权跳转中....</title>
</head>
<script>
var appid = "wxdaa292459af12ea1";
var redirect_uri = encodeURIComponent("http://ixq66a.natappfree.cc/goods.html");
window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect"
</script>
<body>
</body>
</html>
点击支付页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转账</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
</head>
<body>
<form action="/goodspay" method="get">
<input value="" id="code1" name="code" hidden/>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 20%;margin-bottom: -30%;">
<legend style="font-size: 50px;">下单支付0.01元</legend>
<div style="margin-top: 70px;margin-left: 20px;margin-right: 20px;margin-bottom: 30px;">
<button class="layui-btn layui-btn-primary" style="width: 100%;height: auto;background-color: #36e0d2;
font-size: 100px;">微信支付</button>
</div>
</fieldset>
</form>
<form action="/goodspay" method="get" style="padding-top: 15%;">
<input value="" id="code2" name="code" hidden/>
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 30%;margin-bottom: -30%;">
<legend style="font-size: 50px;">输入金额下单支付</legend>
<input value="" id="money" name="money" style="width: 50%;height: 100px;font-size: 100px;" placeholder="输入金额"/>
<div style="margin-top: 70px;margin-left: 20px;margin-right: 20px;margin-bottom: 30px;">
<button class="layui-btn layui-btn-primary" style="width: 100%;height: auto;background-color: #36e0d2;
font-size: 100px;">微信支付</button>
</div>
</fieldset>
</form>
<script>
//转码
function parse_url(url) { //定义函数
var pattern = /(\w+)=(\w+)/ig; //定义正则表达式
var parames = {}; //定义数组
url.replace(pattern, function (a, b, c) {
parames[b] = c;
});
return parames; //返回这个数组.
}
//获取当前url 取到code
var url = window.location.href;
var params = parse_url(url);
$("#code1").val(params.code);
$("#code2").val(params.code);
</script>
</body>
</html>
拉起支付页面
<script>
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":"${payResponse.appId}", //公众号名称，由商户传入
"timeStamp":"${payResponse.timeStamp}", //时间戳，自1970年以来的秒数
"nonceStr":"${payResponse.nonceStr}", //随机串
"package":"${payResponse.packAge}",
"signType":"MD5", //微信签名方式：
"paySign":"${payResponse.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 if(res.err_msg == "get_brand_wcpay_request:fail") {
alert('支付失败');
}else {
alert('未知异常');
}
WeixinJSBridge.call('closeWindow');
}
);
}
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();
}
</script>
GIT地址
因项目是建立在别人项目基础上更改的，所以保留了原作者。 github.com/litblank/Wx…
