微信支付開發(7) H5支付
本文介紹微信支付下的H5支付實現流程。
一、介紹
H5支付是基於公眾號基礎開發的一種非微信內瀏覽器支付方式（需要單獨申請支付許可權），可以滿足在微信外的手機H5頁面進行微信支付的需求。。
測試地址
http://wxpay.weixin.qq.com/pub_v2/pay/wap.v2.php
http://wxpay.weixin.qq.com/mch/pay/h5.v2.php
http://wxpay.wxutil.com/pub_v2/pay/wap.v2.php
http://wxpay.wxutil.com/mch/pay/h5.v2.php
效果圖
流程圖
二、商品資訊準備
主要是先定義商品的名稱及價格，以及交易號。程式碼如下。
include_once("../WxPayPubHelper/WxPayPubHelper.php"); //使用統一支付介面 $unifiedOrder = new UnifiedOrder_pub(); //設定統一支付介面引數 //設定必填引數 //appid已填,商戶無需重複填寫 //mch_id已填,商戶無需重複填寫 //noncestr已填,商戶無需重複填寫 //spbill_create_ip已填,商戶無需重複填寫 //sign已填,商戶無需重複填寫 $unifiedOrder->setParameter("body","H5支付測試");//商品描述 $timeStamp = time(); $out_trade_no = WxPayConf_pub::APPID."$timeStamp"; $unifiedOrder->setParameter("out_trade_no","$out_trade_no");//商戶訂單號 $unifiedOrder->setParameter("total_fee","1");//總金額 //$unifiedOrder->setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址$unifiedOrder->setParameter("trade_type","WAP");//交易型別 //非必填引數，商戶可根據實際情況選填 $unifiedOrder->setParameter("device_info","100001");//裝置號
上述引數最終封裝成如下類似XML引數
<xml> <body><![CDATA[H5支付測試]]></body> <out_trade_no><![CDATA[100001_1433009089]]></out_trade_no> <total_fee>1</total_fee> //<notify_url><![CDATA[http://www.doucube.com/weixin/demo/notify_url.php]]></notify_url> <trade_type><![CDATA[WAP]]></trade_type> <device_info>100001</device_info> <appid><![CDATA[wx1d065b0628e21103]]></appid> <mch_id>1237905502</mch_id> <spbill_create_ip><![CDATA[61.129.47.79]]></spbill_create_ip> <nonce_str><![CDATA[gwpdlnn0zlfih21gipjj5z53i7vea8e8]]></nonce_str> <sign><![CDATA[C5A1E210F9B4402D8254F731882F41AC]]></sign> </xml>
2. 呼叫統一支付請求
將上述XML傳送給統一支付介面
https://api.mch.weixin.qq.com/pay/unifiedorder
得到如下XML資料
<xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><![CDATA[wx1d065b0628e21103]]></appid> <mch_id><![CDATA[1237905502]]></mch_id> <device_info><![CDATA[100001]]></device_info> <nonce_str><![CDATA[6u8ovTtFupTagsiY]]></nonce_str> <sign><![CDATA[E84D8BC2331766DD685591F908367FF1]]></sign> <result_code><![CDATA[SUCCESS]]></result_code> <prepay_id><![CDATA[wx20150531020450bb586eb2f70717331240]]></prepay_id> <trade_type><![CDATA[WAP]]></trade_type> </xml>
這樣就得到一個prepayid
二、DeepLink
商戶server呼叫統一下單介面請求訂單，api參見公共api【統一下單】（介面中trade_type需定義為WAP），微信會返回給商戶prepayid，商戶按固定格式生成deeplink，通過使用者點選deeplink來調起微信支付。
deeplink格式：
weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3D123%26prepayid%3Dwx20141203201153d7bac0d2e10889028866%26sign%3D6AF4B69CCC30926F85770F900D098D64%26timestamp%3D1417511263
生成deeplink 的步驟如下：
步驟1：按URL 格式組裝引數, $value 部分進行URL 編碼，生成string1：
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×tamp=1417511263
再對整個string1 做一次URLEncode
string2：
appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263
再加上協議頭weixin：//wap/pay? 得到最後的deeplink
weixin://wap/pay?appid%3Dwxf5b5e87a6a0fde94%26noncestr%3D123%26package%3DWAP%26prepayid%3Dwx201412101630480281750c890475924233%26sign%3D53D411FB74FE0B0C79CC94F2AB0E2333%26timestamp%3D1417511263
| 欄位名 | 變數名 | 必填 | 型別 | 示例值 | 描述 |
|---|---|---|---|---|---|
| 公眾賬號ID | appid | 是 | String(32) | wx8888888888888888 | 微信分配的公眾賬號ID |
| 隨機字串 | noncestr | 是 | String(32) | 5K8264ILTKCH16CQ2502SI8ZNMTM67VS | 隨機字串，不長於32位。推薦隨機數生成演算法 |
| 訂單詳情擴充套件字串 | package | 是 | String(32) | WAP | 擴充套件欄位，固定填寫WAP |
| 預支付交易會話標識 | prepayid | 是 | String(64) | wx201410272009395522657a690389285100 | 微信統一下單介面返回的預支付回話標識，用於後續介面呼叫中使用，該值有效期為2小時 |
| 簽名 | sign | 是 | String(32) | C380BEC2BFD727A4B6845133519F3AD6 | |
| 時間戳 | timestamp | 是 | String(32) | 1414561699 |
當前的時間，其他詳見時間戳規則 |
開發文件：https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1
三、新版流程
1、使用者在商戶側完成下單，使用微信支付進行支付
2、由商戶後臺向微信支付發起下單請求（呼叫統一下單介面）注：交易型別trade_type=MWEB
3、微信支付校驗商戶許可權
4、統一下單介面返回支付相關引數給商戶後臺，如支付跳轉url（引數名“mweb_url”，即流程圖中的微信中轉頁面地址）
5、商戶後臺收到統一下單介面返回引數，將mweb_url返回給前端
6、商戶通過前端頁面訪問微信中轉頁面mweb_url（此步驟微信支付會校驗refer，以判斷請求來源是否合法）
7、由中轉頁面mweb_url主動喚起微信支付收銀臺
8、微信支付收銀臺被喚起同時關閉mweb_url中轉頁面
9、使用者在微信支付收銀臺完成支付
三、如何申請微信H5支付
申請條件：微信支付月平均支付筆數超過3W筆，日平臺支付筆數超過1K筆