一、功能需求

手機瀏覽器頁面發(fā)起產品購買請求，調起微信支付，支付完成后返回購買頁面展示支付結果。(手機瀏覽器->微信app->手機瀏覽器)

二、關鍵思路詳解

微信參考文檔 (http://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4)

其實微信文檔已經把流程步驟列出來了，按照步驟就可以實現了,下面給出一些關鍵步驟及注意事項

1、用戶點擊頁面購買按鈕，向自己服務器后端接口發(fā)起購買請求并調起微信支付。這里需要注意的是，想要調起微信支付，需要后端向微信發(fā)起統(tǒng)一下單，成功后返回結果有mweb_url字段，該字段的值是一個URL，為支付跳轉鏈接。

請求跳轉

• 后端接口直接跳轉,后端發(fā)起統(tǒng)一下單獲取mweburl后直接redirect

• 前端頁面用js跳轉,后端將mweburl返回給前端，前端用js跳轉

functionpay(){         $.ajax({               type:"POST",//方法類型               dataType:"json",//預期服務器返回的數據類型               url:"www.example.com/pay.php",//url               data:{'oid':oid},                    success:function(mweb_url){                        window.location.href=mweb_url//獲取后跳轉},                    error :function(){alert("異常");}});}

回調頁面     后端發(fā)起統(tǒng)一下單獲得的mweburl，需要在其后面拼接redirecturl參數,并對redirect_url進行urlencode處理，來指定回調頁面，如果未指定會報商家參數格式有誤。

<?php/**  *后端支付接口(以下代碼省略了部分只給出大概邏輯不能直接使用)  *有#####的注釋需要留意  **/use ....classpay{/**     * 預支付     */publicfunctionprepay(){//微信支付類        $wxFactory =newWxFactory();//統(tǒng)一下單所需參數(根據自己實際需求定義)        $body ='購買商品';        $notifyUrl ='http://www.example.com/Callback.php';//微信支付異步回調        $tradeType ='MWEB';        $amount =1;        $time =time();        $out_trade_no = $time.sprintf('%08s',mt_rand(10,999999));if( $amount <=0){returnnewApiResponse(['code'=>-1,'msg'=>'支付金額不得小于0']);//json類}try{            $payment = $wxFactory->getObj('wxpayment');//調用統(tǒng)一下單接口//參數            $params =array('trade_type'=>$tradeType,'body'=>$body,'notify_url'=>$notifyUrl,'out_trade_no'=>$out_trade_no,'total_fee'=>$amount,//                 'spbill_create_ip'=>$_SERVER['REMOTE_ADDR'],  #####剛開始使用該方法獲取ip結果報錯，后面采用下面方法獲取IP，得以解決'spbill_create_ip'=>$this->get_client_ip());//預支付返回結果            $result = $payment->prepay($params);            $redirect_url  ='http://www.example.com/show.php?';// #####回調地址，該地址需要是商戶號后臺提交的授權域名，如果不是請求跳轉是需要偽造referer,不建議偽造.            $redirect_url .='order='.$out_trade_no;//####回調所需參數支付id，            $mweb_url = $result['mweb_url'].'&redirect_url='.urlencode($redirect_url);//####拼接回調地址//返回mweb_urlreturnnewApiResponse(['code'=>0,'mweb_url'=>$data]);}catch( WxServerException $e ){//支付不成功會以異常形式返回returnnewApiResponse(['code'=>-1,'msg'=>$e->getMessage()]);}}//獲取IP地址privatefunctionget_client_ip(){if(getenv('HTTP_CLIENT_IP')&&strcasecmp(getenv('HTTP_CLIENT_IP'),'unknown')){            $ip =getenv('HTTP_CLIENT_IP');}elseif(getenv('HTTP_X_FORWARDED_FOR')&&strcasecmp(getenv('HTTP_X_FORWARDED_FOR'),'unknown')){            $ip =getenv('HTTP_X_FORWARDED_FOR');}elseif(getenv('REMOTE_ADDR')&&strcasecmp(getenv('REMOTE_ADDR'),'unknown')){            $ip =getenv('REMOTE_ADDR');}elseif(isset($_SERVER['REMOTE_ADDR'])&& $_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],'unknown')){            $ip = $_SERVER['REMOTE_ADDR'];}returnpreg_match('/[d.]{7,15}/', $ip, $matches )? $matches [0]:'';}}

2、用戶在微信中間頁面操作后(支付或取消支付)會回跳到我們指定的回調地址，并帶上我們拼裝的參數。根據URL中的參數，前端頁面請求后端接口查詢支付結果(服務器根據支付訂單id向微信發(fā)起查詢)，然后展示給用戶。（根據微信文檔，由于設置redirecturl后,回跳指定頁面的操作可能發(fā)生在：1,微信支付中間頁調起微信收銀臺后超過5秒 2,用戶點擊“取消支付“或支付完成后點“完成”按鈕。因此無法保證頁面回跳時，支付流程已結束，所以商戶設置的redirecturl地址不能自動執(zhí)行查單操作，應讓用戶去點擊按鈕觸發(fā)查單操作。回跳頁面展示效果可參考下圖）

3、微信支付異步通知回調地址。統(tǒng)一下單成功后，微信會異步回調，統(tǒng)一下單時參數notify_url所填地址，該異步回調是用于通知服務器端，用戶所生成的預支付訂單是否支付完成。在做該功能的時候發(fā)現微信并沒有異步調用該接口，所以第2點提到的需要主動去調用后端接口查詢就很有必要，如果擔心主動調用查詢出錯，還可以寫一個后端腳本定時去查詢用戶預支付訂單情況。

三、總結

1、參照微信文檔，文檔中給出了詳細的流程步驟。

2、mweburl后必須拼接redirecturl，并且redirect_url必須授權，否則會報錯

3、支付流程結束跳轉回頁面，展示支付結果，需要讓用戶主動觸發(fā)查單操作。

原文地址 ：https://cloud.tencent.com/developer/article/1467638

關于我們：

藍暢信息技術有限公司成功為多家世界財富500強企業(yè)以及其他著名品牌提供優(yōu)質服務，是您靠譜的互聯(lián)網開發(fā)供應商。

服務客戶遍及北京、上海、杭州、深圳、廣州、天津、青島、南京、寧波、蘇州、無錫、廈門、重慶、西安等大中型城市及地區(qū)    為您提供：H5開發(fā)，H5設計，H5外包，微信開發(fā)外包，H5商城開發(fā)，小程序商城開發(fā)，網站開發(fā)外包，H5游戲開發(fā)，小程序開發(fā)外包，小程序設計、APP開發(fā)外包，UI設計，SEO優(yōu)化，視頻后期制作等優(yōu)質服務