Vue的H5页面唤起支付宝支付功能
2019-04-22 18:02
3291 查看
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下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页面唤起支付宝支付功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- 支付宝SDK唤起H5页面支付第一次成功,之后再尝试失败问题
- 前端:微信支付和支付宝支付在pc端和h5页面中的应用
- 使用Ping++完成H5页面支付功能
- h5 页面 唤起手机拨号功能
- iOS 手机网站支付转Native支付(H5支付页面调起支付宝客户端(app))
- JAVA + VUE实现支付宝即时到账功能(电脑网站支付)功能
- h5页面唤起打电话、发短信功能
- 使用Ping++完成H5页面支付功能
- Unittest实现H5页面接口功能测试
- iOS APP接入支付宝SDK支付功能的实现(小白篇)
- H5 EventSource 实现web页面推送功能demo
- ThinkPHP接入支付宝支付功能
- Android WebView 微信和支付宝H5调用本地app支付
- 支付宝扫码支付功能对接
- 如何完成支付宝的支付功能?
- Android接入支付宝实现支付功能实例
- iOS -- 支付宝SDK 的使用(支付功能)
- 基于PHP的支付宝H5、APP支付
- web页面调用支付宝支付
- 网站上的页面元素 Meta标签-关键字,描述,机器人和辅助功能标签页标题内容-定位整个副本的关键字的内容和支付链接-连接结构,ALT标签,文本链接的话和标题,页面上的各主要部分的关键字密度,HTML有