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 相关文章推荐
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue实现广告栏上下滚动效果
Nov 26 Vue.js
vuex的数据渲染与修改浅析
Nov 26 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
Vue和Flask通信的实现
May 19 Vue.js
SSM VUE Axios详解
Oct 05 Vue.js
详解Vue router路由
Nov 20 Vue.js
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
学习ExtJS form布局
2009/10/08 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
js传参数受特殊字符影响错误的解决方法
2013/10/21 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript多线程详解
2015/08/12 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
微信小程序开发经验总结(推荐)
2017/01/11 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
JavaScript实现的文本框placeholder提示文字功能示例
2018/07/25 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
使用vue自定义指令开发表单验证插件validate.js
2019/05/23 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
python感知机实现代码
2019/01/18 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
Python用5行代码实现批量抠图的示例代码
2020/04/14 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
2014年高中班主任工作总结
2014/11/08 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
女性励志书籍推荐
2019/08/19 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python