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接入微信支付。