电脑端支付宝支付 -前端获取支付宝返回的form 以及submit 调用支付扫码页面
前端调取支付宝支付接口(后台进行封装,没有直接调取支付宝接口),调用返回的数据中,将会有一串的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¬ify_url=http%3A%2F%2Fwww.shanshiwangluo.com%2Fssmall%2Fportal%2Forder%2Fpay%2FaliCallback&version=1.0&app_id=2018062260383877&sign_type=RSA2×tamp=2018-12-15+17%3A13%3A32&alipay_sdk=alipay-sdk-java-dynamicVersionNo&format=json">
<input type="hidden" name="biz_content" value="{ "out_trade_no":"1812141933252566", "product_code":"FAST_INSTANT_TRADE_PAY", "total_amount":0.02, "subject":" 订单:1812141933252566", "extend_params":{ "sys_service_provider_id":"2018062211454921" } }">
<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 调用支付扫码页面的更多相关文章
- PHP PC端支付宝扫码支付
前面的文章已经描述过在蚂蚁金服开放平台创建应用签约等流程,详见:PHP App端支付宝支付,这里就不多说了,剩下的分两步,第一步是支付前的准备工作,也就是整合支付类文件,我已经整合好可以直接用,代码开 ...
- .NET Core2.0 环境下MVC模式的支付宝扫码支付接口-沙箱环境开发测试
所有配置以及相关信息均可以从PC支付中获取 使用的生成二维码的组件名为QRCoder,该组件引用了一个第三方实现的System.Drawing类库,和支付宝官网类似 当面付SDK为Alipay.Aop ...
- python支付宝页面扫码支付
一.介绍 基于网上一个支付宝pay.py封装了支付宝API的文件进行的,以下代码只支持网页扫码支付,手机端会提示调用支付宝支付 #pay文件代码 from datetime import dateti ...
- PC、h5项目接入第三方支付宝扫码登录、扫码付款
首先介绍一下pc项目接入支付宝扫码支付. 1.pc.移动接入支付宝扫码支付. 其实这个逻辑很简单,前端所需要处理的不是很多,后台会给一个连接,前端只需要将要支付的订单id拼接在这个连接上,然后打开跳转 ...
- 使用form表单提交请求如何获取后台返回的数据?
问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...
- 微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结
前言 很久以来,一直想写一篇微信支付有关的总结文档:一方面是总结自己的一些心得,另一方面也可以帮助别人,但是因种种原因未能完全理解透彻微信支付的几大支付方式,今天有幸做一些总结上的文章,也趁此机会,将 ...
- 微信扫码支付功能详细教程————Java
前言 首先声明 我并非原创 原创是 http://blog.csdn.net/wangqiuyun/article/details/51241064 我只是在前辈的基础 加以解释说明 还有自己的一些 ...
- java实现微信支付之扫码支付
本文直接从代码调用微信扫码支付讲起.账号配置,参数生成等请参考官方文档:https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_1 微信 ...
- asp.net core 微信扫码支付(扫码支付,H5支付,公众号支付,app支付)之1
2018-08-13更新生成二维码的方法 在做微信支付前,首先要了解你需要什么方式的微信支付,目前本人做过的支付包含扫码支付.H5支付.公众号支付.App支付等,本人使用的是asp.net mvc c ...
随机推荐
- linux mint 安装 opencv2.4
Download opencv https://github.com/opencv/opencv/tree/2.4 安装必要的依赖 sudo apt-get install build-essenti ...
- State状态模式
1.简介 在日常开发中,某些对象的状态如果发生改变,对应的行为也将发生改变,那么如何在运行时根据对象的状态动态的改变对象的行为,同时不产生紧耦合关系(即使用if else或者swith所带来的紧耦合关 ...
- python中使用xlrd、xlwt和xlutils3操作Excel
简单试了下python下excel的操作,使用了xlrd.xlwt和xlutil3:xlrd可以实现excel的读取操作,xlwt则是写入excel操作,xlutils3主要是为了修改excel,简单 ...
- AI历史和哲学基础浅谈
换个角度看AI:研究历史和哲学逻辑 正如题图所示,仿生人会梦见电子羊吗?(注:Do Androids Dream of Electric Sheep?是Philip K. Dick所著的一本科幻小说, ...
- Unity3D热更新之LuaFramework篇[01]--从零开始
前言 因工作关系,需要对手头的项目进行热更新支持.了解后发现,Lua的几个变种:XLua.ToLua(原uLua)和Slua都可以做Unity热更,而ToLua更是提供了一个简易的热更框架--LuaF ...
- RabbitMQ系列(四)RabbitMQ事务和Confirm发送方消息确认——深入解读
RabbitMQ事务和Confirm发送方消息确认--深入解读 RabbitMQ系列文章 RabbitMQ在Ubuntu上的环境搭建 深入了解RabbitMQ工作原理及简单使用 RabbitMQ交换器 ...
- JSON初步认识
一.背景 曾经有一段时间,XML是互联网传输结构化数据的标准.但是XML过于繁琐.冗长.JSON2001年就开始应用了,2006年,DC才把Json提交给IETF. 与XML相比,Json是在Java ...
- 纯JS实现加载更多(VUE框架)
<template> <div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'> </ ...
- [转]Javascript中几种较为流行的继承方式
出处:http://www.jianshu.com/p/a6c005228a75 开篇 从'严格'意义上说,javascript并不是一门真正的面向对象语言.这种说法原因一般都是觉得javascrip ...
- tiny210 tslib 测试(基于 ft5x06 触摸屏),解决触摸无效问题
1. 拷贝至开发板 将上次实验中的 tmp 文件夹拷贝到开发板,可以通过 nfs 来传输,并将 tmp/lib 下的所有 .so 文件拷贝至 开发板的 /usr/lib 中,并且确保库的映射关系正确. ...