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

步驟（1）：如圖7.1，商戶下發(fā)圖文消息或者通過(guò)自定義菜單吸引用戶點(diǎn)擊進(jìn)入商戶網(wǎng)頁(yè)。

步驟（2）：如圖7.2，進(jìn)入商戶網(wǎng)頁(yè)，用戶選擇購(gòu)買，完成選購(gòu)流程。

圖7.1 商戶網(wǎng)頁(yè)下單

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

步驟（3）：如圖7.3，調(diào)起微信支付控件，用戶開(kāi)始輸入支付密碼。

步驟（4）：如圖7.4，密碼驗(yàn)證通過(guò)，支付成功。商戶后臺(tái)得到支付成功的通知。

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

圖7.4 用戶支付成功提示

步驟（5）：如圖7.5，返回商戶頁(yè)面，顯示購(gòu)買成功。該頁(yè)面由商戶自定義。

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

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

圖7.5 返回商戶頁(yè)面

圖7.6 用戶收到微信通知

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

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

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

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

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

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

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