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

2024-12-01 06:30:56

目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下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 js IOS H5focus无法自动弹出键盘的问题

IOS不自动弹出键盘,必须手动触发一下focus才行,不能自动调用,所以需要诱导用户点击某个按钮触发focus,最终修改的方法,默认隐藏密码输入框,隐藏不能用v-if或者是v-show,用position:absolute, top:-1000,然后点击输入密码将top改为视窗内,并且调用focus的方法代码如下,有问题欢迎评论 <template> <div class="pwdpush-box"> <h4 class="enter-pass
vue写h5页面的方法总结

下面就是小编带给大家的如何用vue写h5页面方法操作,希望能够给你们带来一定的帮助,谢谢大家的观看. 1.当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配. 2.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用.方案总结为:根据屏幕大小 / 750 = 所求字体 / 基准字体大小比值相等,动态调节html的
vue中用H5实现文件上传的方法实例代码

整理文档,搜刮出一个vue中用H5实现文件上传的方法实例代码,稍微整理精简一下做下分享. 1.图片上传 <img v-if="personInfo.photoUrl" :src="headPreFix + personInfo.photoUrl" style="height:126px;max-width:133px;margin: 25px 0;"> <img v-else src="../../assets/def
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】

说到h5的翻页,很定第一时间想到的是swiper.但是我当时想到的却是,vue里边怎么用swiper?! vue-awesome-swiper就是其中一个前辈们产出的结晶.就看首尾两个单词,就知道他是vue和swiper的爱情之子了. vue-awesome-swiper官网是中文文档,妈妈再也不用担心我读api啦."基于 Swiper4.适用于 Vue 的轮播组件".在产品催着进度的紧张环境下,在四处搜寻解决方案的情况下,这句话简直发着光啊. 具体怎么用,官方文档写的很清楚,但我还是
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理

一.前言三年.net开发转前端已经四个月了,前端主要用webpack+vue,由于后端转过来的,前端不够系统,希望分享下开发心得与园友一起学习. 图片的上传之前都是用的插件(ajaxupload),或者传统上传图片的方式,各有利弊:插件的问题是依赖jq并且会使系统比较臃肿,还有传统的web开发模式前后端偶尔在一起及对用户体验要求低,现在公司采用webpack+vue+restfullApi开发模式前后端完全分离,遵从高内聚,低偶尔的原则,开发人员各司其职,一则提升开发效率(从长期来看,短期
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开发微信H5微信分享签名失败问题解决方案

关于Vue中路由使用history模式,开发微信H5页面分享时在安卓上签名有效成功,但是在IOS设备上一直报错签名失效问题问题描述:在Vue开发过程中,路由使用History模式下,在使用微信分享时,在微信开发者工具上一切正常.在安卓上一切正常. 但是!!!在IOS上反复报签名错误. 以下是真机测试截图,划掉黑线的是我个人IOS设备分享出来一直是服务号,接着下面分享出来自定义内容是安卓分享正常,话不多说上图!!!! 我的代码: 需求描述:需要从首页进入活动详情页,然后在详情页分享详情页面内容.
用vuex写了一个购物车H5页面的示例代码

通过购物车的一个案列,把vuex学习了一篇. vuex概念浅谈 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单的来说,就是数据共用,对数据集中起来进行统一的管理. 如果您的应用够简单,您最好不要使用 Vuex.一个简单的 global event bus 就足够您所需了.但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的
Vue的H5页面唤起支付宝支付功能

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

一.前期准备 1.申请好微信商户号appid,拿到商户id和商户秘钥,退款的话需要商户证书 2.申请好支付宝商户号appid,商户公钥和秘钥(需要用支付宝工具自己生成),支付宝退款不需要证书二.数据库表设计 1.微信支付配置表 CREATE TABLE `py_wx_config` ( `wx_config_id` varchar(18) NOT NULL COMMENT '微信支付配置ID', `appid` varchar(128) DEFAULT NULL COMMENT '微信公众号I
ThinkPHP框架下整合支付宝支付功能图文教程

本文实例讲述了ThinkPHP框架下整合支付宝支付功能.分享给大家供大家参考,具体如下: 背景近期项目需要接入支付宝支付功能,其中开发使用了ThinkPHP3.2.3框架,通过参考开发平台文档可以知道,网站开发有两种场景,一种是手机网站支付,直接唤醒支付宝app进入支付操作:另一种多是 PC 端显示支付二维码的形式,然后使用手机的支付宝app扫描. 此处主要介绍手机网站支付的实现,后期补充扫码支付. 一.接入配置 1).接入步骤根据"快速接入"中的流程,两者大同小异,都是进行: 第
SpringMVC+Spring+Mybatis实现支付宝支付功能的示例代码

本博客详细介绍了如何使用ssm框架实现支付宝支付功能.本文章分为两大部分,分别是「支付宝测试环境代码测试」和「将支付宝支付整合到ssm框架」,详细的代码和图文解释,自己实践的时候一定仔细阅读相关文档. 教程源代码:https://github.com/OUYANGSIHAI/sihai-maven-ssm-alipay 一.支付宝测试环境代码测试: 1.下载电脑网站的官方demo以及查看参考相关文档: 地址:https://docs.open.alipay.com/270/106291/ 2.下
django中使用事务及接入支付宝支付功能

之前一直想记录一下在项目中使用到的事务以及支付宝支付功能,自己一直犯懒没有完,趁今天有点兴致,在这记录一下. 商城项目必备的就是支付订单的功能,所以就会涉及到订单的保存以及支付接口的引入.先来看看订单的保存,在数据库模型涉及之初,将订单分成了两个表,一个为订单表,记录订单的基本信息,如订单号,用户信息,运费之类,一个为订单商品表,记录该订单中的商品信息.在保存订单时,肯定会涉及到两个表的新建和保存,其实还有一张表也需要进行一些修改,那就是商品表,当一个订单保存成功,意味着本次交易成功,商品售出,
PHP实现的支付宝支付功能示例

本文实例讲述了PHP实现的支付宝支付功能.分享给大家供大家参考,具体如下: 在给app做支付宝支付接口的时候收集内容整理如下: 接口: import('alipay.AopClient', EXTEND_PATH); import('alipay.request.AlipayTradeAppPayRequest', EXTEND_PATH); $aop = new \AopClient(); $aop->gatewayUrl = "https://openapi.alipay.com/ga
Java spring boot 实现支付宝支付功能的示例代码

一.准备工作: 1.登陆支付宝开发者中心,申请一个开发者账号. 地址:https://openhome.alipay.com/ 2.进入研发服务: 3.点击链接进入工具下载页面: 4.点击下载对应版本的RSA公钥生成器: 5.生成公钥密钥(记录你的应用私钥): 6.在支付宝配置公钥(点击保存): 二.搭建demo 1.引入jia包: <dependency> <groupId>com.alipay.sdk</groupId> <artifactId>alip
Vue监听页面刷新和关闭功能

我在做项目的时候,有一个需求,在离开(跳转或者关闭)购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化. 将提交的一步操作放到 beforeDestroy 钩子函数中. beforeDestroy() { console.log('销毁组件') this.finalCart()}, 但是发现 beforeDestroy 只能监听到页面间的跳转,无法监听到页面刷新和关闭标签页. 所以还是要借助 onbeforeunload 事件. 顺便复习了一下 JavaScript 中的一

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

相关推荐

随机推荐