微信H5支付(V3)

news/2024/11/19 9:29:32/

最近在做一个涉及支付的项目,其中对支付模块的内容涉及的比较多,记录一点心得。如果有错误,希望各位大佬斧正。

这个支付项目涉及H5端的微信支付、支付宝支付、建行支付、会员卡充值(现金)等四部分内容。我将在下面的几篇文章里分别介绍。

这篇文章我们先介绍微信支付。

微信支付现在已经是V3版本了,和之前的V2版本有很大的区别。我之前也做过V2版本的小程序支付。涉及到一些xml、签名等比较麻烦。V3版本感觉简化了很多。

关于测试环境

微信支付和支付宝相比,文档和测试环境都很差,排查错误很难。至于V3版本,我去微信支付的社区提问,得到的答复是根本就没有沙箱环境。这就超坑。

sdk和git上有一个postman的脚本,但是也仅仅是下载证书的,没有调测支付接口的。链接https://github.com/wechatpay-apiv3/wechatpay-apache-httpclient

总之就是没有测试环境。你只能先弄H5的支付申请,然后开通之后再进行开发。

关于开通H5支付

开通H5支付必须需要一个备案过的顶级域名(这东西要钱),可以在阿里云上买一个,备案一下,有过建站经验的小伙伴应该比较熟悉,我不太懂,让客户自己买的。

至于实际使用的是顶级域名下面的二级域名这个是无所谓的。例如备案的是www.baidu.com,实际部署和使用的是www.test.baidu.com。这都可以

还需要一个H5商品的介绍页。这里我是做了一个产品介绍页,并没有实际售卖的产品,类似于奔驰官网那种布局,上面导航栏,下面产品介绍(不知道啥时候能码出奔驰的钱)。

然后部署在二级域名下面,就可以了。

这里要着重说一下,你的域名下的官网或产品介绍页或商城必须能够打开,如果打不开就被申请驳回。

申请需要3-5个工作日,但是也不一定,我的一个工作日就通过了

下面就是微信商户平台的申请页面了

支付参数

开通之后你是不是准备码代码了,别着急,你还需要配置一下各种参数。

微信给了文档教程:https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_6_1.shtml

首先你需要申请一下证书,参考上面的文档就好了。

你需要以下参数

商户号

appid:如果没有需要申请一个公众号或者服务号,然后在商户平台绑定这个appid

证书序列号:申请API证书之后点API证书那一栏的查看证书,就能在弹出页里面看到序列号了

apiV3Key:需要你在API安全里设置

这样就ok了,准备写代码

支付下单

写代码之前你需要查阅文档

https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter2_6_2.shtml

文档里下单发起支付有两段代码,拼在一起就行了

这一段里面涉及一个privateKey,比较坑,你需要自己用代码把证书里面的privateKey解出来。或者从文件里读取出来

代码如下

 ClassPathResource resource = new ClassPathResource(WxPayConfig.mchSerialFileName);
         File file=resource.getFile();
         byte[] readBytes = FileUtil.readBytes(file);

这个mchSerialFileName 就是你申请的证书文件的.pem文件的路径

@Before
public void setup() throws IOException {// 加载商户私钥(privateKey:私钥字符串)PrivateKey merchantPrivateKey = PemUtil.loadPrivateKey(new ByteArrayInputStream(privateKey.getBytes("utf-8")));// 加载平台证书(mchId:商户号,mchSerialNo:商户证书序列号,apiV3Key:V3秘钥)AutoUpdateCertificatesVerifier verifier = new AutoUpdateCertificatesVerifier(new WechatPay2Credentials(mchId, new PrivateKeySigner(mchSerialNo, merchantPrivateKey)),apiV3Key.getBytes("utf-8"));// 初始化httpClienthttpClient = WechatPayHttpClientBuilder.create().withMerchant(mchId, mchSerialNo, merchantPrivateKey).withValidator(new WechatPay2Validator(verifier)).build();
}@After
public void after() throws IOException {httpClient.close();
}
public void CreateOrder() throws Exception{
//请求URL
HttpPost httpPost = new HttpPost("https://api.mch.weixin.qq.com/v3/pay/transactions/h5");// 请求body参数
String reqdata = "{"+ "\"amount\": {"+ "\"total\": 100,"+ "\"currency\": \"CNY\""+ "},"+ "\"scene_info\": {"+ "\"payer_client_ip\":\"14.23.150.211\","+ "\"h5_info\": {"+ "\"type\": \"IOS\"" + "}},"+ "\"mchid\": \"1900006891\","+ "\"description\": \"Image形象店-深圳腾大-QQ公仔\","+ "\"notify_url\": \"https://www.weixin.qq.com/wxpay/pay.php\","+ "\"out_trade_no\": \"1217752501201407033233388881\","+ "\"goods_tag\": \"WXG\","+ "\"appid\": \"wxdace645e0bc2c424\"" + "}";     
StringEntity entity = new StringEntity(reqdata);
entity.setContentType("application/json");
httpPost.setEntity(entity);
httpPost.setHeader("Accept", "application/json");//完成签名并执行请求
CloseableHttpResponse response = httpClient.execute(httpPost);
try {int statusCode = response.getStatusLine().getStatusCode();if (statusCode == 200) {System.out.println("success,return body = " + EntityUtils.toString(response.getEntity()));} else if (statusCode == 204) {System.out.println("success");} else {System.out.println("failed,resp code = " + statusCode+ ",return body = " + EntityUtils.toString(response.getEntity()));throw new IOException("request failed");}
} finally {response.close();
}
}

