vue项目中的支付功能实现(微信支付和支付宝支付)


Posted in Vue.js onFebruary 18, 2022

项目中常见的支付方式    

  • 支付宝支付   
  • 微信支付   
  • 余额支付(也需要支付宝或微信充值)

注意:本文仅从前端角度展开讲解

支付宝支付

项目难点:

页面是h5网页,用支付宝支付必须得到支付宝授权,调用支付宝的api。

支付宝支付的一般过程是:

    调用订单接口,获得订单号,支付金额等。
    传递订单号,金额 至预支付接口
    后台会返回来一个form,然后提交form自动跳转到支付宝支付页面

支付过程:

    下图为为接口文档,支付接口

vue项目中的支付功能实现(微信支付和支付宝支付)

vue项目中的支付功能实现(微信支付和支付宝支付)

    当我们选中支付宝,radio=1;
    当我们点击支付按钮,pay()方法执行
    此时我们调用后端支付接口,传入接口文档要求字段,订单号,金额等。
    后台回传给我们一个{code:201,data:""};
    此时我们把form注入到我们页面中,让form表单提交,跳转到支付宝页面

topay(){
      switch(this.radio){
        case '3':
        this.yuer();
        break;
        case '1':
        this.zhifubao();
        case '0':
        this.getWechatCode();
      }
    },
   zhifubao(){
     payByZhifubao(
       {
         OutTradeNo:'Oct20200909095646265303127',//商户订单号,商户网站订单系统中唯一订单号,必填 。需要保证商户端唯一。
          Subject: "手机网站支付测试",//主题
          ProductCode: "QUICK_WAP_WAY",
          body: "手机网站支付描述信息",//商品描述,可空
          TotalAmount: 20 //付款金额,必填        }
     ).then(res=>{
       console.log(res);
        if (res.code === 201) {
            //将数据存到vuex中
            // this.$store.dispatch('addAliFrom', res.data.data)
            this.html = res.data;
            var form = res.data;
            const div = document.createElement("div");
            div.innerHTML = form; //此处form就是后台返回接收到的数据
            document.body.appendChild(div);
            document.forms[0].submit();
            //return this.$router.push('/aliPay')
          } else {
            return alert(res.data.msg);
          }
     })
    },

微信支付

步骤:
微信支付后台程序员会给你返一个地址,首先我们需要安装qrcodejs2将地址转换成二维码,需要先npm install qrcodejs2
然后需要一个div来存放这个微信二维码,宽高样式各位自己可以去css里写,我在这里还加了一个loading,有需要的也可以自己加

<div id="wechatcode" v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)">
</div>

导入模块

import QRCode from 'qrcodejs2' // 引入qrcode

下面是接口数据获取然后操作二维码

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
    },

这里的`getOrderStatus()方法是为了查询后台支付状态的,如果成功跳转到支付页面,做个If else判断即可

到此这篇关于vue项目中的支付功能实现(微信支付和支付宝支付)的文章就介绍到这了,更多相关vue项目支付内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
解决vue下载后台传过来的乱码流的问题
Dec 05 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
Vue接口封装的完整步骤记录
May 14 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
vue3获取当前路由地址
Feb 18 #Vue.js
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
vue项目支付功能代码详解
Feb 18 #Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 #Vue.js
You might like
PHP自动更新新闻DIY
2006/10/09 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jquery multiSelect 多选下拉框
2010/07/09 Javascript
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
javascript学习笔记(二) js一些基本概念
2012/06/18 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JS随机洗牌算法之数组随机排序
2016/03/23 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
vue filters的使用详解
2018/06/11 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
Vue仿百度搜索功能
2020/12/28 Vue.js
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
对python中的argv和argc使用详解
2018/12/15 Python
django解决订单并发问题【推荐】
2019/07/31 Python
python实现图片插入文字
2019/11/26 Python
深入了解Python 变量作用域
2020/07/24 Python
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
进步之星获奖感言
2014/02/22 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
防溺水主题班会教案
2015/08/12 职场文书