前端调取支付宝支付接口(后台进行封装,没有直接调取支付宝接口),调用返回的数据中,将会有一串的form表单数据返回,我们需要将此表单在当前调用页面submit下,以跳转到支付扫码页;

支付宝返回的form 数据:

<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=GBK&method=alipay.trade.page.pay&sign=tXR6yxB9Uowu7tfbXVPHBoQXeyOqP2JXvo%2Fzmz%2BIA08aWin63h1%2FF7gHNN7I2K%2FnTV3ZYtvPkILu%2FS8uPmzpsAv1SJev0UNN2AbLDIGvbd%2BWn5neyIUqKcu5ySP1S8Bt4fbnvkMgnlijR25obVi5aFbj99JBZDrpeJ5cB9uq7Ccx7nX54%2F7coNv26PFD%2FPirlIKVVr2avD2w%3D%3D&return_url=http%3A%2F%2Fwww.shanshiwangluo.com%2F%23%2FpayNotify&notify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2&timestamp=2018-12-15+17%3A13%3A32&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
<input type="hidden" name="biz_content" value="{ &quot;out_trade_no&quot;:&quot;1812141933252566&quot;, &quot;product_code&quot;:&quot;FAST_INSTANT_TRADE_PAY&quot;, &quot;total_amount&quot;:0.02, &quot;subject&quot;:&quot; 订单:1812141933252566&quot;, &quot;extend_params&quot;:{ &quot;sys_service_provider_id&quot;:&quot;2018062211454921&quot; } }">
<input type="submit" value="立即支付" style="display:none" >
</form>
<script>document.forms[0].submit();</script>

实例代码:

//支付宝支付
async aliPay(orderCode,phone,price){
var resp=await aliPay(orderCode,phone,price);
if(resp.msg=="SUCCESS"){
const div=document.createElement('divform');
div.innerHTML=resp.data;
document.body.appendChild(div);
document.forms[].acceptCharset='GBK';//保持与支付宝默认编码格式一致,如果不一致将会出现:调试错误,请回到请求来源地,重新发起请求,错误代码 invalid-signature 错误原因: 验签出错,建议检查签名字符串或签名私钥与应用公钥是否匹配
                   document.forms[].submit();
}else{
this.$alert("错误:"+resp.data,"提示",{
confirmButtonText:'确定'
});
}
},

* 温馨提示:在form submit 前,必须设置 acceptCharset='GBK' ,此处不一定是要GBK ,可以是UTF-8 ,前提是支付宝返回的action 必须是UTF-8  ,需保持一致

第一次接触支付宝电脑端扫描支付,在这个编码格式上花了我几个小时的时间,找到问题后,真的觉得非常无语。。。。

报错误截图:

电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面的更多相关文章

  1. PHP PC端支付宝扫码支付

    前面的文章已经描述过在蚂蚁金服开放平台创建应用签约等流程,详见:PHP App端支付宝支付,这里就不多说了,剩下的分两步,第一步是支付前的准备工作,也就是整合支付类文件,我已经整合好可以直接用,代码开 ...

  2. .NET Core2.0 环境下MVC模式的支付宝扫码支付接口-沙箱环境开发测试

    所有配置以及相关信息均可以从PC支付中获取 使用的生成二维码的组件名为QRCoder,该组件引用了一个第三方实现的System.Drawing类库,和支付宝官网类似 当面付SDK为Alipay.Aop ...

  3. python支付宝页面扫码支付

    一.介绍 基于网上一个支付宝pay.py封装了支付宝API的文件进行的,以下代码只支持网页扫码支付,手机端会提示调用支付宝支付 #pay文件代码 from datetime import dateti ...

  4. PC、h5项目接入第三方支付宝扫码登录、扫码付款

    首先介绍一下pc项目接入支付宝扫码支付. 1.pc.移动接入支付宝扫码支付. 其实这个逻辑很简单,前端所需要处理的不是很多,后台会给一个连接,前端只需要将要支付的订单id拼接在这个连接上,然后打开跳转 ...

  5. 使用form表单提交请求如何获取后台返回的数据?

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  6. 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结

    前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...

  7. 微信扫码支付功能详细教程————Java

    前言  首先声明 我并非原创 原创是 http://blog.csdn.net/wangqiuyun/article/details/51241064 我只是在前辈的基础 加以解释说明 还有自己的一些 ...

  8. java实现微信支付之扫码支付

    本文直接从代码调用微信扫码支付讲起.账号配置,参数生成等请参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1 微信 ...

  9. asp.net core 微信扫码支付(扫码支付,H5支付,公众号支付,app支付)之1

    2018-08-13更新生成二维码的方法 在做微信支付前,首先要了解你需要什么方式的微信支付,目前本人做过的支付包含扫码支付.H5支付.公众号支付.App支付等,本人使用的是asp.net mvc c ...

随机推荐

  1. Linux 下 Shell 的自动交互

    在编写脚本的时候经常会遇到这种情况,某些程序的命令执行的之后可能会要求用户进行输入,这个时候就需要一些特殊写法来应对这种问题了.这里参考 这篇文章提到可以使用 delimiter 分界符来解决. 也就 ...

  2. npm包实现发布正式和测试版

    npm publish的時候 怎麽發測試版和正式版本呢? 通常我們一般情況下 直接 npm publish 提交自己的開發包后,在項目中 npm install @packageName 是下載下來剛 ...

  3. vscode mysql v0.3插件 连接不了

    环境: centos7.6  x64 python 3.6 插件mysql v0.3 解决办法:回滚插件版本v0.2.3 使用方法注意: https://www.cnblogs.com/-admin- ...

  4. Lua IUP 环境搭建

    1.从sourceforge.net下载Luabinaries.IUP.CD.IM.LuaGL的源码 2.编译CD 2.1.用cd\mak.vc12中的lua_version53.props替换lua ...

  5. Log4Net 生成多个文件、文件名累加解决方法

    Log4Net 生成多个文件.文件名累加解决方法 项目中的WCF服务里采用Log4Net用来记录异常日志,但部署后,生成的日志会出现多个累加文件,如下图: WCF是寄宿在IIS上,包含了5个SVC服务 ...

  6. JavaScript和Ajax部分(6)

    51. 怎样给jQuery动态附加新的元素?那么怎样给新生成的元素绑定事件呢? jQuery的html()可以给现有元素附加新的元素. 直接在元素还未生成前就绑定肯定是无效的,因为所绑定的元素目前根本 ...

  7. linux http服务源码编译安装详解

    相信大家大多都听过linux 的编译安装,但它到底是怎么把源代码变为自己电脑里可以应用的软件哪?今天,小编就以httpd 为例详细讲解一下. 什么是编译安装——编译:将源代码变为机器可执行的代码文件. ...

  8. [转]phpredis中文手册

    本文是参考<redis中文手册>,将示例代码用php来实现,注意php-redis与redis_cli的区别(主要是返回值类型和参数用法). 目录(使用CTRL+F快速查找命令): Key ...

  9. WPF 故事版例子

    Storyboard std = new Storyboard(); DoubleAnimation a = new DoubleAnimation(); a.From =0; a.To =400; ...

  10. .net core2.0+nginx+Ubuntu14.04【一个小白的初次尝试】

    新的业务来了,需要使用linux环境部署web服务,作为一个C#的懒惰程序员,就这么上了车[狗脸],废话不多说,跟我一样的小白请看,大神请绕路. 站点暂时没有使用Docker部署,为什么呢,因为我还没 ...