pc端支付

最新推荐文章于 2023-05-18 09:34:53 发布

out-of-reach

最新推荐文章于 2023-05-18 09:34:53 发布

阅读量2.2k

点赞数 4

本文链接：https://blog.csdn.net/weixin_57011137/article/details/116480200

版权

支付流程说明:

https://blog.csdn.net/weixin_43638968/article/details/108476420 vue项目中的支付

https://blog.csdn.net/qq_36710522/article/details/90480914 PC端支付

https://blog.csdn.net/qq_36710522/article/details/90480914 后端代码实现支付流程

支付宝支付

支付宝支付主要是后端实现的，后端会给你一个接口，前端请求接口,把价钱和订单编号等主要信息发给后端接口，后端与支付宝服务器进行交互。如果请求成功后端会返回一个json数据，返回的数据里有一个二维码链接，前端直接window.open打开即可

例如

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G2INsRDw-1620349417335)(屏幕截图 2021-04-20 162232.png)]

{code: 200, success: true, data: {,…}, tip: "请求成功"}
code: 200
data: {,…}
order_no: "20210420101539849101"
qrcode: "https://openapi.alipay.com/gateway.do?alipay_root_cert_sn=687b59193f3f462dd5336e5abf83c5d8_02941eef3187dddf3d3b83462e1dfcf6&alipay_sdk=alipay-sdk-php-2020-04-15&app_cert_sn=593f335b383ce251068bdddf45064356&app_id=2021002116661448&biz_content=%7B%22out_trade_no%22%3A20210420101539849101%2C%22product_code%22%3A%22FAST_INSTANT_TRADE_PAY%22%2C%22total_amount%22%3A%220.01%22%2C%22subject%22%3A%22%E5%85%85%E5%80%BC+0.01%E5%85%83%22%7D&charset=utf-8&format=json&method=alipay.trade.page.pay&notify_url=https%3A%2F%2Fent.udipt.com%2Fapi%2Fpay%2Fnotify%2Falipay&sign=IWJElNxISf3DNyHFblkNcHhSb%2B369BuZJCLpl%2BR%2BWiTNkhpfL%2BpSrZIgmEqynNW9tfyfPC5mtYjCGsjTSs8yu350MOSGCoxFMwWaH13MAKCxRejZH9hLwz%2B5DtTva8maLT7470IogcRUo%2B9WbKVgpKxA5JGb%2FVTGjY%2Bv9nohyWd0jNnU3tJOrdhGMMpJBVq5AQYsmyP5P6%2BZ3539gzzK82ek1YLT01HC%2Fh4liQU9faEcBrjpsoHKIF4zww27s2bW9V02ctz%2FcuiTBT6%2FASaL7Sn8PBGoTtzwdLl2wW9Bb4kXTz7UsJE7xL2%2FHiNx%2Fh%2BzyF%2Bhpa6Cao0YwtrXYsLT1g%3D%3D&sign_type=RSA2&timestamp=2021-04-20+15%3A00%3A46&version=1.0"
success: true
tip: "请求成功"

我们拿到数据后主要是qrcode属性，拿到该属性后通过

window.open('about:blank')

创建并跳转一个地址为about:blank的页面执行qrcode的路径请求，会显示支付宝的支付页面，是个二维码。用户打开支付宝app即可进行扫码支付。

这时有个问题,**前端怎么知道用户是否支付完成？**完成后前端要回调告诉用户已完成支付

在用户支付完之后，后台人员可以拿到支付成功结果，返给前台人员，前端人员可以用定时器不断去调接口查询是否已支付，在这里我们可以用生命周期来做轮询，在跳出之后需要销毁

核心代码:

     //定时器不断获取支付状态，看是否支付完成
      getOrderStatus() {
        const _this = this
        let i = 0
        const state = setInterval(function () {
          if (i > 400) {
            clearInterval(state)
          }
          //支付状态接口-传入订单编号
          pOrderStatus(_this.info.orderNo).then((res) => {
            if (parseInt(res.code) === 200 && res.data === true) {
              _this.$requestSuccess('付款成功')
              _this.$root.visible = false
              clearInterval(state)
            }
          }).catch((err) => {
            console.log(err)
            _this.$requestFailed(err)
          })
          i++
        }, 1500)

        this.state = state
      },

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kkGdmHwo-1620349417341)(屏幕截图 2021-04-20 164007.png)]

微信支付流程

选择微信支付后，进行后端请求，它会返回一个json对象。微信返回的不是二维码,需要咱们自己根据订单号和链接进行生成

例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dO40BMn9-1620349417346)(屏幕截图 2021-04-20 162336.png)]

{code: 200, success: true,…}
code: 200
data: {qrcode: "weixin://wxpay/bizpayurl?pr=BYOldGjzz", order_no: "20210420485356571005"}
order_no: "20210420485356571005"
qrcode: "weixin://wxpay/bizpayurl?pr=BYOldGjzz"
success: true
tip: "请求成功"

order_no:指的是订单号

qrcode:快速响应码

我们拿到这个qrcode,要将其转化为二维码方便用户进行支付，这个时候我们需要用到vue中的插件vue-qr,该插件可生成二维码

具体为

首先先安装该插件

npm install vue-qr --save

安装完成后在我们需要使用的页面进行引入

import VueQr from 'vue-qr';

这个时候必需要在conponents(计算属性中定义该插件)

  components:{
        VueQr
  },

定义好之后在页面该插件为html标签

  <vue-qr :logo-src="logoSrc"//二维码中间显示图片
          :size="191"//大小
          :margin="0"//外边距
          :auto-color="true"//是否自动上色
          :dot-scale="1"
          :text="appSrc"//二维码路径 />
//logo-src和text需要在data里面定义

在data里面定义

logoSrc:"/favicon.ico",//二维码中央图片地址
appSrc:"weixin://wxpay/bizpayurl?pr=E1QrXFAzz"//扫描二维码内容地址

定义好之后在页面就会显示该二维码，因为该二维码是动态的，所以微信支付要结合该appSrc的路径来实现

详见vue生成二维码

核心代码:

getWechatCode() {
Models
.getModel(“wechatpay”)
.get({
orderId:this.orderId
})
.then(res => {
if(res.data.code == 200){
this.wechatPayUrl = res.data.resultData
if(!this.flag){
//重点是这里，其余的是为了我的切换业务逻辑和接口
let wechatcode = new QRCode(‘wechatcode’, {
width: 200,
height: 200,
text: this.wechatPayUrl, // 二维码地址
colorDark: “#000”,
colorLight: “#fff”,
})
}
this.flag = true
this.loading = false
this.isWechatCodeShow = true
}
})
},

在微信扫描支付完之后，后台人员可以拿到支付成功结果，返给前台人员，那么前端人员也要不断去调接口查询是否已支付，在这里我们可以用生命周期来做轮询，在跳出之后需要销毁

mounted() {
        this.getWechatCode()
        //实现轮询
        this.interval = window.setInterval(() => {
        setTimeout(this.getOrderStatus(), 0);
        }, 3000);
        
},
beforeDestroy() {
    //清除轮询   
    clearInterval(this.interval)
    this.interval = null
},

out-of-reach

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
pc端支付

支付流程说明:https://blog.csdn.net/weixin_43638968/article/details/108476420 vue项目中的支付https://blog.csdn.net/qq_36710522/article/details/90480914 PC端支付https://blog.csdn.net/qq_36710522/article/details/90480914 后端代码实现支付流程支付宝支付支付宝支付主要是后端实现的，后端会给你一个接口，前端请求接口
复制链接

扫一扫