讀古今文學網 > 微信公眾平台開發:從零基礎到ThinkPHP5高性能框架實踐 > 17.5 H5支付 >

17.5 H5支付

H5支付是基於公眾號開發的一種非微信內瀏覽器支付方式,可以滿足在微信外的手機H5頁面進行微信支付的需求。

H5支付目前有兩種不同的交易類型,分別為WAP和MWEB。下面分別介紹如下。

1)交易類型為WAP的交易流程如下。

同JS API支付一致,支付時填充相關參數,並將交易類型設置為WAP。相關代碼如下。


// 使用統一支付接口
$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");        // 交易類型
  

上述代碼將生成如下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>
  

將該XML向統一支付接口提交,將返回如下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>
  

其中最重要的是prepay_id參數,將其提取出來,然後將appid、nonce_str、package、prepay_id、timestamp等幾個參數進行微信支付簽名,並按固定格式生成DeepLink。DeepLink的示例如下。


weixin:// wap/pay?appid=wxf5b5e87a6a0fde94&noncestr=6u8ovTtFupTagsiY&package=WAP
&prepayid=wx20141203201153d7bac0d2e10889028866&sign=6AF4B69CCC30926F85770F900D098D64&timestamp=1417511263
  

用戶點擊該DeepLink時,將調起微信支付插件,完成支付過程。

2)交易類型為MWEB的交易流程如下。

同JS API支付一致,支付時填充相關參數,並將交易類型設置為MWEB。相關代碼如下。


// 使用統一支付接口
$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","MWEB");        // 交易類型
  

上述代碼將生成如下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[MWEB]]></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>
 

將該XML向統一支付接口提交,將返回如下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>  
    <trade_type><![CDATA[MWEB]]></trade_type>
    <prepay_id><![CDATA[wx20150531020450bb586eb2f70717331240]]></prepay_id>  
    <mweb_url><![CDATA[https:// wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_
    id=wx20161119201546de8d2e29f10823256364&package=3456124716]]></mweb_url>
</xml>
  

其中最重要的是mweb_url,用戶點擊該URL時,將調起微信支付插件,完成支付過程。