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



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

    流程原理

    alt text

    接口说明

    (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=wx20141210163048
    0281750c890475924233&sign=53D411FB74FE0B0C79CC94F2AB0E2333&timestamp=1417511263
    

    再对整个string1 做一次URLEncode
    string2:

    appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dw
    x201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2
    333%26timestamp%3D1417511263
    

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

    weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DW
    AP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0
    B0C79CC94F2AB0E2333%26timestamp%3D1417511263
    

    参数说明:
    0_1468308677160_upload-e9aefc62-6bb6-4bdd-8525-c943bceef71a

    使用场景

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

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

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


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

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

登录后回复