微信公众号H5支付（二）

最新推荐文章于 2023-03-25 20:52:11 发布
最新推荐文章于 2023-03-25 20:52:11 发布
阅读量495 收藏 1
点赞数
分类专栏： 代码分享 学习新的知识 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44795226/article/details/103549659
版权

微信公众号H5支付（一）

H5支付需要的东西都准备好后，就可以开始写了

服务端

因为访问微信统一下单链接的数据格式必须是xml，示例：

<xml>
<appid>wx2421b1c4370ec43b</appid>
<attach>支付测试</attach>
<body>H5支付测试</body>
<mch_id>10000100</mch_id>
<nonce_str>1add1a30ac87aa2db72f57a2375d8fec</nonce_str>
<notify_url>http://wxpay.wxutil.com/pub_v2/pay/notify.v2.php</notify_url>
<openid>oUpF8uMuAJO_M2pxb1Q9zNjWeS6o</openid>
<out_trade_no>1415659990</out_trade_no>
<spbill_create_ip>14.23.150.211</spbill_create_ip>
<total_fee>1</total_fee>
<trade_type>MWEB</trade_type>
<scene_info>{"h5_info": {"type":"IOS","app_name": "王者荣耀","package_name": "com.tencent.tmgp.sgame"}}</scene_info>
<sign>0CB01533B8C1EF103065174F50BCA001</sign>
</xml>

我们可以直接通过拼接字符串的方式来生成xml格式的数据，但我觉得那样太麻烦了，还有就是可以将11个参数都封装成一个对象，再将对象传换成xml格式。

首先将微信统一下单需要用到的11个参数，都封装到Map集合

// 必填字段
 Map<String, String> data = new HashMap<>(11);
 String money = String.valueOf(price * 100);

 String wx_appid = appIdDict.getValue();
 String h5MchId = h5MchIdDict.getValue();
 data.put("appid",wx_appid);  // 公众号ID
 data.put("mch_id",h5MchId);  //商户号ID
 data.put("total_fee",money); //金额，单位是分
 data.put("spbill_create_ip",clientIp); //客户端IP地址
 data.put("trade_type","MWEB");		// H5固定类型
 data.put("nonce_str", WXPayUtil.generateNonceStr());  //随机字符串
 data.put("out_trade_no",outTradeNo);  //订单号
 data.put("body","测试支付");  // 商品描述

 // 回调地址，必须是外网可直接访问的地址
 String notifyUrl = "http://www.xxxx.com/h5CallBackTest/dealRequestResultTest";
 data.put("notify_url",notifyUrl);


 String scene_info = "{\"h5_info\": {\"type\":\"Wap\",\"wap_url\": \"https://www.xxxx.com\",\"wap_name\": \"收银台\"}}";
 data.put("scene_info",scene_info);
 // API密钥
 String apiKey = h5ApiKeyDict.getValue();

 // 生成h5支付签名
 String sign = WXPayUtil.generateSignature(data,apiKey);
 data.put("sign",sign);
 // 通过微信支付工具类将MAP集合转成xml格式
 String requestXML = WXPayUtil.mapToXml(data);

然后就是调用微信H5统一下单接口了，通过httpClient，传地址，还有参数。（关于httpClient又是另一门学问，我了解的也不是很深，只知道是这样用的）

// 微信统一下单链接地址
String unifiedorder_url  = "https://api.mch.weixin.qq.com/pay/unifiedorder";
// 微信会返回xml格式的字符串
 String xmlStr = HttpClientUtil.loadJsonHTTS(unifiedorder_url,requestXML,"text/xml");

微信会返回xml格式的字符串

错误信息，比如参数没有填写正确，公众号没有配置等等问题
<xml>
<return_code><![CDATA[FAIL]]></return_code>
<return_msg><![CDATA[商户号该产品权限预开通中，请等待产品开通后重试]]></return_msg>
</xml>


正确信息，说明填写的参数基本没什么问题
<xml>
<return_code><![CDATA[SUCCESS]]></return_code>
<return_msg><![CDATA[OK]]></return_msg>
<![CDATA[wx2421b1c4370ec43b]]>
<mch_id><![CDATA[10000100]]></mch_id>
<nonce_str><![CDATA[IITRi8Iabbblz1Jc]]></nonce_str>
<![CDATA[7921E432F65EB8ED0CE9755F0E86D72F]]>
<result_code><![CDATA[SUCCESS]]></result_code>
<prepay_id><![CDATA[wx201411101639507cbf6ffd8b0779950874]]></prepay_id>
<trade_type><![CDATA[MWEB]]></trade_type>
<mweb_url><![CDATA[https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2016121516420242444321ca0631331346&package=1405458241]]></mweb_url>
</xml>

