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中使用vue-awesome-swiper
Jan 04 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
vue中data改变后让视图同步更新的方法
Mar 29 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 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实现简单洗牌算法
2013/06/18 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
微信API接口大全
2015/04/15 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
pyqt5中动画的使用详解
2020/04/01 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
基层工作经历证明
2014/01/13 职场文书
小学生自我评价范文
2014/01/25 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
护理学专业求职信
2014/06/29 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python