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

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

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

圖7.1 商戶自定義消息界面

圖7.2 商戶網(wǎng)頁下單

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

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

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

圖7.4 用戶支付成功提示

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

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

圖7.5 返回商戶頁面提示

圖7.6 用戶收到發(fā)貨微信通知

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

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

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

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

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

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

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