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

 更新时间:2019年04月18日 10:24:06   投稿:mrr  
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下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页面唤起支付宝支付功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 简单实现Vue的observer和watcher

    简单实现Vue的observer和watcher

    这篇文章主要教大家如何简单实现Vue的observer和watcher,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • vue基于Echarts的拖拽数据可视化功能实现

    vue基于Echarts的拖拽数据可视化功能实现

    这篇文章主要给大家介绍了关于vue基于Echars的拖拽数据可视化功能实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 详解element-ui日期时间选择器的日期格式化问题

    详解element-ui日期时间选择器的日期格式化问题

    这篇文章主要介绍了详解element-ui日期时间选择器的日期格式化问题,本文用到了DateTimePicker来选择日期时间,但是在将数据传回后台的过程中遇到了一些令人头疼的问题,有兴趣的一起来了解一下
    2019-04-04
  • Vue UI框架的主题切换功能实现

    Vue UI框架的主题切换功能实现

    在如今,很多网页已经可以手动切换明亮模式和黑暗模式,网页的主题切换已经成为了一个常用的需求,因此,本文将从常见框架的处理方式总结一些相关的操作,对vue ui框架主题切换功能感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • vue el-date-picker 日期回显后无法改变问题解决

    vue el-date-picker 日期回显后无法改变问题解决

    这篇文章主要介绍了vue el-date-picker 日期回显后无法改变问题解决,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue在自定义指令绑定的处理函数中传递参数

    Vue在自定义指令绑定的处理函数中传递参数

    这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue的axios和mock.js你了解吗

    vue的axios和mock.js你了解吗

    这篇文章主要为大家详细介绍了vue的axios和mock.js,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • VUE+element开发后台管理的搜索功能

    VUE+element开发后台管理的搜索功能

    这篇文章主要为大家详细介绍了VUE+element开发后台管理的搜索功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vuex2.0+Vue2.0构建备忘录应用实践

    Vuex2.0+Vue2.0构建备忘录应用实践

    这篇文章主要为大家详细介绍了Vuex2.0+Vue2.0构建备忘录应用实践,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • vue搜索高亮popsearch组件的实现示例

    vue搜索高亮popsearch组件的实现示例

    有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多,本文就来介绍一下vue搜索高亮popsearch组件的实现示例,感兴趣的可以了解一下
    2023-09-09

最新评论