然后，如果是正确信息，就会包含mweb_url字段的参数，这个字段就是用来跳转到微信，进行支付的。那要怎么跳转呢，那就要拿到这个字段的字符串。

// 将xml字符串转成map
Map<String, String> map = WXPayUtil.xmlToMap(xmlStr);
String returnCode = map.get("return_code");
String returnMsg = map.get("return_msg");

String mweb_url = "";//跳转链接
if ("SUCCESS".equals(returnCode)) {
    mweb_url = map.get("mweb_url");
}
return mweb_url; // 返回前端跳转 或者 可以redirect重定向

前端JS直接跳转

window.location.href=mweb_url;

这样就拿到了mweb_url地址，然后重定向也好，返回前端跳转也好，就可以到微信付钱了，而付完钱之后，如果还想回到你指定的页面，还可以在mweb_url后面拼接上你想跳转页面的链接地址。
注意：地址必须是外网可以访问的地址，而且域名要跟公众号申请H5支付时提交的域名一致，还有地址需要进行urlencode处理

// 支付完返回浏览器跳转的地址，如跳到查看订单页面
String redirect_url = "http://www.xxxxxx.com/h5pay/placeAnOrder";
String redirect_urlEncode =  URLEncoder.encode(redirect_url,"utf-8");//对上面地址urlencode
mweb_url = mweb_url + "&redirect_url=" + redirect_urlEncode;//拼接返回地址

搞定。

