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 相关文章推荐
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
梳理一下vue中的生命周期
Dec 30 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue实现简易计算器功能
Jan 20 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
JS的replace方法详细介绍
2012/11/09 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
zTree实现节点修改的实时刷新功能
2017/03/20 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
vue实现分页加载效果
2019/12/24 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
布同自制Python函数帮助查询小工具
2011/03/13 Python
Python os模块介绍
2014/11/30 Python
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python实现识别相似图片小结
2016/02/22 Python
Python构建网页爬虫原理分析
2017/12/19 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
幼儿园教育教学反思
2014/01/31 职场文书
教育学习自我评价
2014/02/03 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
农民工讨薪标语
2014/06/26 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2016春季运动会前导词
2015/11/25 职场文书
《社戏》教学反思
2016/02/22 职场文书
教你用python控制安卓手机
2021/05/13 Python
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
MySQL的意向共享锁、意向排它锁和死锁
2022/07/15 MySQL