vue项目支付功能代码详解

1.支付宝方式：

支付宝方式：点击支付宝支付, 调用后台接口(携带订单号)，后台返回一个form表单(HTML字符串结构)，

提交form就可以调用支付宝支付

代码：

//  alipayWap: 后台接口返回的form 片段
<div v-html="alipayWap" ref="alipayWap"></div>
methods: {
	toAlipay () {
		this.$axios.get('xxx').then (res = > {
			this.alipayWap = res;
             // 等待dom更新, 等页面中有这个form表单了
			this.$nextTick(() => {
            	this.$refs.alipayWap.children[0].submit()
          	})
		})
	}
}

2.微信支付

大部分工作量是后端的事情，订单的生成由后端去和腾讯对接的，前端只需要负责将后端返回来的支付二维码（由后端生成的，有些情况也可以前端去对接订单生成之后由前端自己生成二维码，这种情况比较少）展示在终端供用户扫码即可

需要自己根据后台返回的url生成二维码页面，如图所示

二维码展示代码：

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

最后，扫码支付后，即可完成。

到此这篇关于vue项目支付功能的文章就介绍到这了,更多相关vue支付功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue项目中的支付功能实现(微信支付和支付宝支付)

    vue项目中的支付功能实现(微信支付和支付宝支付)

    目录 项目中常见的支付方式 支付宝支付 微信支付 项目中常见的支付方式 支付宝支付 微信支付 余额支付(也需要支付宝或微信充值) 注意:本文仅从前端角度展开讲解 支付宝支付 项目难点: 页面是h5网页,用支付宝支付必须得到支付宝授权,调用支付宝的api. (如何授权请参照:调用支付宝api) 支付宝支付的一般过程是: 调用订单接口,获得订单号,支付金额等.    传递订单号,金额 至预支付接口    后台会返回来一个form,然后提交form自动跳转到支付宝支付页面 支付过程: 下图为为接口文档

  • Vue实现微信支付功能遇到的坑

    微信支付功能相比较支付宝支付,有点点繁琐,整理记录下来,以便日后所需 项目用VUE+EL搭建而成,支付用EL的radio来做的 <el-radio v-model="radio" label="weixin" > <i class="iconfont icon-weixin"></i> <div class="list"> <h5>微信支付</h5> &l

  • springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

    1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有

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

    目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付.下面介绍一下Vue中H5页面如何使用支付宝支付.其实很简单的,只不过是调自己后台的一个接口而已(后台根据支付宝文档,写好支付接口). 触发支付宝支付调用后台接口,后台会返回支付宝提供的form表单,我们只要在vue里面创建新节点,将返回的form表单append进去,并提交就可以唤起支付宝支付.另在此说一下这个 returnUrl , 它是支付后支付宝回调的页面.具体可以根据自身业务,后台写死或者由前端控制. methods () {

  • Vue仿支付宝支付功能

    先给大家上个效果图: <div class="goods-psd"> <p class="apply-title"> 请输入支付密码 </p> <p style="margin: 0.2rem">确认支付 <span>{{password}}</span> </p> <div class="psd-container"> <i

  • vue项目支付功能代码详解

    vue项目支付功能代码详解

    1.支付宝方式: 支付宝方式:点击支付宝支付, 调用后台接口(携带订单号),后台返回一个form表单(HTML字符串结构), 提交form就可以调用支付宝支付 代码: // alipayWap: 后台接口返回的form 片段 <div v-html="alipayWap" ref="alipayWap"></div> methods: { toAlipay () { this.$axios.get('xxx').then (res = >

  • bing Map 在vue项目中的使用详解

    写在最前面 拥有全球数据库国内好像就只有百度地图有,高德.搜狗.腾讯的都不行,但是由于百度地图的数据更新不及时,所以在做相关项目要用到国外数据的时候,最好还是推荐使用bingMap. bing Map 使用教程(基础) 参考文档:bing Map 官方教程 bing Map 初始化 引入bing map资源 <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&k

  • 通过GASP让vue实现动态效果实例代码详解

    通过GASP让vue实现动态效果实例代码详解

    单页应用及支持它们的前端框架提供了一个很好的机会,可以为程序设计提供令人惊叹的交互层,本文,我们将了解 vue.js 及如何集成 GASP 动画库来添加令人惊叹的动画效果. Vue.js 是一个功能强大且易掌握的 JS 框架,在 Vue CLI 的帮助下,我们能够快速构建具有所有最新 Webpack 功能的应用程序,而无需花费时间来配置 webpack,只需安装 Vue CLI,在重大上输入:create <project-name>,您就可以发车了. GASP是一个JavaScript动画库

  • vue 插件的方法代码详解

    在开发项目的时候,我们一般都用 vue-cli 来避免繁琐的 webpack 配置和 template 配置.但是官方 cli3 现在并不支持搭建 plugin 开发的项目. 还好,已经有大神(Kazupon)走在了我们前面,我们就用现成的vue-cli-plugin-p11n. 如果你没有安装 vue-cli,请先安装 npm i -g @vue/cli 首先,搭建项目 vue create [your plugin name] && cd [your plugin name] vue

  • Java中SSM框架实现增删改查功能代码详解

    记录一下自己第一次整合smm框架的步骤. 参考博客和网站有:我没有三颗心脏 How2J学习网站 1.数据库使用的是mySql,首先创建数据库ssm1,并创建表student create database ssm1; use ssm1; CREATE TABLE student( id int(11) NOT NULL AUTO_INCREMENT, student_id int(11) NOT NULL UNIQUE, name varchar(255) NOT NULL, age int(1

  • Android使用Realm数据库实现App中的收藏功能(代码详解)

    Android使用Realm数据库实现App中的收藏功能(代码详解)

    前 言 App数据持久化功能是每个App必不可少的功能,而Android最常用的数据持久化方式主要有以下的五种方式: 使用SharedPreferences存储数据: 文件存储数据: SQLite数据库存储数据: 使用ContentProvider存储数据: 网络存储数据. 其中前四种都是缓存数据到本地,这篇主要讲的是使用第三种方式来实现App中的收藏功能,不过不用Android原生自带SQLite数据库来存储数据,而是使用第三方的Realm数据库来来存储数据. Realm 本质上是一个嵌入式数

  • 利用Vue-cli搭建Vue项目框架的教程详解

    首先安装node.js 1.在新建的目录中按住shift 鼠标右键,在此处打开命令窗口,版本保证在4.x以上 node -v 2.全局安装vue脚手架 npm install -g vue-cli 同时可以使用vue和vue list 命令查看 3.初始化模板配置和项目名字 vue init webpack mycharts mycharts是项目名 其中有许多需要选择的选项,eslint适合团队开发,规范代码之类的,个人开发我喜欢用stylus,所以这个选项我不会选n,其他Y 4.有提示就按e

  • jQuery实现区域打印功能代码详解

    使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO中,我将页头页脚及其他不需要打印的元素的样式设置如下: <style type="text/css" media="print"> #header,.top_title,#jqprint,#footer,#cssprint h3{display:none} </style> 用jQu

  • laravel-admin 与 vue 结合使用实例代码详解

    由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着很多页面刷新的操作,并不是刷新整个 document,而是从服务器拿到部分 document,再通过类似 $("#pjax-container").html(newPart) 的方式更新的. 这就造成一个问题,每次 pjax 刷新,都会破坏 vue 的 dom 映射. 所以理论上有2种方法解决: 重新绑定一下 vue 的映射关系 在某些页面禁止 pjax 1 太难搞,而且没啥资料,放弃.2 的话比较可行. 部分

  • Java实现搜索功能代码详解

    首先,我们要清楚搜索框中根据关键字进行条件搜索发送的是Get请求,并且是向当前页面发送Get请求 //示例代码 请求路径为当前页面路径 "/product" <!-- 搜索框 get请求 根据商品名称的关键字进行搜索--> <form action="/product" class="form-inline pull-left" > <input type="text" name="pr

随机推荐