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

时光毁灭记忆、已成空白 提交于 2020-04-04 21:11:33

官方是支持在非微信内置浏览器中调起微信支付的!
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
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!