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

2023-11-20 15:28:46

官方是支持在非微信内置浏览器中调起微信支付的！
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