PC、h5項目接入第三方支付寶掃碼登陸、掃碼付款

首先介紹一下pc項目接入支付寶掃碼支付。

一、pc、移動接入支付寶掃碼支付。

　　其實這個邏輯很簡單，前端所須要處理的不是不少，後臺會給一個鏈接，前端只須要將要支付的訂單id拼接在這個鏈接上，而後打開跳轉到這個鏈接就行。掃碼支付完以後支付寶會回調到一個前段項目，可是注意這個頁面只是一個回調頁面，並無返回支付成功或者失敗，因此這個頁面處理的時候要注意。

例如：

具體以下：

對於前端都是後臺返回的一個發起支付寶的url（pc端和手機端url不一樣）

（1）pc端新開窗口打開支付寶掃碼支付。window.open(注意ajax內部的攔截現象)

（2）h5瀏覽器。直接 window.location.href =locationurl;

直接能夠發起支付寶app去支付。

（3）支付成功後臺設置成功回跳的url.支付成功頁面。

在url中攜帶一些參數，

經過參數獲取相應的信息好比

total_amount支付總金額

out_trade_no訂單號 等等

能夠去後臺查詢購買狀態

VUE，調取支付寶支付接口，後臺返回form表單

還有一種狀況就是，調取支付寶支付後，後臺返回一個form表單，這個時候前臺須要去提交這個表單，jq的操做不講。Vue中具體的實現方式以下

const div=document.createElement('divform');
                        div.innerHTML=res.data;
                        document.body.appendChild(div);
                        // document.forms[0].acceptCharset='GBK'; //保持與支付寶默認編碼格式一致，若是不一致將會出現：調試錯誤，請回到請求來源地，從新發起請求，錯誤代碼 invalid-signature 錯誤緣由: 驗簽出錯，建議檢查簽名字符串或簽名私鑰與應用公鑰是否匹配
                        document.forms[0].submit();

 

二、pc接入支付寶掃碼登陸

https://docs.open.alipay.com/263/  支付寶官方介入文檔地址。

一樣：前端須要處理的，點擊支付寶登錄的時候，會有一個鏈接，跳轉這個連接，用戶掃碼受權以後，會回調到一個固定頁面，例如：回調到綁定手機號碼頁面，這個頁面後臺會將第三方的登陸所獲取的信息拼接在url上，這個時候咱們須要作的是解析這個url變爲json，這樣更方便使用

Vue中處理這種url

var url     = window.location.href,
                index       = url.lastIndexOf("\?");
                
                // url傳遞的 數據
                var dateStr = encodeURI(url.substring(index+1, url.length)),
                    dateArr = dateStr.split("&");

                var thirdJsonDate       = {};
                dateArr.forEach( (item) => {
                    var dateNew         = item.split("="),
                        key             = dateNew[0];
                    thirdJsonDate[key]  = dateNew[1]
                });
                this.thirdJson  = thirdJsonDate;

三、pc接入微信支付。

（1）用的是使用的是

https://pay.weixin.qq.com/wiki/doc/api/index.html

（2）：商戶後臺系統先調用微信支付的統一下單接口，微信後臺系統返回連接參數code_url，商戶後臺系統將code_url值生成二維碼圖片，用戶使用微信客戶端掃碼後發起支付。

注意：code_url有效期爲2小時，過時後掃碼不能再發起支付。

（3）：前端只需向後臺發ajax請求拿到code_url。

利用基於jquery類庫的 jquery.qrcode.js 的 插件繪製二維碼展現到頁面中。

生成二維碼以後設置定時器去查詢下訂單。訂單支付成功以後。跳轉window.location.href="回調成功的url,支付成功頁面";

generateQRCode("table",300, 300, erweima);
// 查詢接口

timer=setInterval(checkorderinfo, 3000);
方案：設置定時器，去調用一個接口，查詢支付狀態，若是支付成功。。。若是支付失敗。。。。

四、h5接入微信支付。