Vue的H5页面唤起支付宝支付功能


Posted in Javascript onApril 18, 2019

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口)。

触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付。另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面。具体可以根据自身业务,后台写死或者由前端控制。

methods () {
 /**
  * 支付宝支付
  */
 goAlipay () {
  this.$loading.show()
  const data = {
   /* 自身接口所需的一些参数 */
   ...
   amount: this.price,
   /* 支付后支付宝return的url */
   // returnUrl: 'www.baidu.com'
   returnUrl: window.location.origin + window.location.pathname + '?userParams=' + this.userParams
  }
  this.$http(
   this.$apiSetting.alipay,
   data
  ).then(res => {
   this.$loading.hide()
   if (res.data.statusCode === '000000') {
    const div = document.createElement('div')
    /* 此处form就是后台返回接收到的数据 */
    div.innerHTML = res.data.data.alipayInfo
    document.body.appendChild(div)
    document.forms[0].submit()
   }
  }, error => {
   this.$loading.hide()
   console.log(error)
  })
 }
}

总结

以上所述是小编给大家介绍的Vue的H5页面唤起支付宝支付功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JS分页效果示例
Oct 11 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
javascript中caller和callee详解
Aug 10 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
7个好用的JavaScript技巧分享(译)
May 07 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
element中table高度自适应的实现
Oct 21 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
详解Vue中的scoped及穿透方法
Apr 18 #Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 #Javascript
Vue 进阶之路(三)
Apr 18 #Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 #Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 #Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 #Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php的一些小问题
2010/07/03 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
2015/12/14 Javascript
简单学习vue指令directive
2016/11/03 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
Angular4 ElementRef的应用
2018/02/26 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
wxPython之解决闪烁的问题
2018/01/15 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
keras中的backend.clip用法
2020/05/22 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
医学护理系毕业生求职信
2013/10/01 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
大四自我鉴定
2014/02/08 职场文书
党员干部承诺书范文
2014/03/25 职场文书
四查四看整改措施
2014/09/19 职场文书
党员先进事迹材料
2014/12/19 职场文书
会议开幕词
2015/01/28 职场文书
师范生见习总结范文
2015/06/23 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
严以律己学习心得体会
2016/01/13 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL