uni-app微信支付,支付宝支付(二)

1,303 阅读1分钟

接上篇,支付宝支付相对繁琐一些,需要考虑微信中打开跳转到浏览器这一种情况。

二、支付宝支付

(1)微信中支付宝跳转到浏览器中唤起支付(微信->浏览器->支付宝客户端)

首先,官方提供了一套demo,详见opendocs.alipay.com/open/203/10… 1629123434(1).png 具体流程:
1.下载demo,将官方提供的demo中的pay.htm和ap.js放到你项目中的根目录下
2.发起支付请求(通过请求后端接口返回form表单,然后进行拼接)
注意:此代码逻辑已包含微信中打开支付链接与浏览器中打开的逻辑

if(this.isWeixin){
    //判断是否是从微信内置浏览器中打开
    uni.request({
        url: `${url_config}/pay/order`, //仅为示例,并非真实接口地址。
            data:data,
        header: {
                     'content-type': 'application/json'
        },
            method:'POST',
            success: (res) => {
                //将接口返回的Form表单显示到页面
                       document.querySelector('body').innerHTML = res.data.form;
                    document.forms[0].acceptCharset='utf-8';
                    //调用支付宝提供的方法
                    var queryParam = '';
                            Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {
                            queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);
                            });
                    var gotoUrl = document.querySelector("form").getAttribute('action') + '&' +  queryParam;
                            _AP.pay(gotoUrl);
            }
    })
    }else{
        uni.request({
            url: `${url_config}/pay/`, //仅为示例,并非真实接口地址。
                data:data,
            header: {
                         'content-type': 'application/json'
            },
                method:'POST',
                success: (res) => {
                        //将接口返回的Form表单显示到页面
                        document.querySelector('body').innerHTML = res.data.form;
                        //调用submit 方法
                        let form = document.forms[0];
                        form.submit();
                }
        })
    }

(2)花呗分期

花呗分期就是在支付宝分期的逻辑代码上多传一个分期期数与分期金额即可。