vue支付宝pc支付的扫码支付和跳转支付两种支付方式 |
您所在的位置：网站首页 › 为什么跳转网页到支付宝不出支付页面 › vue支付宝pc支付的扫码支付和跳转支付两种支付方式 |
vue支付宝pc支付的扫码支付和跳转支付两种支付方式
|
支付宝的PC支付 分为两种 前置模式支付 和 跳转模式支付
前置模式和跳转模式，需要后台在支付宝的api中配置（无关前端） 跳转模式。前置模式是将二维码前置到商户的订单确认页的模式。需要商户在自己的页面中以 iframe 方式请求支付宝页面。具体分为以下几种：0：订单码-简约前置模式，对应 iframe 宽度不能小于600px，高度不能小于300px；1：订单码-前置模式，对应iframe 宽度不能小于 300px，高度不能小于600px；3：订单码-迷你前置模式，对应 iframe 宽度不能小于 75px，高度不能小于75px；4：订单码-可定义宽度的嵌入式二维码，商户可根据需要设定二维码的大小。跳转模式下，用户的扫码界面是由支付宝生成的，不在商户的域名下。2：订单码-跳转模式官方后台配置API：https://opendocs.alipay.com/apis/api_1/alipay.trade.page.pay/ 也可参考博客：https://blog.csdn.net/qq_39296114/article/details/106061525
上面不需要前端进行操作，只需要后台进行配合即可，按照需求配置 以下才是前端的工作：
1.前置模式：
2.跳转模式：
支付宝后台返回前端的是一串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) } }, |
【本文地址】