vue2.0与支付个人总结

sherlock221 发布于2019-08-20 18:10 / 635人阅读

摘要：最近在使用写，中要求可以实现线上支付，研究了微信支付与支付宝支付。其实支付宝的支付原理很简单，无论是支付还是原生支付前台只需要使用服务器返回的数据调起支付就可以了。

最近在使用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;

        const div = 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)就是在前台支付完成的跳转结果通知页面。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84162.html

第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

seanHai 2019-08-22 13:58 评论0 收藏0
第三方库

摘要：微信支付，支付宝支付，银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库，使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程强大轻量的动画库 anime.js 入门教程来自B站的开源的MagicaSakura源...

gityuan 2019-08-29 14:17 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

afishhhhh 2019-06-27 16:36 评论0 收藏0
使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

摘要：目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法主要是前端。前端提交时使用，在后端再取出对应的微信支付看了下文档，以前是需要用唤起支付，而现在则是把微信内置到了微信的浏览器中。目前正在写一个微信公众号的小项目，记录一下遇到的问题和解决方法（主要是前端）。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付技术方案后端使用 php ...

Taonce 2019-08-20 16:49 评论0 收藏0