朕不需要昵称
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信h5支付和微信公众号支付demo 下载
10-30
微信外浏览器h5支付，微信公众号支付，别人已经封装好的jar还不错，经过测试可以使用，需要注意的地方看我博客
Asp微信支付系统接口代码下载 修复版+微信扫码支付+H5支付+微信公众号支付+微信红包支付+微信刷卡支付等等
10-11
SP 扫码支付是用的最普遍的一种接口，所有 ASP 的网站都可以整合使用，微信扫码支付结果会实时在微信中回调显示，同时实现支付下单结果返回，并入库自动更新订单操作。 微信公众号支付是基于微信公众号而开发的支付接口，在已有的公众号里可以添加 ASP 的公众号支付，微信中生成订单后，直接调出微信钱包支付，非常方便，同样支持自动更新订单状态。 H5 支付是手机浏览器使用的接口，常用于手机版网站，通过手机浏览器点击链接自动唤醒微信并支付；刷卡支付则适用于商场类的 POS 机操作，一般网站上不需要。 asp微信支付接口代码纯 ASP 代码，完全开源，代码易于整合，只需要简单几步即可整合在各类网站，微信支
关于'//<![cdata['和 '//]]>'解答
luguo0816的专栏
01-29 1万+
// code... //]]> '//'为了兼容支持xml文档和不支持xml(即只支持html文档)文档的浏览器而设计的。 在支持xml文档中虽然用'//'注释掉代码但xml文档中仍可识别出属于xml的代码，所以代码中有大于'>'小于' 而不支持xml文档中，这些大于小于号就不是特殊字符了，由于是xml代码所以不注释掉就会发生错误。 所以上述设计达到了兼容支持xml文
微信支付遇到 商户号该产品权限未开通，请前往商户平台>产品中心检查后重试
热门推荐
fannie_yang
01-16 2万+
本人开发过程中遇到过，商户号填错了 需要商户号与appId还有key一致 参考博客：https://blog.csdn.net/u010071211/article/details/85620630
微信H5支付过程中遇到的问题总结
闻赤松之清尘，愿承风乎遗则的博客
09-18 1530
微信H5支付过程中遇到的问题 微信H5支付是商家在微信外网页上提供的微信支付功能，用户在浏览器网页上确定微信支付，最终可以从微信外的浏览器网页上唤起微信，实现微信支付。 此处贴一个微信官方的H5开发文档链接:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 不得不吐槽的是，官方的开发文档真的是有一点点一言难尽 微信开发文档后端部分...
微信APP支付回调
weixin_42087001的博客
11-23 2066
微信APP支付回调 1.回调地址，调起支付时需上传微信端 2.支付完成 3.微信端发回通知 4.使用postman模拟请求 二。后台接受 InputStream inStream = request.getInputStream(); ByteArrayOutputStream outSteam = new ByteArrayOutputStream(); byte[] buff...
微信支付之h5方式(非微信内置浏览器中支付)
weixin_30448685的博客
10-01 698
这两天完成了公司网站手机和PC端的支付对接，就是支付宝和微信． 对接完后有所感触，我们来聊一聊，微信支付的坑，为什么这么说呢，因为我在对接完支付宝后是很愉快的，基本上在demo上稍加修改就ok了， 对于支付宝我觉得基本上都没什么可以说的，而微信支付．．． 网上搜了一下，基本上没有看到有针对h5支付的成功教程，全都是复制粘贴官方文档，有意思吗． 恰好今天空了，来聊一聊微信支付的坑，当然本文也...
商户号该产品权限未开通，请前往商户平台，产品中心检查后重试
weixin_42260311的博客
02-21 2万+
刚开通的商户号，用于微信公众号的支付。 确认了商户号和自定义的商户秘钥正确，但是依然无法调起微信支付   微信自定义秘钥位置：账户中心 -&gt; API安全   如果你除了这两个信息，还确认了支付授权目录是正确的还是无法调起来微信支付的话 支付授权目录路径：产品中心 - &gt; 开发配置   那你可以再看一下我的产品这一块 我的产品：产品中心 - &gt; 我的产品 ...
微信公众号 H5 通联支付
LQS000的博客
03-25 599
参考：https://blog.csdn.net/caimingxian401/article/details/96993205。1、使用 from 表单，提交数据至通联。3、赋值数据 并 提交。
微信公众号H5支付的两种方式
bamboozjy的博客
06-28 5021
前端调起微信H5支付的两种方式
微信公众号H5页面支付JSAPI
munchmills的博客
09-05 719
微信公众号H5页面支付JSAPI
uni-app微信公众号H5支付页面
freedom
07-27 1884
准备工作 初始化公众平台测试账号系统。 地址： https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 登录后，会得到一个微信号，和测试好的相关信息。appID,appsecret。 添加授权域名》外网可访问域名或ip 创建H5项目 H5 页面集成 JSSDK 集成文档推荐使用NPM，快捷、省心 基础逻辑代码，openId为上页面传值，不在采用静默方式获取，忽略getCode()方法 <template> <vie
uni.app 微信公众号H5支付
最新发布
07-13
在 uni.app 中使用微信公众号 H5 支付，你可以按照以下步骤进行操作： 1. 首先，确保你已经配置好了微信公众号支付功能，并且已经获取到了支付的相关参数，例如订单号、支付金额等。 2. 在 uni-app 中，可以使用 `uni.request` 或其他网络请求库来发起支付请求。你需要向微信支付接口发送一个 POST 请求，包含支付相关的参数。 例如： ```javascript uni.request({ url: 'https://api.mch.weixin.qq.com/pay/unifiedorder', // 微信支付接口地址 method: 'POST', data: { // 支付参数，例如 appid、mch_id、nonce_str、body、out_trade_no、total_fee 等 }, success: (res) => { // 请求成功的回调函数 // 解析返回的数据，获取预支付交易会话标识 prepay_id const prepayId = res.data.prepay_id; // 调用 H5 支付接口进行支付 uni.requestPayment({ provider: 'wxpay', timeStamp: '', // 时间戳 nonceStr: '', // 随机字符串 package: '', // 统一下单接口返回的 prepay_id 参数值 signType: 'MD5', paySign: '', // 签名 success: (res) => { // 支付成功的回调函数 console.log(res); }, fail: (err) => { // 支付失败的回调函数 console.log(err); } }); }, fail: (err) => { // 请求失败的回调函数 console.log(err); } }); ``` 在上述代码中，你需要根据实际情况填写支付接口地址、支付参数、预支付交易会话标识 prepay_id 以及支付的回调函数。 3. 当用户点击支付按钮后，会触发支付请求，用户将会跳转到微信支付页面完成支付操作。 请注意，以上代码仅为示例，实际使用时需要根据 uni-app 中的具体语法和微信支付接口的要求进行相应的调整和处理。同时，确保在后端服务器中进行订单处理和验证，以确保支付的安全和准确性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值