前端 微信支付、支付宝支付

2020-11-27  本文已影响0人  jinxyyy

微信支付

1.pc扫码支付:

后端返回支付地址,前端引用生成code的组件,将地址生成为二维码以供用户扫码,因为没有支付回调地址的配置,需要前端轮询查询支付状态,以便判断是否支付成功。

2.微信外(h5支付):

后端返回支付地址,前端打开支付地址,就可唤醒微信app进行支付,前端可以在后端返回的支付地址后拼接回调地址 &redirect_url='http://www.baidu.com' (地址需要encodeURIComponent()加密) 此回调地址不分成功和失败,所以需要自己轮询查询

3.微信内 (公众号支付):

需要先在微信支付平台配置支付地址,最高上限为5个;支付地址若为 192.168.0.1:1888/#/store/pay, 则支付地址为192.168.0.1:1888/#/store
需要先引入微信sdk: const wx = require('weixin-js-sdk')
需要先进行先公众号授权登录,得到openId, 调用后台接口,得到timestamp,nonceStr,signature,然后调用微信sdk方法。
总结就为:先调用wx.config,在config里的jsApiList中添加‘chooseWXPay',然后在wx.ready中调用wx.chooseWXPay传入 appId,timestamp,nonceStr,package,signType,paySign。微信支付有success回调,其中res.errMsg = 'chooseWXPay:ok'即为支付成功,但微信不保证绝对成功,所以需要轮询查询是否成功。

wx.config({
    debug: false,
    appId: wxAppid, // 和获取Ticke的必须一样------必填,公众号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature, // 必填,签名,见附录1
    // 需要分享的列表项:发送给朋友,分享到朋友圈,分享到QQ,分享到QQ空间
    jsApiList: [
        'chooseWXPay'
    ]
})
wx.error(function(res) {
    console.log(res)
})
wx.ready(() => {
    let that = this
    offlineClasspay(data).then(res => {
        if(res.status === 0) {
            if(res.result.channel == 'weixinforjsapi') {
                let result = res.result.prepay;
                let orderNumber = res.result.order_num
                // 微信公众号支付
                wx.chooseWXPay({
                    appId: result.appId,
                    timestamp: result.timeStamp,
                    nonceStr: result.nonceStr,
                    package: result.package,
                    signType: result.signType,
                    paySign: result.paySign,
                    success(res) {
                        console.log(res)
                        if (res.errMsg === 'chooseWXPay:ok') {
                            Indicator.open('Loading...')
                            let i = 0
                            let payTime = setInterval(() => {
                                i++
                                if (i > 10) {
                                    clearInterval(payTime)
                                    Indicator.close()
                                    setTimeout(that.$router.push({path: `/activity/payStatus/2`}), 3000)
                                    return false
                                } else {
                                    getOrderInfo(orderNumber).then((res) => {
                                        if (res.status === ERR_OK) {
                                            if(res.result.order.status == 1) {
                                              Indicator.close()
                                              clearInterval(payTime)
                                              that.$router.push({path: `/activity/payStatus/1`})
                                            }
                                        } else {

                                        }
                                    })
                                }
                            }, 1000)
                        }
                    },
                    cancel() {
                        Toast('取消支付~')
                    },
                    error(res) {
                        setTimeout(that.$router.push({path: `/activity/payStatus/2`}), 3000)
                    }
                })
            }
        }
    })
})

支付宝支付

1.pc支付:

后端返回一个form表单,但前端直接进行赋值到html中,直接提交即可;但是需要1秒后删除该表单,防止第二次用户继续支付,调用的还为上次的表单。后端可以配支付成功回调地址。

const div = document.createElement('div');
div.innerHTML = res.result.response
document.body.appendChild(div);
document.forms[0].submit();
setTimeout(()=> {
    div.remove()
}, 1000)

2.手机支付:

与pc支付逻辑相同。

上一篇下一篇

猜你喜欢

热点阅读