摘要:本文将带你了解WEBAPP开发之vue实现webapp支付,希望本文对大家学WebApp有所帮助。
最近在使用vue写webapp,app中要求可以实现线上支付,研究了微信H5支付与支付宝H5支付。其中微信H5支付处在内测阶段,需要申请,按照格式写了邮件七个工作日也没得到回复邮件,据说微信H5支付对于单量和交易额有要求,满足要求后才有很大几率开通。支付宝H5支付相对申请较为简单,人工技术客服强大,基本能解决很多问题,不得不说这点还是阿里的产品更好,所以下面主要聊聊我所知道和遇见的支付宝H5支付的相关问题。
其实支付宝的支付原理很简单,无论是H5支付还是原生APP支付,前台只需要使用服务器返回的数据调起支付就可以了。
支付宝H5支付,基本流程就是在前台使用服务器提供的接口创建订单,服务器根据支付宝提供的SDK,进行签名等一系列操作,具体可以参见支付宝的官方文档https://docs.open.alipay.com/203,当服务器完成这些操作后会会返回一个form表单,前台拿到后家在这个form表单就可以了。
让我最困扰最耽误时间的就是在使用返回的form数据
基本形式:
....
在vue中使用form的方式:
netTool.createdOrder(params).then(response=>{
if(response.errno==='0'){
console.log('输出正确',response);
this.datadorm=response.result.wappay;
constdiv=document.createElement('div');
div.innerHTML=this.datadorm;
document.body.appendChild(div);
document.forms.alipaysubmit.submit();
}else{
console.log('传输错误');
}
});
```
-netTool.createdOrder(params)是用来发送网络请求
-在response中接收返回的form表单数据,
也就是this.datadorm=response.result.wappay进行接收;
-将返回的表单挂到html上;
最后就是调用执行了,我是在created周期中调用的;
对于支付结果后台需要与支付宝发起异步通知,并且验签,我们还要在后台添加一个同步通知(return_url)就是在前台支付完成的跳转结果通知页面。整个个过程其实很简单。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号