【NuxtJs】支付宝PC支付跳转支付页面处理方案

一：支付宝支付基础结构页面构建

1.选择支付宝选项
2.点击下面立即支付按钮

 <button  @click="handlePay">立即支付</button>

二：支付宝官方页面唤起操作

支付宝支付一般是请求接口后收到一组form表单代码，在PC中，可以直接像下面这样直接使用

async handlePay() {this.QRcodeVisible = trueconst div = document.createElement('divform');div.innerHTML = alipayFormdocument.body.appendChild(div);document.forms[0].acceptCharset = 'GBK';document.forms[0].submit();},

问题：没有在新的页面打开啊？那我项目呢

方案一：请求完成以后使用window.open打开新的窗口，但是不行，浏览器会自动拦截，会被认为不安全。

好的,下面来优化。

三：优化，从新的页面打开

最终找到一个相对完美的方法，先打开一个空白页，待异步成功之后再赋予链接地址：
下单按钮页面

async handlePay() {this.QRcodeVisible = trueconst params = {order_id: 6,price: this.price,}try {let newOpenWindow = window.open('about:blank');const res = await pcPay(params)localStorage.setItem('aliPayForm', res)newOpenWindow.location = '/aliPay'} catch (error) {console.log(error);}},

新的alipay.vue跳转过渡页面

<template><div class="container" style="text-align: center;;height: 500px;margin-top: 100px;"><div><img src="https://img.cdn.heshecasa.com/upload/20220113/e4d2f28d3bffa5a7dca571fed96a25ea.jpg" alt="" style="text-align: center;"><div class="noDataTip" style="margin-top: 20px;font-size: 20px;">即将跳转到支付宝...</div></div></div>
</template><script>
export default {created() {if (process.client) {let alipayForm = localStorage.getItem('aliPayForm')if (alipayForm) {const div = document.createElement('divform');div.innerHTML = alipayFormdocument.body.appendChild(div);localStorage.removeItem('aliPayForm')document.forms[0].acceptCharset = 'GBK';document.forms[0].submit();}}},
}
</script>

【NuxtJs】支付宝PC支付跳转支付页面处理方案相关推荐

支付宝支付-支付宝PC端扫码支付
前言支付宝支付-沙箱环境使用支付宝支付-支付宝PC端扫码支付「本文」支付宝支付-手机浏览器H5支付「待写」 PC端扫码支付,其实就是就是电脑网站支付,本文基于支付宝沙箱环境,不了解的可以看一下 ...
vue - 【超详细】网站接入使用支付宝支付功能，点击支付跳转新页面后生成订单及支付二维码，实现支付宝在线付款详细的教程（整个支付的完整配置及支付流程，一键复制源码开箱即用）！
效果图在vue网站网页项目中,实现跳转新页面生成订单,进行 "支付宝" 支付详细教程,包括详细的配置及示例完整源代码, 你可以直接复制示例的完整源码(保证可用),改个参数就能用了 ...
PHP项目集成支付宝PC端扫码支付API（国内支付）
一.PC端(电脑端)网站扫码支付接口申请流程 1. 注册是支付宝商家账号 -- 注册地址: 2. 注册成功后,找到蚂蚁金服开放平台,点击支付应用: 3. 创建应用 4. 添加应用中的电脑支付功能 5. ...
支付宝支付（二）：PC支付，H5支付，APP支付通用接口
目录一.PC端支付: 二.H5端支付: 三.APP端支付: 一.PC端支付: 1.调用支付接口,返回form表单,前端直接渲染跳转到支付宝PC端统一的支付页面 2.官方文档入口:https://op ...
四方支付OEM|个人免签跳转支付|支付宝个人跳转支付|微信个人跳转支付|自动回调跳转
四方支付OEM|个人免签跳转支付|支付宝个人跳转支付|微信个人跳转支付|自动回调跳转本系统为四方支付系统,可对接支付宝微信通道,本系统亮点,可实现个人微信和个人支付宝收款自动跳转支付.
支付宝PC即时到账和手机网站支付同步
前几个月做了一个旅游网站,有PC站和手机站,涉及支付宝支付功能. 要求:PC站下的单,用户用手机登录也能支付;同理,手机站下的单,PC端登录也能支付. 附支付宝开放平台网址:即时到账 ,手机网站支付. ...
ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试
1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的,根据官 ...
php支付宝pc收银台,支付宝支付-PC电脑网站支付
支付产品全面升级(更新时间:2017/05/05 ),若您使用的是老接口,请移步老版本即时到账文档. 支持沙盒环境的测试 1.有图有真相使用手机扫码进行支付 i统一收单下单并支付页面接口alipay ...
PHP 支付PC端扫码支付、APP接口调起支付宝支付、微信公众号接入支付宝支付
第一:第三方支付原理第二:支付接口申请流程地址:https://docs.open.alipay.com/270/105899/ : 参考地址:https://blog.csdn.net/nove ...

【NuxtJs】支付宝PC支付跳转支付页面处理方案

一：支付宝支付基础结构页面构建

二：支付宝官方页面唤起操作

三：优化，从新的页面打开

【NuxtJs】支付宝PC支付跳转支付页面处理方案相关推荐

最新文章

热门文章