微信和支付寶的支付流程，以及開發中遇到的坑？

凡是和錢打交道的事，沒有一樣是容易的。
來來來，我們開始從支付流程走起。

支付流程圖

微信的支付流程

非微信環境的支付流程

開發的前提

支付目錄需要到後臺公眾號配置：

產品中心-開發配置-支付配置-公眾號支付 配置到支付目錄的最後一級。

支付開發中哪些坑

交易號（trade_no）和訂單號（order_no）的區別？

最初的支付設計初衷是支援購物車模式，比如說聯合支付，雖然是支援專案和互助加入或者互助充值一起下單支付的，但是實際上是一次交易兩筆訂單。那麼就產生了一個交易號對應多個訂單號的關係。
後臺給我們提供了通過交易號來獲取到整條交易資訊，以及通過交易號來查詢這筆交易是否完成的介面？
trade_no > order_no
n 1

支付寶支付成功的回撥地址可自定義？

移動端不指定回撥地址也可以正常回撥？設定這個回撥地址的目的是用於支付寶網頁收銀臺的回撥。如果不設定的話後臺回指定跳到一個地址，實際上這個地址好像已經啟用了。

非微信環境下的微信支付地址後面不可以加tzUrl；否則會出現，支付成功後的回撥頁面回不來。

如何進行二維碼支付測試

二維碼的支付測試 我們可以在微信開發者工具上進行測試。或者是被微信禁用的公眾號裡測試。效果圖如下：

微信分享和微信支付的衝突問題？

一個頁面不能配置兩個簽名串，微信分享的簽名串不支援支付，所以在呼叫支付介面時就無法開啟微信app,被分享SDK給覆蓋了,
支付的簽名串是後端返回的，經常會切支付，用的是別的微信公眾號的簽名串，但是分享功能用的是本公眾號的簽名串。
一個頁面不能配置兩個簽名串 。

引入公用的微信分享測試
iphone6s， 可以正常的分享，和支付
1+, 分享正常 支付正常？

自動獲取焦點的坑？

input 有自動獲取焦點的屬性autofocus="autofocus", 但是這個屬性在移動端存在很嚴重的相容性問題，移動裝置的可用率在64%；安卓還好，大多數ios系統禁用了自動獲取焦點。caniuse上的統計如圖：

除此之外了，還嘗試了讓金額輸入框獲取焦點，但是ios系統上的展示，還是沒有藍色的游標閃爍。後來查詢資料瞭解到，ios中input沒辦法自動獲取，只能手動點選的。

$("#money-input").trigger("focus");
$("#money-input").trigger("click").focus();

當我們把這些自動獲取焦點的程式碼新增上之後，在測試的工程中，發現安卓可以正常自動獲取焦點藍色游標閃爍；ios系統上實際上已經獲取了焦點，但是沒有藍色游標閃爍，這其實沒什麼，出現嚴重的問題是，input金額輸入框很難手動獲取焦點，有時候需要點選輸入框三次，才可以獲取到焦點。很影響使用者體驗，後來在排查問題的過程中就把自動獲取焦點的程式碼都去掉了。

聯合支付的聯動的坑？

我們的支援在初始設計的時候是支援購物車模式的，一筆交易可能會產生多個訂單。聯合支付就符合這樣的模式。從使用者體驗考慮聯合支付方框和單選按鈕做成聯動，更方便使用者加入互助和進行互助充值。

我在做聯動的時候。希望點選方框的時候，讓單選按鈕也處於選中的狀態。於是我通過jquery的 .attr('checked', 'checked')給單選按鈕新增選中狀態。發現單選按鈕的check屬性新增上了，但是選中的樣式狀態沒有顯示。查詢資料瞭解到。需要.prop("checked", true)，單選按鈕也會被選中。

其實在在jquery中應該使用prop方法來獲取和設定checked屬性，不應該使用attr。這裡是混合使用了。

總結：凡是和錢打交道的事，沒有一樣是容易的。