vue项目支付功能代码详解


Posted in Vue.js onFebruary 18, 2022

1.支付宝方式:

支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构),

提交form就可以调用支付宝支付

代码:

//  alipayWap: 后台接口返回的form 片段
<div v-html="alipayWap" ref="alipayWap"></div>
methods: {
	toAlipay () {
		this.$axios.get('xxx').then (res = > {
			this.alipayWap = res;
             // 等待dom更新, 等页面中有这个form表单了
			this.$nextTick(() => {
            	this.$refs.alipayWap.children[0].submit()
          	})
		})
	}
}

vue项目支付功能代码详解

2.微信支付

大部分工作量是后端的事情,订单的生成由后端去和腾讯对接的,前端只需要负责将后端返回来的支付二维码(由后端生成的,有些情况也可以前端去对接订单生成之后由前端自己生成二维码,这种情况比较少)展示在终端供用户扫码即可

需要自己根据后台返回的url生成二维码页面,如图所示

vue项目支付功能代码详解

二维码展示代码:

vue项目支付功能代码详解

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

vue项目支付功能代码详解

最后,扫码支付后,即可完成。

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

Vue.js 相关文章推荐
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
分享一个vue实现的记事本功能案例
Apr 11 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue elementUI批量上传文件
Apr 26 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
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 #Vue.js
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
详解Vue的列表渲染
Nov 20 #Vue.js
You might like
Godaddy空间Zend Optimizer升级方法
2010/05/10 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
php文件上传类的分享
2017/07/06 PHP
JS链式调用的实现方法
2013/03/07 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
查看图片(前进后退)功能实现js代码
2013/04/24 Javascript
Javascript alert消息换行的方法
2013/08/07 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
python求素数示例分享
2014/02/16 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
Python多线程的退出控制实现
2020/08/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
利用SVG和CSS3来实现一个炫酷的边框动画
2015/07/22 HTML / CSS
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
数学专业推荐信范文
2013/11/21 职场文书
同学聚会老师邀请函
2014/01/28 职场文书
国培教师自我鉴定
2014/02/12 职场文书
留学推荐信(中英文版)
2015/03/26 职场文书
被委托人身份证明
2015/08/07 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Python中time标准库的使用教程
2022/04/13 Python
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
了解MySQL查询语句执行过程(5大组件)
2022/08/14 MySQL