alipay.trade.page.pay 解决vue项目下 支付宝支付不能在新窗口打开收银台的问题

最新推荐文章于 2024-07-24 14:29:01 发布
最新推荐文章于 2024-07-24 14:29:01 发布
阅读量2.1k 收藏 2
点赞数 1
文章标签： 前端 前端框架 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40999492/article/details/123874149
版权

由于PC端扫码支付，返回的是个form表单形式，需要在新窗口打开支付宝收银台如下
在这里插入图片描述
1.提前创建一个dom
在这里插入图片描述
2.将获取到的form表单放入进去，再通过js触发from里面的input type=‘submit’ 标签点击事件来打开收银台。如下图
在这里插入图片描述
3.但是发现打开的收银台是当前页面内，直接替换了当前页面的url路径，这不是我们想要的结果，
问题处理方式：
在这里插入图片描述
给form添加target属性，再通过执行input click事件就可以在新的标签打开支付宝收银台了

呦呦小达
关注
alipay.trade.page.pay扫码支付不跳转return_url
sdzhangshulong的博客
05-24 809
vue支付项目-APP支付宝支付功能
总结前端开发中遇到的问题，分享前端知识
10-22 1万+
如果用户已安装支付宝客户端，商家 App 唤起支付宝完成支付，支付完后跳回到商家 App 内，最后展示支付结果。如果用户没有安装支付宝客户端，商家 App 内会调起支付宝网页支付收银台，用户登录支付宝账号，支付完后展示支付结果。1.点击按钮开通或者续费，会验证是否选择会员商品以及对协议是否查看选中（这里根据项目需要自行验证，可忽略），验证通过打开选择支付方式弹窗页面，选择微信支付或者支付宝支付；4.可取消支付，放弃支付会返回会员页面，页面提示支付取消；1.判断支付方式，如果是2，则是支付宝支付方式。
alipay.trade.page.pay-JAVA-UTF-8.zip
08-07
阿里支付宝的支付接口项目demo。这个是Java的案例，下载后可以导入eclipse中运行即可。
vue 支付宝返回url 新窗口打开
wax9092的博客
01-24 6559
场景：点击充值，返回支付url ，内容是form格式的。直接使用window.open(),会被浏览器拦截。主要针对vue，其他框架思路应该一样。 方法一：用 路由resolve,v-html方法 recharge(this.ruleForm).then(response => { if(response.data.status != 200){ return this.tipW...
零售行业收银系统源码-收银台支持商品类型
qh716的博客
07-24 509
零售行业收银系统，后台php开发，收银端flutter框架开发，可以二次开发
支付宝电脑网站支付 alipay.trade.page.pay
weixin_34211761的博客
04-11 2582
只涉及支付接口 其他接口没有使用 支付宝官方文档:https://docs.open.alipay.com/270/105899/ 支付接口文档 https://docs.open.alipay.com/270/alipay.trade.page.pay/ 建议使用沙箱环境进行测试,沙箱接入 https://docs.open.alipay.com/200/105311 具体实现请参考文档和官方d...
vue跳转支付打开新窗口
李特成的博客
01-10 3901
后台返回数据 "<script language="javascript">window.onload=function(){document.pay_form.submit();}</script> <form id="pay_form" name="pay_form" action="http://gateway.lianyin88.com/GateW
解决vue2.x在ie浏览器打开空白问题
蜗牛~~
12-06 5902
排查一： 先看看项目中是否安装并引入babel-polyfill这个东西，（Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码）。引入则跳过 vue项目在IE浏览器中显示空白，是因为js文件没有加载，需要引入babel-polyfill这个东西，而用vue脚手架搭建的项目是没有引入此工具的 引入方法： （1）安装 npm install --save babel-polyfill （2）修改webpack.base.conf.js app: ['babel-polyfill'.
支付宝，对接沙箱支付（vue2+node.js）
weixin_46426412的博客
03-21 2415
下载 qs （加密传输，自行百度）qs是增加安全性的序列化 比JSON.stringify安全系数高。node.js中，自行，创建项目，对接mqsql。3. 生成token语法 jwt.sign( 用户信息 , 口令 , 过期时间)2. 引入 require(‘jsonwebtoken’);4. 解析token jwt.decode(token);下载 npm install jsonwebtoken。先看下，成品后的，拿串链接，就是后台返回的路径。依照自己系统，自行选择下载。下载 对接支付宝的sdk。
解决vue项目打包后打开index.html无内容，出现404问题
qq_45532769的博客
10-31 4712
解决vue项目打包后打开index.html无内容，出现404问题
vue-router 在新窗口打开页面
前端知识分享喵
05-04 5178
Vue 属于单页面应用，而单页面应用中“路由”是在客户端执行的。客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。
Vue的H5页面唤起支付宝支付功能
10-17
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。这篇文章主要介绍了Vue的H5页面唤起支付宝支付,需要的朋友可以参考下
用form提交打开新页面，类似于支付时候的效果
08-26
用form提交打开新页面，类似于支付时候的效果
vue支付 微信支付、支付宝支付
wgod
04-17 1063
vue 支付 微信返回字符串，转为二维码扫码即可支付。 支付宝返回HTML代码，调用form 的submit 开启支付 流程：1、调用订单接口，获得订单号，2、传递订单号至预支付接口，返回（字符串/HTML）代码， 本文章用于解决怎么处理 字符串/HTML 代码： 项目采用mqtt订阅后端返回标识，所以支付宝要打开新页面，否则mqtt链接失败！！！...
vue PC项目实现 支付宝支付（跳转至支付界面）
热门推荐
Goodboygo的博客
09-10 1万+
支付界面如下所示： 当点击立即支付时，触发支付事件： PC 支付宝支付有两种方式： 1.前置支付（页面不跳转，展示二维码） 支付流程：调用支付接口→拿到form参数→调起支付页面→查询支付结果 2.跳转支付（跳转到支付宝支付页面） 支付流程：调用支付接口→拿到form参数→调起支付页面→查询支付结果 支付详解： 1.前置支付（页面不跳转，展示二维码） 2.跳转支付（跳转到支付宝支付页面），如图： 参考代码： // 调用支付接口...
vue如何跳转支付宝付款页面
weixin_42346984的博客
04-21 3057
vue如何跳转支付宝付款页面 一、将后端返回的html结构，通过路由方式传递到orderAlipay页 let routerData = this.$router.resolve({path:'/orderAlipay',query: {htmlData: data}}) // 打开新页面 window.open(routerData.href, '_ blank') 二、orderAlipay页已html格式放入div内，直接进行提交即可跳转到支付宝的支付页 <template> &
解析支付宝单笔交易查询接口返回的XML信息
wuyongde0922的专栏
12-12 3376
构建了1个xstreambean 用于把 支付宝单笔交易查询接口返回的XML信息 解析成 这个java对象，方便使用。 返回数据可能是：  T     utf-8   single_trade_query   20889010000000   7_20130223150319_26           北京-7_20130223150319_26    xx@126.c
支付宝APP支付
chen710172404的博客
08-29 1893
实例化具体API对应的request类,类名称和接口名称对应,当前调用接口名称：alipay.trade.app.pay AlipayTradeAppPayRequest request = new AlipayTradeAppPayRequest(); AlipayTradeAppPayModel model = new AlipayTradeAppPayModel(); SDK已经封装掉了公共...
vue打包生成的Android app，如何打开alipay.trade.app.pay 接口生成的orderStr，拉起支付宝APP进行支付
最新发布
09-13
Vue打包生成的Android app要调用支付宝支付，你需要在Vue项目中集成支付宝的SDK，并通过生成的orderStr参数来实现调起支付宝进行支付的功能。以下是基本步骤： 1. 在Vue项目中引入支付宝SDK。 2. 根据支付宝SDK的文档配置相关的参数，如商户ID、应用ID等。 3. 使用`alipay.trade.app.pay`接口生成支付订单，将返回的orderStr参数传递给Android客户端。 4. 在Vue项目中编写调起支付宝的代码，通常是在支付按钮的点击事件中调用SDK提供的方法。 5. Android端需要处理从Vue传来的orderStr参数，并使用支付宝提供的SDK来调起支付界面。 具体步骤如下： - 在Vue中，当用户点击支付按钮时，你需要在事件处理函数中生成订单并获取到orderStr参数。 - 将orderStr参数通过某种方式（例如URL参数、本地存储等）传递给原生的Android代码。 - Android端接收到orderStr后，使用支付宝SDK提供的接口来调起支付宝支付。 这里是一个示例的Vue端代码片段： ```javascript // Vue组件中，处理支付的函数 pay() { // 调用后端API，获取支付订单信息 this.$http.post('/api/getAlipayOrder', { /* 传递必要参数 */ }) .then(response => { const { orderStr } = response.data; // 将orderStr传递到原生Android代码中 this.invokeNativeFunction(orderStr); }) .catch(error => { console.error(error); }); }, // 假设这是调用原生Android代码的函数 invokeNativeFunction(orderStr) { // 实际上需要通过Android原生代码来实现 // 这里仅为示例 console.log('调起支付宝支付', orderStr); }, ``` 在Android原生代码中，你需要编写相应的逻辑来接收这个orderStr，并调用支付宝SDK的相关方法来启动支付。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值