vue pc端web页面微信支付和支付宝支付

本文链接： https://blog.csdn.net/qq_36710522/article/details/90480914

业务场景介绍：

pc端支持微信支付 [ Native支付官方API] && 支付宝支付 [电脑网站支付官方API ]

订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）

一、vue中pc端微信支付怎么去玩？

这里大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有些情况也可以前端去对接订单生成之后由前端自己生成二维码，这种情况比较少）展示在终端供用户扫码即可：
1.二维码展现窗口
在这里插入图片描述
2.请求后端的支付二维码接口

3.唤起二维码支付页面

4.扫码完成支付即可，后续完成支付就是项目中的业务逻辑了。至此微信PC端支付已完成，前端的工作量是不是很少~

二、vue中pc端支付宝支付怎么玩？

上述微信支付这么简单，同理pc端的支付宝支付也很简单，因为业务层与支付宝做订单交互还是后端处理的，所以前端的工作量就相当简单。
1.这里需要一个承载页面，来承载后端与支付宝完成交互之后，请求后端支付接口会返回一个from表单，前端只需要负责把它展现给用户扫码即可，承接页面如下（为了方便ctrl+c这里贴代码）：

<template>
    <div v-html="html"></div>
</template>

<script>
  import { videoPay } from '@/api/pay.js'
  export default {
    data(){
      return{
        html:''
      }
    },
    methods:{
      fetchVideoPay(){
        let param={
          orderId: this.$route.query.orderId
        };
        videoPay(param).then( res => {
          this.html = res.data;
          this.$nextTick(() => {
            document.forms[0].submit()
          })
        })
      }
    },
    mounted(){
      this.fetchVideoPay()
    }
  }
</script>

2.到达承载页面之后会出来支付宝的二维码页面：
在这里插入图片描述
3.用户扫码完成之后，进入支付宝倒计时页面后续就是业务逻辑处理了，至此支付宝PC支付也已经完成。

移动端H5支付（微信+支付宝）点击查看