17.5 H5支付_微信公众平台开发：从零基础到ThinkPHP5高性能框架实践全文在线阅读

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时，将调起微信支付插件，完成支付过程。