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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
原生JS实现留言板
Mar 26 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
详解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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
JS相册图片抖动放大展示效果的示例代码
2021/01/29 Javascript
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
什么是命名空间(NameSpace)
2015/11/24 面试题
高校自主招生自荐信
2013/12/09 职场文书
《散步》教学反思
2014/03/02 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
社区科普工作方案
2014/06/03 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
装修安全责任协议书
2016/03/22 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL