一、使用場景以及說明
使用場景：商戶已有H5商城網站，用戶通過消息或掃描二維碼在微信內打開網頁時，可以調用微信支付完成下單購買的流程。
說明：1.用戶打開圖文消息或者掃描二維碼，在微信內置瀏覽器打開網頁進行的支付。
2.商戶網頁前端通過使用微信提供的 JSAPI，調用微信支付模塊。這種方式，適合需要在商戶網頁進行選購下單的購買流程。
二、准備工作
公共號支付需要提前在微信公共平台進行業務配置，包括設置支付授權目錄、測試支付目錄和白名單、設置JS接口安全域名以及設置授權回調頁面域名。
1.進行微信公眾支付之前，我們需要申請個公眾號，以及申請微信支付的功能。
2.支付授權目錄:
位置：微信支付——>開發配置——>公共號支付
1) 所有使用公眾號支付方式發起支付請求的鏈接地址，都必須在支付授權目錄之下；
2) 正式支付授權目錄最多設置3個，測試授權目錄最多設置1個，且域名必須通過ICP備案；==》截止目前（2017.11.15）該支付授權目錄設置已經移動至
商戶平台-->產品中心-->開發配置（傳送門：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3），且最多可以同時設置5個目錄
目錄示例：
|||||||| 如果未設置授權目錄或者目錄不對，在手機微信調用jsapi時報錯：
3) 頭部要包含http或https，須細化到二級或三級目錄，以左斜杠“/”結尾。
業務中發起支付的頁面地址必須在授權目錄下，否則調用下單接口時會提示“當前頁面的URL未注冊”。
這里再啰嗦地補充兩點：
1）不使用框架的情況下，比如將官方sdk下載下來，改成demo放在根目錄下，demo/example/jaspi.php,授權目錄可參考 http://www. ×××.com/demo/example/
2 )使用框架的情況下，比如ThinkPHP, 項目名叫test ,目錄結構如下，test/Application/Home/controller/WxpayController.class.php,授權目錄可參考 http://www. ×××.com/index.php/Home/Wxpay/
3.JS接口安全域名:
位置：微信支付——>公共號設置——>功能設置——>JS接口安全域名
說明：設置JS接口安全域名后，公眾號開發者可在該域名下調用微信開放的JS接口。
注意事項：
1） 可填寫三個域名，要求是一級或一級以上域名（例：qq.com，或者 www.qq.com ），需使用字母、數字及“-”的組合，不支持IP地址及端口號；
2） 填寫的域名須通過ICP備案的驗證；
3）一個自然月內最多可修改並保存三次。
4.授權回調頁面域名:（用來jsapi支付的必須）
位置：微信支付——>接口權限——>網頁授權獲取用戶基本信息
用戶在網頁授權頁同意授權給公眾號后，微信會將授權數據傳給一個回調頁面，回調頁面需在此域名下，以確保安全可靠。
注意事項：
1） 回調頁面域名需使用字母、數字及“-”的組合，不支持IP地址及端口號。填寫的域名需與實際回調URL中的域名相同；
2） 填寫的域名須通過ICP備案的驗證。
獲取用戶授權時redirect_uri對應的URL必須在此域名下，否則回調的地址會無法打開。
三、開發步驟
說明：整個微信公眾號支付的流程如下：
【1】用戶點擊公眾號內微信商城打開H5的支付頁面
【2】H5頁面通過JS調用微信支付接口
【3】微信服務器通過判斷輸入的JSON數據，返回給客戶端相應的成功或失敗信息
官方demo結構如下：
1.JSAPI支付——H5網頁端調起支付接口
1）用戶同意授權，獲取code
請求鏈接：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#we-chat_redirect
2)如果有code，直接就通過code能獲取用戶openid
如果沒有code，通過createOauthUrlForCode方法，傳入必要參數，獲取code
3)如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE。
若用戶禁止授權，則重定向后不會帶上code參數，僅會帶上state參數
redirect_uri?state=STATE
4)code說明以及scope的兩種方式說明
【1】code作為換取access_token的票據，每次用戶授權帶上的code將不一樣，code只能使用一次，5分鍾未被使用自動過期。
這里獲取到code 和 state(訂單號) 后， 對訂單進行驗證，用戶余額也進行驗證，如果條件都滿足則才能進行下面的流程。
【2】scope的兩種方式說明：
微信提供了兩種授權方式：snsapi_base和snsapi_userinfo。
snsapi_base：不彈出授權頁面，直接跳轉，只能獲取用戶openid；
snsapi_userinfo：彈出授權頁面，可通過openid拿到昵稱、性別、所在地。並且，即使在未關注的情況下，只要用戶授權，也能獲取其信息。
想要獲取code，需要構造如下地址：
2. 通過code換取網頁授權access_token (這里也獲取到了openid)
1）請求鏈接：https://api.weixin.qq.com/sns/oauth2/access_token
?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
2）獲取openid:openid是微信支付jsapi支付接口必須的參數
【1】如果網頁授權的作用域為snsapi_base(靜默授權)，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid，snsapi_base式的網頁授權流程即到此為止。
【2】如果網頁授權作用域為snsapi_userinfo，則此時開發者可以通過access_token和openid拉取用戶信息了。
3）getOpenid方法中調用createOauthUrlForOpenid方法獲取openid
3. 調用統一支付接口獲取預付款id （這里有個小技巧：你如果直接把表單提交到這里，那就傻逼了。 你的服務器會和微信服務器交互2次，等拿到openid，你提交的數據早就被刷掉了，你可以把它放在session或者緩存里面，然后重定向到下面這個頁面，等拿到openid后再從session里面拿數據。）
官方文檔說明：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1
1) 設置必傳參數，按照簽名參數產生簽名, 此時參與簽名字段有 : appid, mch_id , nonce_str, openid, body , out_trade_no, total_fee, notify_url , trade_type
2) 將必傳參數轉成xml,createXml方法。
3) 使用xml，請求統一支付接口 https://api.mch.weixin.qq.com/pay/unifiedorder
4) 得到xml格式的返回值結果
5) 將結果轉成數組，獲取預支付id
4. 使用jsapi調起支付
1. 通過getParameters方法設置必傳參數，接口輸入數據為json
2. 根據官方demo中jsapi.php 調起支付，得到支付結果
注：使用以上方式判斷前端返回,res.err_msg 將在用戶支付成功后返回 ok，但不保證它絕對可靠。
四、可能遇到的問題
1. 返回參數是xml，而不是直接輸出success ，這個與微信app支付有區別。
2. 參與簽名字段要保證一致，保證前后簽名一樣。
3. 由於存在重新發送后台通知的情況，因此同樣的通知可能會多次發送給商戶系統。商戶系統必須能夠正確處理重復的通知。比如在支付成功后寫入了支付日志，那么第二次回調前前判斷是否已經有了支付日志，如果有，直接退出不作處理就好了。
4 . 當用戶有余額，先用余額支付，剩下的才是微信 ， 支付成功時，回調扣去余額
5. 如果同一筆訂單號修改多次價格進行支付，第二次支付時，會出現生成預支付訂單失敗，主要原因是同一筆訂單支付時，支付金額不能一樣，或者給到第三方的訂單號不一樣，所以解決方法就是訂單號+標志位（比如Z或A）+ 時間戳生成給到的第三方的支付號即可。
https://www.cnblogs.com/xuzhengzong/p/7840124.html