专注微信公众号营销活动运营开发,专业的微信营销平台!
微信H5支付完整源码
H5支付是一种在微信客户端外的移动端网页展示商品或服务，并在用户确认使用微信支付后将用户引导至微信客户端进行支付的支付方式。H5支付主要用于移动端触屏版的手机浏览器请求微信支付的场景。本文将为大家介绍微信H5支付的完整源码。
一、开通H5支付
要使用微信H5支付，首先需要开通微信商户。开通微信商户需要提供营业执照类型为企业的执照，个体户只能开微信商户、小程序。入驻成为商户时需在线提交营业执照、身份证、银行账户等基本信息，并等待审核通过。
通过审核后，登录【商户平台】，在【产品中心->产品大全->我的产品->H5支付】可以查看H5支付的开通状态。点击申请开通页面会来到微信支付H5支付的申请开通界面。
二、申请资料准备
1、支付域名：在申请H5支付时，需要填写一个支付域名。这个支付域名也可以称为回调URL，当用户确认支付后，微信支付会将支付结果返回给该URL。支付域名需要进行ICP备案或者授权给需要开通微信支付H5支付的企业或个人。在填写支付域名时，需要提供一个域名授权书。
2、售卖产品/使用场景：需要填写一个需要开通微信支付H5支付的企业营业范围。如果是个人，就需要提供个人从事的范围。此处填写的售卖产品/使用场景应与实际情况匹配。
3、补充材料：在最后的补充材料中，需要提供一份域名证书和域名授权书。这些材料需要上传至微信商户平台进行审核。
三、完整源码实现
1、在HTML文件中添加以下代码段，实现调用微信支付的功能：
```
function pay() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId": "${appId}",
"timeStamp": "${timeStamp}",
"nonceStr": "${nonceStr}",
"package": "${package}",
"signType": "${signType}",
"paySign": "${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("支付失败");
}
}
);
}
```
2、在JS文件中添加以下代码段，获取支付参数并调用支付接口：
```
function getPayParam() {
$.ajax({
type: 'post',
url: '/getPayParam',
dataType: 'json',
success: function (data) {
if (data.success) {
var payParam = data.data;
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(payParam);
}
} else {
alert(data.errorMsg);
}
},
error: function () {
alert('获取支付参数失败，请稍后再试！');
}
});
}
function onBridgeReady(payParam) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
"appId": payParam.appid, //公众号名称，由商户传入
"timeStamp": payParam.timeStamp, //时间戳，自1970年以来的秒数
"nonceStr": payParam.nonceStr, //随机串
"package": payParam.package,
"signType": payParam.signType, //微信签名方式：
"paySign": payParam.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("支付失败");
}
}
);
}
```
3、在Controller文件中添加以下代码段，获取支付参数：
```
@RequestMapping(value = "/getPayParam", method = RequestMethod.POST)
@ResponseBody
public JSONObject getPayParam(HttpServletRequest request) {
JSONObject result = new JSONObject();
try{
String openId = (String)request.getSession().getAttribute("openId");
String spbillCreateIp = IpUtils.getRemoteIp(request);
result = weixinPaymentService.getPayParam(openId, spbillCreateIp);
}catch(Exception e){
result.put("success", false);
result.put("errorMsg", "获取支付参数失败：" + e.getMessage());
}
return result;
}
```
四、总结
本文介绍了微信H5支付的开通流程以及实现完整源码，希望能对大家有所帮助。在实现H5支付时，需要注意支付域名的备案以及申请H5支付的资料准备。在代码实现方面，需要注意调用微信支付接口的参数获取和支付参数的调用。实现H5支付是现代商业不可或缺的要素之一，希望读者可以通过本文的介绍，更好的使用微信H5支付。
添加客服微信
