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

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

1、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();

 

2、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;

3、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);
方案：設置定時器，去調用一個接口，查詢支付狀態，如果支付成功。。。如果支付失敗。。。。

4、h5接入微信支付。