H5版如何在微信外(非微信浏览器)进行微信支付技术方案

时间:2017-04-22 15:37:37   收藏:0   阅读:25447

官方是支持在非微信内置浏览器中调起微信支付的!
H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求。同时,由于H5链接传播十分方便、来源不易追踪,商户需要特别注意做好防钓鱼、防刷单的处理,控制风险。

流程原理

技术分享

接口说明

(1)用户打开商户H5网页选购商品,生成支付订单;
(2)商户调用【统一下单】接口(接口中trade_type需定义为WAP),获得预支付交易会话标识prepayid;
(3)商户按照微信H5支付协议生成deeplink;
(4)用户在商户H5网页点击deeplink调起微信支付;
(5)用户支付完成,返回商户网站查看订单结果

DEEPLINK定义:

商户server调用统一下单接口请求订单,api参见公共api【统一下单】(接口中trade_type需定义为WAP),微信会返回给商户prepayid,商户按固定格式生成deeplink,通过用户点击deeplink来调起微信支付。

DEEPLINK格式:

 

weixin://wap/pay?appid=wxf5b5e87a6a0fde94&noncestr=123&package=123&prepayid=wx20141203201153d7bac0d2e10889028866&sign=6AF4B69CCC30926F85770F900D098D64&timestamp=1417511263

 

 

生成DEEPLINK 的步骤:

步骤1:按URL 格式组装参数, $value 部分进行URL 编码,生成string1:

key1=Urlencode($value1)&key2=Urlencode($value2)

 

 

步骤2:对string1 作整体的Urlencode,生成string2:

String2=Urlencode(string1);

 

步骤3:拼接前缀,生成最终deeplink
举例如下:

String1:
appid=wxf5b5e87a6a0fde94&noncestr=123&package=WAP&prepayid=wx201412101630480281750c890475924233&sign=53D411FB74FE0B0C79CC94F2AB0E2333&timestamp=1417511263

 

 

再对整个string1 做一次URLEncode
string2:

appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2

 

再加上协议头weixin://wap/pay? 得到最后的deeplink

weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263

 

参数说明:
技术分享

使用场景

当在非微信浏览器进行微信支付时,可在H5页面中放置按钮,如:

<a href="weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263">立即支付</a>

 

 

用户通过点击按钮,唤起微信APP,进入支付界面。完成支付操作。


再如,在H5端判断非微信内部浏览时,直接重定向页面到deeplink

<script>
location = "weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263";
</script>


h5支付,在之前是有部分合作商户,可以使用该接口的,只是没有公开的文档。刚才我看了下,官方已经有文档了,
接口是否有变动,我没有去确认,你可以参考一下下面的地址,以微信文档为准。
https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

http://wxpay.wxutil.com/mch/pay/h5.v2.php


场景demo请参考 http://wxpay.wxutil.com/mch/pay/h5.v2.php


评论(2
KKop 2017-08-20 11:52:48
现在wap微信支付很难申请,但可以通过其他办法解决

我们现在有提供方案从浏览器直接跳转到微信内部打开网页,可携带参数完成支付

安卓和苹果都可以实现,目前已经有成功实现支付的很多案例

请联系威幸yyzs87获取详细解决方案
阿萨德168 2017-12-12 23:22:33
上面的是骗子,付了钱就拉黑了,害的我们加班好几个晚上终于找到解决方案了,可以从浏览器和App跳到微信打开支付页面,完成支付,最新的技术,有朋友要解决方案的,我的球球:妖六0三伍三伍妖
2
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!