簡(jiǎn)介

商戶(hù)已有H5商城網(wǎng)站，用戶(hù)通過(guò)消息或掃描二維碼在微信內(nèi)打開(kāi)網(wǎng)頁(yè)時(shí)，可以調(diào)用微信支付完成下單購(gòu)買(mǎi)的流程。

產(chǎn)品流程

步驟1 用戶(hù)在商戶(hù)網(wǎng)頁(yè)，選擇商品下單、確認(rèn)購(gòu)買(mǎi)，如下圖2；進(jìn)入支付環(huán)節(jié)，選擇微信支付付款，用戶(hù)點(diǎn)擊去支付，如下圖2。

步驟2 調(diào)起微信支付控件，用戶(hù)開(kāi)始輸入支付密碼，如下圖3。

圖1 商戶(hù)網(wǎng)頁(yè)下單

圖2 請(qǐng)求微信支付

圖3 用戶(hù)確認(rèn)支付，輸入密碼

步驟3 密碼驗(yàn)證通過(guò)，支付成功。商戶(hù)后臺(tái)得到支付成功的通知,如下圖4。

步驟4 返回商戶(hù)頁(yè)面，顯示購(gòu)買(mǎi)成功。該頁(yè)面由商戶(hù)自定義，如下圖5。

步驟5 微信支付公眾號(hào)下發(fā)支付憑證，如下圖6。

步驟6 商戶(hù)公眾號(hào)下發(fā)消息，提示發(fā)貨成功。該步驟可選。

圖4 用戶(hù)支付成功提示

圖5 返回商戶(hù)頁(yè)面

圖6 用戶(hù)收到微信通知

注意：商戶(hù)也可以把商品網(wǎng)頁(yè)的鏈接生成二維碼，用戶(hù)掃一掃打開(kāi)后即可完成購(gòu)買(mǎi)支付。

交互細(xì)節(jié)

以下是支付場(chǎng)景的交互細(xì)節(jié)，請(qǐng)認(rèn)真閱讀，設(shè)計(jì)商戶(hù)頁(yè)面的邏輯：

1）用戶(hù)打開(kāi)商戶(hù)網(wǎng)頁(yè)選購(gòu)商品，發(fā)起支付，在網(wǎng)頁(yè)通過(guò)JavaScript調(diào)用getBrandWCPayRequest接口，發(fā)起微信支付請(qǐng)求，用戶(hù)進(jìn)入支付流程。

2）用戶(hù)成功支付點(diǎn)擊完成按鈕后，商戶(hù)的前端會(huì)收到JavaScript的返回值。商戶(hù)可直接跳轉(zhuǎn)到支付成功的靜態(tài)頁(yè)面進(jìn)行展示。

3）商戶(hù)后臺(tái)收到來(lái)自微信開(kāi)放平臺(tái)的支付成功回調(diào)通知，標(biāo)志該筆訂單支付成功。

注意：2）和3）的觸發(fā)不保證遵循嚴(yán)格的時(shí)序。JS API返回值作為觸發(fā)商戶(hù)網(wǎng)頁(yè)跳轉(zhuǎn)的標(biāo)志，但商戶(hù)后臺(tái)應(yīng)該只在收到微信后臺(tái)的支付成功回調(diào)通知后，才做真正的支付成功的處理。

案例介紹

目前已上線(xiàn)支付案例，商戶(hù)可進(jìn)行實(shí)際體驗(yàn)。

線(xiàn)下：新版友寶售賣(mài)機(jī)等。

線(xiàn)上：京東、易迅公眾號(hào)內(nèi)下單支付等