本文介紹微信支付下的H5支付實現流程。
一、介紹
H5付款是基於公眾號基礎開發的一種非微信內瀏覽器支付方式（需要單獨申請支付權限），可以滿足在微信外的手機H5頁面進行微信支付的需求。 。
測試網址
http://wxpay.weixin.qq.com/pub_v2/pay/wap.v2.php
http://wxpay.weixin.qq .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>
<out_trade_no></out_trade_no>
<total_fee>1</total_fee>
//<notify_url></notify_url>
<trade_type></trade_type>
<device_info>100001</device_info>
<appid></appid>
<mch_id>1237905502</mch_id>
<spbill_create_ip></spbill_create_ip>
<nonce_str></nonce_str>
<sign></sign></xml>
登入後複製
2. 調用統一支付請求
將上述XML傳送給統一支付介面
https://api.mch.weixin.qq.com/pay/unifiedorder
登入後複製
得到如下XML資料
<xml>
<return_code></return_code>
<return_msg></return_msg>
<appid></appid>
<mch_id></mch_id>
<device_info></device_info>
<nonce_str></nonce_str>
<sign></sign>
<result_code></result_code>
<prepay_id></prepay_id>
<trade_type></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 |
|
##隨機字串 |
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支付相關文章請關注PHP中文網！
