業(yè)務(wù)場(chǎng)景：
H5對(duì)接微信支付和支付寶支付，app無(wú)法發(fā)版，需要支持在app內(nèi)和瀏覽器內(nèi)同時(shí)使用。
于是借此機(jī)會(huì)對(duì)前端接入對(duì)第三方支付進(jìn)行了調(diào)研，本次只討論微信支付，和支付寶支付。
微信支付
文檔地址：微信支付
概述
微信支付方式主要包括，對(duì)普通商家主要提供以下7種方式
付款碼支付：比如大型連鎖店，超市，支付時(shí)可以，掃描用戶的個(gè)人付款碼，進(jìn)行支付，觸動(dòng)場(chǎng)景一般為：用戶打開(kāi)個(gè)人付款碼->
收銀員掃描儀掃描->門店收銀臺(tái)->商戶后臺(tái)->微信支付系統(tǒng)
JSAPI支付：僅限在微信內(nèi)使用，可調(diào)用微信的API，直接喚起微信的支付組件。比如早期的一些公眾號(hào)里的內(nèi)嵌支付頁(yè)面。
Native支付：商戶后臺(tái)系統(tǒng)先調(diào)用微信支付的統(tǒng)一下單接口，微信后臺(tái)系統(tǒng)返回鏈接參數(shù)code_url，商戶后臺(tái)系統(tǒng)將code_url值生成二維碼圖片，用戶使用微信客戶端掃碼后發(fā)起支付。注意：code_url有效期為2小時(shí)，過(guò)期后掃碼不能再發(fā)起支付。
App支付：app內(nèi)喚起為微信打開(kāi)支付組件進(jìn)行支付
H5支付：用戶在瀏覽器端打開(kāi)h5,，喚起微信支付組件。
小程序支付：小程序直接調(diào)用小程序微信支付api,小程序不能通過(guò)拉起H5頁(yè)面做jsapi支付，小程序內(nèi)只能使用小程序支付
刷臉支付：需要有實(shí)際的硬件場(chǎng)景。
和前端關(guān)系密切的主要有 JSAPI支付，H5支付，小程序支付。
我們此次重點(diǎn)討論一下JSAPI 支付，H5支付，小程序支付。
JSAPI 支付
前置配置項(xiàng)比較多，因?yàn)樵谖⑿怒h(huán)境中使用，微信在涉及微信生態(tài)的交互方面一直非?？酥坪蛧?yán)謹(jǐn)
需要配置支付域名，網(wǎng)頁(yè)授權(quán)域名，具體可以看文檔，微信公眾平臺(tái)企業(yè)賬號(hào)，商戶號(hào)，開(kāi)通jsapi支付權(quán)限，設(shè)置了頁(yè)面授權(quán)域名，并且是你網(wǎng)站的域名地址，基本接口權(quán)限，尤其是jssdk部分權(quán)限，保證盡可能都開(kāi)通
主要流程微信文檔說(shuō)的很清楚了:
概括一下就是，h5 通過(guò)調(diào)用微信提供的特殊 JSbridge 來(lái)喚起微信支付控件
獲取openid 過(guò)程
我主要補(bǔ)充說(shuō)下，需要前置去獲取用戶的openid?？赏ㄟ^(guò)openid拿到昵稱、性別、所在地。則在獲取openid 在獲取openid 會(huì)需要修改入?yún)?shù)，會(huì)有強(qiáng)制用戶授權(quán)彈窗， 即使在未關(guān)注的情況下，只要用戶授權(quán)，也能獲取其信息。如果只是獲取openid，則對(duì)用戶來(lái)說(shuō)感受只是頁(yè)面重新加載了一次。
H5支付
概述
H5支付是指，前端在瀏覽器喚起微信app,支付成功后在回到瀏覽器。
前端發(fā)起請(qǐng)求，需要后臺(tái)server 支持，請(qǐng)求微信支付服務(wù)，返回前端微信支付的鏈接。我們的回調(diào)地址，會(huì)以redirect_url 的形式拼的返回的鏈接后面，前端打開(kāi)這個(gè)鏈接，就可以喚起微信支付。完成微信支付后，會(huì)回到回調(diào)地址。
常見(jiàn)鏈接形如下面：
MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn
任務(wù)流程圖
主要頁(yè)面跳轉(zhuǎn)：
泳道圖
注意點(diǎn)
1.當(dāng)我們把h5頁(yè)面嵌入到app內(nèi)使用時(shí),問(wèn)題：ios 端在微信支付成功或者取消支付后，停留到了微信，無(wú)法回到app.會(huì)打開(kāi)safari
我們做了一個(gè)中轉(zhuǎn)頁(yè)面，專門供iOS 使用，在瀏覽器打開(kāi)時(shí)，我們會(huì)以u(píng)rl schema 的形式喚起app,打開(kāi)支付結(jié)果頁(yè)面。
2.注意微信xyRedirectUrl 編碼后長(zhǎng)度不可超過(guò) 800 微信支付會(huì)報(bào)錯(cuò)
小程序支付
小程序需要通過(guò)微信認(rèn)證，開(kāi)通微信支付能力。需要商戶號(hào)資質(zhì)，一般個(gè)人開(kāi)發(fā)比較難搞
調(diào)用方式比較JSAPI 較為簡(jiǎn)單，因?yàn)槭窃谖⑿怒h(huán)境內(nèi)，兼容性問(wèn)題較少。
wx.requestPayment({
"timeStamp":"",// 時(shí)間戳 "nonceStr": "",//隨機(jī)字符串，長(zhǎng)度為32個(gè)字符以下。
"package": "",//統(tǒng)一下單接口返回的 prepay_id 參數(shù)值，提交格式如：prepay_id=*
"signType": "MD5",//簽名方式 "paySign": "",//簽名
"success":function(res){}, "fail":function(res){},
"complete":function(res){}
})
支付寶支付
文檔地址 支付寶支付
支付寶支付方式也有很多種，文檔很細(xì)節(jié)，具體內(nèi)容可直接查詢文檔，我們?cè)谶@里重點(diǎn)介紹 手機(jī)網(wǎng)站支付
手機(jī)網(wǎng)站支付
概述
商家在網(wǎng)頁(yè)中調(diào)用支付寶提供的網(wǎng)頁(yè)支付接口調(diào)起支付寶客戶端內(nèi)的支付模塊，商家網(wǎng)頁(yè)會(huì)跳轉(zhuǎn)到支付寶中完成支付，支付完后跳回到商家網(wǎng)頁(yè)內(nèi)，最后展示支付結(jié)果。若無(wú)法喚起支付寶客戶端，則在一定的時(shí)間后會(huì)自動(dòng)進(jìn)入網(wǎng)頁(yè)支付流程。
前端調(diào)用方式：
需要從前端頁(yè)面以 Form 表單的形式發(fā)起請(qǐng)求，瀏覽器會(huì)自動(dòng)跳轉(zhuǎn)至支付寶的相關(guān)頁(yè)面（一般是收銀臺(tái)或簽約頁(yè)面），用戶在該頁(yè)面完成相關(guān)業(yè)務(wù)操作后再回跳到商戶指定頁(yè)面
任務(wù)流程圖
主要頁(yè)面跳轉(zhuǎn)：
前端核心代碼如下
// 后臺(tái)接口返回來(lái)的是form標(biāo)簽字符串
let _str = `
<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/gateway.do' method='POST'>
<input type='hidden' name='app_id' value='201805106……'/>
<input type='hidden' name='method' value='alipay.trade.page.pay'/>
<input type='hidden' name='format' value='JSON'/>
<input type='submit' value='ok' style='display:none;''>
</form> <script>document.forms['alipaysubmit'].submit();</script>`;
_str = _str.replace(/form/, 'form target="_blank"');
div.innerHTML=_str; document.body.appendChild(div); document.forms.alipaysubmit.submit();
注意點(diǎn)：
1.手機(jī)網(wǎng)站支付產(chǎn)品不建議在 App 端使用；如果需要在 App 端中使用支付，請(qǐng)接入 App 支付產(chǎn)品
詳情請(qǐng)看文檔：?jiǎn)酒鹬Ц秾歛pp
2.在 iOS 系統(tǒng)中，喚起支付寶 App 支付完成后，不會(huì)自動(dòng)回到瀏覽器或商戶 App。用戶可手工切回到瀏覽器或商戶 App。
3.手機(jī)網(wǎng)站支付目前未安裝支付寶錢包，不支持H5頁(yè)面登陸支付。
在用戶安裝了支付寶客戶端的前提下，產(chǎn)品支付流程基本不變，按原流程直接喚起錢包進(jìn)行支付。
在未安裝支付寶客戶端的前提下，支付流程有所變化，升級(jí)后不再喚起h5網(wǎng)頁(yè)支付，會(huì)引導(dǎo)用戶下載支付寶客戶端進(jìn)行支付。
注：
1)、2019年8月份開(kāi)始簽約的手機(jī)網(wǎng)站支付產(chǎn)品會(huì)走新的支付流程，之前歷史簽約產(chǎn)品仍然走原產(chǎn)品流程。
2)、對(duì)于部分H5支付成功率極低的商戶，為了提升支付體驗(yàn)和安全性，也會(huì)升級(jí)為新產(chǎn)品流程。
支付結(jié)果處理
微信支付結(jié)果是異步的，通過(guò)接口服務(wù)去查詢微信支付系統(tǒng)支付結(jié)果，再返回給前端，需要有個(gè)輪詢結(jié)果的過(guò)程。一般支付結(jié)果有：
具體根據(jù)業(yè)務(wù)，再對(duì)每個(gè)結(jié)果做相應(yīng)的判斷
總結(jié)與思考
-
對(duì)接第三方支付，如果僅從前端的角度來(lái)看，其實(shí)能講的東西很少，更多的是處理各個(gè)瀏覽器，系統(tǒng)的兼容性問(wèn)題，其實(shí)也沒(méi)有找到太通用的解決方案，從長(zhǎng)遠(yuǎn)來(lái)看，官方還是推薦如果再app 內(nèi)去推薦native方式接入支付，如果再支付寶，微信內(nèi)，在去調(diào)起各自的小程序進(jìn)行拉起支付。
-
相對(duì)h5接入的方式也僅限于在瀏覽器里，因各個(gè)瀏覽器封裝內(nèi)核不同，用戶設(shè)置不同，以及瀏覽器體驗(yàn)不如原生，導(dǎo)致支付成功率也不如在app 中和小程序中，所以h5支付之后發(fā)展也必將是是一個(gè)弱入口，如何app開(kāi)發(fā)不用發(fā)版本，是之后發(fā)展的方向。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-827134.html
-
支付寶支付方式要比微信支付方式更加多樣，但是文檔相對(duì)微信沒(méi)有那么清晰，但是社區(qū)問(wèn)答做得更好。從產(chǎn)品緯度來(lái)看，微信沒(méi)有提供像支付寶那樣的中間頁(yè)，而是把中間頁(yè)的設(shè)置交給了商戶自己決定？為什么微信沒(méi)有提供網(wǎng)頁(yè)端收銀臺(tái)，沒(méi)有下載微信APP就無(wú)法使用微信支付？我想更多的是，支付寶更注重支付屬性，微信更注重社交屬性吧。
*
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-827134.html
到了這里，關(guān)于H5接入支付流程-微信支付&支付寶支付的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
