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+iview分页组件的封装
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
Vue组件生命周期运行原理解析
Nov 25 Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
vue实力踩坑之push当前页无效
Apr 10 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
lib.utf.js
2007/08/21 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
使用JS进行目录上传(相当于批量上传)
2010/12/05 Javascript
THREE.JS入门教程(1)THREE.JS使用前了解
2013/01/24 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
美国奢侈品购物平台:Orchard Mile
2018/05/02 全球购物
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
公司营业员的工作总结自我评价
2013/10/05 职场文书
农救科工作职责
2013/11/27 职场文书
中学教师教育感言
2014/02/21 职场文书
广告词串烧
2014/03/19 职场文书
社区平安建设方案
2014/05/25 职场文书
交通违章检讨书
2014/09/21 职场文书
2015年团支部工作总结
2015/04/03 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
不同意离婚代理词
2015/05/23 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
Go标准容器之Ring的使用说明
2021/05/05 Golang