微信支付詳細開發步驟(公衆號支付及掃碼支付)

微信支付是集成在微信客戶端的支付功能,用戶能夠經過手機完成快速的支付流程。微信支付以綁定銀行卡的快捷支付爲基礎,向用戶提供安全、快捷、高效的支付服務。php

  • 公衆號支付
  • APP支付
  • 掃碼支付
  • 刷卡支付
  • H5支付
  • 小程序支付

(本文檔主要介紹公衆號支付和掃碼支付)html

注:微信公衆號目前必須是服務認證號,且開通微信支付功能。公衆號對應的商戶號也必須開通支付功能。前端

1、公衆號支付小程序

公衆號支付是用戶在微信中打開商戶的H5頁面,商戶在H5頁面經過調用微信支付提供的JSAPI接口調起微信支付模塊完成支付。應用場景有:api

  • 用戶在微信公衆帳號內進入商家公衆號,打開某個主頁面,完成支付
  • 用戶的好友在朋友圈、聊天窗口等分享商家頁面鏈接,用戶點擊連接打開商家頁面,完成支付
  • 將商戶頁面轉換成二維碼,用戶掃描二維碼後在微信瀏覽器中打開頁面後完成支付

1.  設置JSSDK接口調用域名瀏覽器

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。  安全

2.  設置受權域名微信

開發公衆號支付時,在統一下單接口中要求必傳用戶openid,而獲取openid則須要您在公衆平臺設置獲取openid的域名,只有被設置過的域名纔是一個有效的獲取openid的域名,不然將獲取失敗。以下圖:app

 

3.  設置支付目錄微信公衆平臺

請確保實際支付時的請求目錄與後臺配置的目錄一致,不然將沒法成功喚起微信支付。

  在微信商戶平臺(pay.weixin.qq.com)設置您的公衆號支付支付目錄,設置路徑:商戶平臺-->產品中心-->開發配置,以下圖所示。公衆號支付在請求支付的時候會校驗請求來源是否有在商戶平臺作了配置,因此必須確保支付目錄已經正確的被配置,不然將驗證失敗,請求支付不成功。

注意:這三個地方的域名需使用字母、數字及「-」的組合,不支持IP地址、端口號及短鏈域名,且填寫的域名須經過ICP備案的驗證。

4.   設置支付密鑰app_key

點擊賬戶中心——API安全——設置API密鑰(用於支付是的驗籤)

5.   獲取openid

  因爲openid必須爲當前用戶在當前支付公衆號內的身份標識,因此在智慧校園項目中採起實時獲取的方式得到。

  步驟一:用戶贊成受權,獲取code

  訪問如下連接得到帶code參數的Url:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

  參數說明

參數

是否必須

說明

appid

公衆號的惟一標識

redirect_uri

受權後重定向的回調連接地址,請使用urlencode對連接進行處理

response_type

返回類型,請填寫code

scope

應用受權做用域,snsapi_base(不彈出受權頁面,直接跳轉,只能獲取用戶openid),snsapi_userinfo (彈出受權頁面,可經過openid拿到暱稱、性別、所在地。而且,即便在未關注的狀況下,只要用戶受權,也能獲取其信息)

state

重定向後會帶上state參數,開發者能夠填寫a-zA-Z0-9的參數值,最多128字節

#wechat_redirect

不管直接打開仍是作頁面302重定向時候,必須帶此參數

注:回調連接必定要urlencode,否則識別不出

  步驟二:經過code換取網頁受權access_token

  首先請注意,這裏經過code換取的是一個特殊的網頁受權access_token,與基礎支持中的access_token(該access_token用於調用其餘接口)不一樣。公衆號可經過下述接口來獲取網頁受權access_token。若是網頁受權的做用域爲snsapi_base,則本步驟中獲取到網頁受權access_token的同時,也獲取到了openid,snsapi_base式的網頁受權流程即到此爲止。

  獲取code後,請求如下連接獲取access_token:https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

  參數說明

參數

是否必須

說明

appid

公衆號的惟一標識

secret

公衆號的appsecret

code

填寫第一步獲取的code參數

grant_type

填寫爲authorization_code

  返回JSON數據包以下:

