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

业务场景介绍：

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

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

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

这里大部分工做量是后端的事情，订单的生成由后端去和腾讯对接的，前端只须要负责将后端返回来的支付二维码（由后端生成的，有些状况也能够前端去对接订单生成以后由前端本身生成二维码，这种状况比较少）展现在终端供用户扫码便可：
1.二维码展示窗口

2.请求后端的支付二维码接口

3.唤起二维码支付页面

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

2、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支付（微信+支付宝）点击查看