这样你就下单成功了。

接口会返回一个

 

{ "h5_url": "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2016121516420242444321ca0631331346&package=1405458241" }

的json,这个就是发起请求的链接了。

但是这个链接不能通过浏览器直接打开,会报下面的错误

所以你需要在app或者H5里面使用代码打开。

例如:先用ajax请求后台,后台下单返回链接,然后打开。至于网上说的通过response.sendRedirect的方法,反正我是没有成功。

 h5PayTest(){httpGet('/members/WxPayController/createOrder',{},res=>{// debugger//   alert(res.data)//  let data = JSON.parse(res.data)let data = res.data;alert(data.h5_url)location.href = data['h5_url']})}

这样你在安装了微信的手机上请求H5页面,然后发送请求打开链接就不会报错了。

然后就能完成支付了。

注意:

这里有几个坑

  1. 发送请求的参数一定要和文档一样,必填的填写好。否则下单会失败
  2. 你的请求必须是从添加的H5域名相同,否则下单链接可以获取,但是支付不能成功。有的小伙伴会问,我备案的域名试服务器的linux的,不能写代码,只能部署,总不能写一点部署一点,然后测试一点吧。其实只有申请的时候是需要备案的,申请通过之后,你可以在开发配置里面添加一个本地内网穿透的地址,例如花生壳或者netapp,亲测是可以配置上去的,然后穿透到你的eclipse 的server上, 然后不久可以开发了吗,上线了再把这个删掉。
  3. 参数的description字段中文会在请求显示的时候乱码,你可以转成utf8,这样写    StringEntity entity = new StringEntity(reqdata,Charset.forName("utf8"));

后面会涉及到notify和查询订单、对账单这些。我会在后面的过程中分享。

以及一些支付选择的策略模式我也会分享

我的代码和上面的优点出入,我是用springboot开发的,如果感兴趣我也可以再分享。

总之,这一步支付成功后,后面的功能都比较简单了。


http://www.ppmy.cn/news/161780.html

相关文章

微信支付之H5支付

先看下H5支付的官方描述吧: H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。 主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器…

微信H5支付概述

最近有项目接入微信H5支付,所以在这里大概总结下。 首先,需要微信公众号是服务认证号,然后申请开通微信H5支付【微信H5支付申请由原来的微信公众号平台迁移到商户平台,需要在商户平台申请开通】,开通后会收到邮件&…

web:H5和小程序的区别

web:H5和小程序的区别 H5和小程序的区别 H5和小程序不具备可比性,只是很多移动端的场景下,两种选择都能实现产品的大部分功能。最近几年,小程序的兴起,让人们理解他等同于H5,其实不然。 关于小程序与H5&…

微信公众号h5页面支付(MWEB)

/*** 官微-分期支付接口(h5页面支付)** param request* param response*/SuppressWarnings("unchecked")ResponseBodyRequestMapping(value "/wxWapPrePayH5", method RequestMethod.POST)public Map<String, Object> wxWapPrePayH5(HttpServletRe…

H5是什么?

自从从事于前端开发之后&#xff0c;总有朋友问我是做什么的&#xff0c;通俗的说&#xff0c;做H5的&#xff0c;然后闲时&#xff0c;坐车&#xff0c;吃饭&#xff0c;聚会&#xff0c;总会聊到工作&#xff0c;恩&#xff0c;h5&#xff0c;对方一脸懵逼的时候&#xff0c;…

H5微信公众号开发,微信支付

&#xff08;如需完整代码,开发遇到什么问题&#xff0c;可与本人联系&#xff0c;代码给大家下载并帮你解决问题&#xff0c;微信号&#xff1a;1131237188&#xff09; 1.公众号开发&#xff0c;首先需要微信公众号的appId,secret 相当于账号密码 2.到公众号后台配置域名&a…

H5的基础

网页的学名称作 HTML 文件&#xff0c;是一种可以在 www 网上传输&#xff0c;并被浏览器认识和翻译成页面显示出来的文件。 HTML是&#xff1a; Hypertext Marked Language 即超文本标记语言&#xff0c;是一种用来制作超文本文档的简单标记语言 超文本就是指页面内可以包含…

微信H5支付功能开发

本文介绍的是微信H5支付功能开发&#xff0c;也就是在微信之外的H5页面支付。 首先我们需要先看微信的官方文档https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter15_1&#xff0c;这里面几乎介绍了全部流程了。等你了解大概流程之后&#xff0c;需要在微信公众平台和微…