{
   "access_token":"ACCESS_TOKEN",
   "expires_in":7200,
   "refresh_token":"REFRESH_TOKEN",
   "openid":"OPENID",
   "scope":"SCOPE",
   "unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL" 
}

  附:關於網頁受權access_token和普通access_token的區別

  一、微信網頁受權是經過OAuth2.0機制實現的,在用戶受權給公衆號後,公衆號能夠獲取到一個網頁受權特有的接口調用憑證(網頁受權access_token),經過網頁受權access_token能夠進行受權後接口調用,如獲取用戶基本信息;

  二、其餘微信接口,如發微信消息接口,須要經過基礎支持中的「獲取access_token」接口(https://api.weixin.qq.com/cgi-bin/token)來獲取到的普通access_token調用。

-----------------------------上述5個步驟都爲支付的準備步驟。-----------------------------

  支付業務流程及步驟以下圖:

 

6.   微信內H5調起支付

  步驟一:後臺統一下單獲取jsapi支付參數

  請求地址:https://api.mch.weixin.qq.com/pay/unifiedorder

  請求參數:   appid(公衆帳號ID),

mch_id(商戶號),

device_info(設備號),

nonce_str(隨機字符串),

sign(簽名),

sign_type(簽名類型),

body(商品描述) ,

detail(商品詳情),

attach(附加數據),

out_trade_no(商戶訂單號),

fee_type(標價幣種),

total_fee(標價金額),

spbill_create_ip(終端IP),

time_start(交易起始時間),

time_expire(交易結束時間),

notify_url(支付回調地址),

trade_type(交易類型),

product_id(商品ID),

opened(用戶標識)

   注:參數值用XML轉義便可,CDATA標籤用於說明數據不被XML解析器解析。

   具體下單過程可參照微信支付Demo:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1

  當請求成功,返回的XML中return_code 和result_code都爲SUCCESS時會返回以下:

<xml>
   <return_code><![CDATA[SUCCESS]]></return_code>
   <return_msg><![CDATA[OK]]></return_msg>
   <appid><![CDATA[wx3556f3b4523gf12r]]></appid>
   <mch_id><![CDATA[10000100]]></mch_id>
   <nonce_str><![CDATA[jfjsdh47fin0jdnv]]></nonce_str>
   <openid><![CDATA[oECxywCpJW8G-ktn3lwZ7MR4Cx2Q]]></openid>
   <sign><![CDATA[8SDVCNKDF89W32SDKCSAA0S32JKSDJJL]]></sign>
   <result_code><![CDATA[SUCCESS]]></result_code>
   <prepay_id><![CDATA[wx201801041172356eidnvnd9qk398324745]]></prepay_id>
   <trade_type><![CDATA[JSAPI]]></trade_type>
</xml>

  步驟二:H5發起微信支付

  在微信瀏覽器裏面打開H5網頁中執行JS調起支付。接口輸入輸出數據格式爲JSON。

  注意:WeixinJSBridge內置對象在其餘瀏覽器中無效,參數名區分大小,大小寫錯誤簽名驗證會失敗。

引用js:http://res.wx.qq.com/open/js/jweixin-1.0.0.js

  調用支付js以下:

function onBridgeReady(){
   WeixinJSBridge.invoke(
       'getBrandWCPayRequest', {
           "appId":"wx2421b1c4370ec43b",     //公衆號名稱,由商戶傳入     
           "timeStamp":"1395712654",         //時間戳,自1970年以來的秒數     
           "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
           "package":"prepay_id=u802345jgfjsdfgsdg888",     
           "signType":"MD5",         //微信簽名方式:     
           "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 
       },
       function(res){     
           if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判斷前端返回,微信團隊鄭重提示:res.err_msg將在用戶支付成功後返回    ok,但並不保證它絕對可靠。 
       }
   ); 
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

  支付完成後,微信會將訂單參數會以XML方式發送給商戶系統回調地址,商戶在回調地址接收參數並作相應處理。

  回調的XML格式爲:

<xml>
  <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
  <attach><![CDATA[支付測試]]></attach>
  <bank_type><![CDATA[CFT]]></bank_type>
  <fee_type><![CDATA[CNY]]></fee_type>
  <is_subscribe><![CDATA[Y]]></is_subscribe>
  <mch_id><![CDATA[10000100]]></mch_id>
  <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str>
  <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid>
  <out_trade_no><![CDATA[1409811653]]></out_trade_no>
  <result_code><![CDATA[SUCCESS]]></result_code>
  <return_code><![CDATA[SUCCESS]]></return_code>
  <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign>
  <sub_mch_id><![CDATA[10000100]]></sub_mch_id>
  <time_end><![CDATA[20140903131540]]></time_end>
  <total_fee>1</total_fee>
  <trade_type><![CDATA[JSAPI]]></trade_type>
  <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id>
</xml>

推薦技術文檔:

1.https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_1

2.https://wenku.baidu.com/view/cebde8a764ce0508763231126edb6f1aff007185.html?re=view

 

2、掃碼支付

  掃碼支付可分爲兩種模式,商戶根據支付場景選擇相應模式。

  【模式一】:

  商戶後臺系統根據微信支付規則連接生成二維碼,連接中帶固定參數productid(可定義爲產品標識或訂單號)。用戶掃碼後,微信支付系統將productid和用戶惟一標識(openid)回調商戶後臺系統(須要設置支付回調URL),商戶後臺系統根據productid生成支付交易,最後微信支付系統發起用戶支付流程。

  商戶支付回調URL設置指引:進入商戶平臺-->產品中心-->開發配置,進行配置和修改,以下圖所示。

  【模式二】:

  商戶後臺系統調用微信支付【統一下單API】生成預付交易,將接口返回的連接生成二維碼,用戶掃碼後輸入密碼完成支付交易。注意:該模式的預付單有效期爲2小時,過時後沒法支付,不依賴設置的回調支付URL。

  流程圖:

  

  業務流程說明:

(1)商戶後臺系統根據用戶選購的商品生成訂單。

(2)用戶確認支付後調用微信支付【統一下單API】生成預支付交易;

(3)微信支付系統收到請求後生成預支付交易單,並返回交易會話的二維碼連接code_url。

(4)商戶後臺系統根據返回的code_url生成二維碼。

(5)用戶打開微信「掃一掃」掃描二維碼,微信客戶端將掃碼內容發送到微信支付系統。

(6)微信支付系統收到客戶端請求,驗證連接有效性後發起用戶支付,要求用戶受權。

(7)用戶在微信客戶端輸入密碼,確認支付後,微信客戶端提交受權。

(8)微信支付系統根據用戶受權完成支付交易。

(9)微信支付系統完成支付交易後給微信客戶端返回交易結果,並將交易結果經過短信、微信消息提示用戶。微信客戶端展現支付交易結果頁面。

(10)微信支付系統經過發送異步消息通知商戶後臺系統支付結果。商戶後臺系統需回覆接收狀況,通知微信後臺系統再也不發送該單的支付通知。

(11)未收到支付通知的狀況,商戶後臺系統調用【查詢訂單API】。

(12)商戶確認訂單已支付後給用戶發貨。

  附:

  前端頁面代碼:

//前端頁面
<img src=" MakeQRCode?code_url=@code_url" alt="二維碼"/>

   C#生成二維碼後臺代碼:

    //生成二維碼方法  
     public FileResult MakeQRCode(string code_url)
        {
            if (string.IsNullOrEmpty(code_url))
                throw new ArgumentException("code_url");
            //初始化二維碼生成工具
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
            qrCodeEncoder.QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE;
            qrCodeEncoder.QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.M;
            qrCodeEncoder.QRCodeVersion = 0;
            qrCodeEncoder.QRCodeScale = 4;
            //將字符串生成二維碼圖片
            Bitmap image = qrCodeEncoder.Encode(code_url, Encoding.Default);
            //保存爲PNG到內存流  
            MemoryStream ms = new MemoryStream();
            image.Save(ms, ImageFormat.Jpeg);
            return File(ms.ToArray(), "image/jpeg");
        }

  推薦技術文檔:

  1. https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1
  2. http://www.cnblogs.com/vinsonLu/p/5166214.html

(本文章是我的開發實踐總結所寫,請你們多多指教。碼字不容易,轉載請註明出處。謝謝!)

相關文章
相關標籤/搜索