近日在項目中接入的微信JSAPI支付出現(xiàn)了很詭異的事情,H5 支付頁面利用JSAPI支付時溉苛,安卓手機微信app中可以正常喚起支付頁面镜廉,并支付成功,但是蘋果手機微信app中卻無法正常支付成功(可以瞬間喚起支付頁面愚战,但瞬間變?yōu)榇_認支付頁面娇唯,讓用戶添加銀行卡支付齐遵,繼續(xù)按照頁面提示添加銀行卡后出現(xiàn)報錯),以下是支付bug截圖:
分析如下:
? ? 1:JSAPI支付流程分析:
? ? ? ??用戶打開第三方商戶提供的購買頁面----->用戶向第三方商戶下單成功----->第三方商戶生成自己的訂單號塔插,并同時向微信商戶預下單(可以理解成第三方商戶向微信商戶打個招呼梗摇,告訴微信商戶我有一個用戶在我這里下單了,即將向你支付一定的金額想许,微信商戶知曉后會返回一個預支付id伶授,標識該用戶是誰,需要支付多少錢流纹,買了什么商品等) ----->第三方商戶預下單成功后將獲取微信商戶給予的預支付id(此id將作為前端頁面喚起微信支付的主要參數(shù))-----> 第三方商戶將該預支付id返回給購買商品的用戶 ------> 用戶拿到該預支付id后就開始單獨和微信商戶交互了糜烹,即喚起支付頁面(包含商品描述,金額捧颅,以及收款方等) ----> 用戶支付金額完成 ----->微信商戶收到用戶支付成功后再通知第三方商戶后臺景图,告知用戶支付結果。
? ? 1:既然在蘋果手機的微信中能瞬間喚起支付頁面碉哑,(安卓手機完全可以走完支付)說明前端通過 WeixinJSBridge.invoke()方法喚起支付成功挚币,也就是后端封裝給前端的喚起支付所需參數(shù)沒有問題,后續(xù)中去微信商戶后臺查詢預下單信息確實存在扣典。
? ? 2:按照蘋果手機中支付提示的添加銀行卡流程最后報錯妆毕,說明微信此處不該出現(xiàn)添加銀行卡的流程。(實際上支付用戶已經(jīng)添加過幾張銀行卡了)
? ? 3:微信商戶后臺查詢預下單信息存在贮尖,說明我方服務器向微信商戶預下單成功笛粘,為何在蘋果手機中出現(xiàn)詭異的需要添加銀行卡,在安卓手機中卻可以正常支付成功呢湿硝?
原因猜測如下:
? ? 既然安卓手機的微信可以走完整個支付流程薪前,而蘋果手機的微信在喚起支付頁面后瞬間消失,卻出現(xiàn)讓用戶綁定銀行卡的錯誤操作关斜,說明在最后的微信客戶端和微信商戶交互的時候出現(xiàn)問題示括,可能是安卓的容錯性比較好,可以正常顯示喚起的支付頁面痢畜,而蘋果手機在該頁面出現(xiàn)錯誤垛膝,瞬間微信又將支付的頁面跳轉到了綁定銀行卡的頁面了。
支付頁面顯示信息包含所需支付的金額丁稀,商品描述吼拥,收款方。
下面從這三個參數(shù)方面查找原因
? ? 1:金額
? ? ? ? 通過安卓手機可以正常支付线衫,說明金額沒有問題
????2:收款方
? ? ? ? 收款方是第三方商戶在向微信預下單時就固定的凿可,也不會是這里存在問題。
????3:商品描述
? ? ? ? 該值是第三方商戶在后臺向微信商戶預下單時傳遞給微信商戶的桶雀,是第三方商戶自定義的值矿酵,很大可能出現(xiàn)在該值不合法唬复。
查詢第三方商戶后臺數(shù)據(jù)庫中該商品描述值為:
商品描述字符串中間有一個小框框?全肮?敞咧?
查詢微信支付開發(fā)者文檔如下:
發(fā)現(xiàn)很有可能是因為這個特殊字符導致蘋果手機微信客戶端解析時報錯,微信又沒有正確處理辜腺,就將頁面跳轉到了添加銀行卡的錯誤操作頁面休建。
解決方法:
? ? 將商品描述中的特殊字符小框框去除,發(fā)現(xiàn)蘋果手機JSAPI支付功能正常了评疗。微信也有小bug安馍啊!0俅摇砌些!,希望微信盡快改掉加匈。
????
????
????