微信支付開發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

效果圖

# 

流程圖

 

二、商品資訊準備

#主要先定義商品的名稱及價格，以及交易編號。代碼如下。

    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&timestamp=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

String(32)擴充字段，固定填寫WAP 簽章

欄位名稱	變數名稱	必填	類型	範例值	描述
」公眾帳號ID	appid	是	String(32)	wx8888888888888888	微訊號分配的公用帳號ID
隨機字串	noncestr		##隨機字串	noncestr	是
5K8264ILTKCH16CQ2502SI8ZNMTM67VS	隨機字串，不長於32位元。 ##訂單詳情擴充字串	package	是	String(32)	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中文網！