H5版如何在微信外(非微信瀏覽器)進行微信支付技術方案

官方是支持在非微信內置瀏覽器中調起微信支付的！
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