耀极客论坛

 找回密码
 立即注册
查看: 346|回复: 0

vue项目支付功能代码详解

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220553
发表于 2022-5-7 00:23:13 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了vue项目支付功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1.支付宝方式:
  1. 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构),
  2. 提交form就可以调用支付宝支付
复制代码
代码:
  1. //  alipayWap: 后台接口返回的form 片段
  2. ‹div v-html="alipayWap" ref="alipayWap">‹/div>
  3. methods: {
  4. toAlipay () {
  5. this.$axios.get('xxx').then (res = > {
  6. this.alipayWap = res;
  7.              // 等待dom更新, 等页面中有这个form表单了
  8. this.$nextTick(() => {
  9.             this.$refs.alipayWap.children[0].submit()
  10.           })
  11. })
  12. }
  13. }
复制代码

2.微信支付
  大部分工作量是后端的事情,订单的生成由后端去和腾讯对接的,前端只需要负责将后端返回来的支付二维码(由后端生成的,有些情况也可以前端去对接订单生成之后由前端自己生成二维码,这种情况比较少)展示在终端供用户扫码即可
  需要自己根据后台返回的url生成二维码页面,如图所示

二维码展示代码:

请求后端的支付二维码接口

  最后,扫码支付后,即可完成。
  到此这篇关于vue项目支付功能的文章就介绍到这了,更多相关vue支付功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-11-28 19:40 , Processed in 0.074213 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表