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.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
vue.js 使用原生js实现轮播图
Apr 26 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魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
php打包网站并在线压缩为zip
2016/02/13 PHP
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
js实现文件上传表单域美化特效
2015/11/02 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
巧用canvas
2017/01/21 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Python实现的异步代理爬虫及代理池
2017/03/17 Python
Python切片操作深入详解
2018/07/27 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
写自荐信的七个技巧
2013/10/15 职场文书
演讲稿开场白
2014/01/13 职场文书
我的大学四年规划书范文2014
2014/09/26 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
python pandas 解析(读取、写入)CSV 文件的操作方法
2022/12/24 Python