支付宝返回的form处理 |
您所在的位置：网站首页 › 支付结果页面返回又回到了平台支付 › 支付宝返回的form处理 |
支付宝返回的form处理
|
支付宝的PC支付 分为两种 前置模式支付 和 跳转模式支付
前置模式和跳转模式，需要后台在支付宝的api中配置（无关前端） 1、跳转模式。 2、前置模式是将二维码前置到商户 3、的订单确认页的模式。需要商户在 4、自己的页面中以 iframe 方式请求 5、支付宝页面。具体分为以下几种： 6、0：订单码-简约前置模式，对应 iframe 宽度不能小于600px，高度不能小于300px； 7、1：订单码-前置模式，对应iframe 宽度不能小于 300px，高度不能小于600px； 8、3：订单码-迷你前置模式，对应 iframe 宽度不能小于 75px，高度不能小于75px； 9、4：订单码-可定义宽度的嵌入式二维码，商户可根据需要设定二维码的大小。 10、跳转模式下，用户的扫码界面是由支付宝生成的，不在商户的域名下。 11、2：订单码-跳转模式官方后台配置API：opendocs.alipay.com/apis/api_1/… 也可参考博客：blog.csdn.net/qq_39296114… 上面不需要前端进行操作，只需要后台进行配合即可，按照需求配置 以下才是前端的工作： 1.前置模式：支付宝后台返回前端的是一串from表单提交代码，我们需要拿到这串代码进行操作 第一种，前置模式，页面不跳转 展示二维码。第一步：请求后台接口返回from代码 这是我们后台返回的支付宝的from代码 操作如下图： 可以看到打印出来的a 是一串from的字符串，这个时候定义一个qianHtml 然后创建一个iframe 复制代码只要把from代码赋值到iframe里面就好了 效果图如下： 环境如下： 点击确认支付后,走下面方法： const div = document.createElement('div') /* 下面的data.content就是后台返回接收到的数据 */ div.innerHTML = data.content document.body.appendChild(div) document.forms[0].submit() 复制代码就会直接跳到支付宝 进行支付宝支付 效果图如最上面的一张图。 以下代码，只需要看支付宝支付即可，（跳转支付） async dq(order_id,pay_type,list){ let payu = pay_type if(pay_type == '2') payu = 4 if(this.zxxq) order_id = list.content.order_id const {errr,data} = await this.$service.home.diaoqi({ order_id:order_id, pay_type:payu }) console.log(data) console.log(pay_type) console.log('pay_type') this.$emit('watchChild') if(data.code == '200'){ //3 是余额的支付 2 是支付宝的支付 1是微信的支付 if(pay_type == '3'){ if(this.pcxq) this.$router.push({path:"/playsucc",query:{id:this.$route.query.id}}) if(this.zxxq) this.$toast('您已支付成功，请点击咨询') } else if(pay_type == '2'){ const div = document.createElement('div') /* 下面的data.content就是后台返回接收到的数据 */ div.innerHTML = data.content document.body.appendChild(div) document.forms[0].submit() } } else { console.log('支付失败的原因‘) this.$toast(data.msg) } }, 复制代码———————————————— 原文链接：blog.csdn.net/qq_33026699… 一、跳转新页面展示支付二维码前端调取支付宝支付接口（后台进行封装，没有直接调取支付宝接口），调用返回的数据中，将会有一串的form表单数据返回，我们需要将此表单在当前调用页面submit下，以跳转到支付扫码页； 支付宝返回的form 数据： document.forms[0].submit(); 复制代码实例代码: //支付宝支付 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[0].acceptCharset='GBK'; //保持与支付宝默认编码格式一致，如果不一致将会出现：调试错误，请回到请求来源地，重新发起请求，错误代码 invalid-signature 错误原因: 验签出错，建议检查签名字符串或签名私钥与应用公钥是否匹配 document.forms[0].submit(); }else{ this.$alert("错误："+resp.data,"提示",{ confirmButtonText:'确定' }); } }, 复制代码 温馨提示：在form submit 前，必须设置 acceptCharset='GBK' ，此处不一定是要GBK ,可以是UTF-8 ,前提是支付宝返回的action 必须是UTF-8 ,需保持一致第一次接触支付宝电脑端扫描支付，在这个编码格式上花了我几个小时的时间，找到问题后，真的觉得非常无语。。。。 |
【本文地址】
今日新闻 |
推荐新闻 |