vue2.0与支付我的总结

最近在使用vue写webapp，app中要求能够实现线上支付，研究了微信H5支付与支付宝H5支付。其中微信H5支付处在内测阶段，须要申请，按照格式写了邮件七个工做日也没获得回复邮件，听说微信H5支付对于单量和交易额有要求，知足要求后才有很大概率开通。支付宝H5支付相对申请较为简单，人工技术客服强大，基本能解决不少问题，不得不说这点仍是阿里的产品更好，因此下面主要聊聊我所知道和碰见的支付宝H5支付的相关问题。

其实支付宝的支付原理很简单，不管是H5支付仍是原生APP支付,前台只须要使用服务器返回的数据调起支付就能够了。

支付宝H5支付，基本流程就是在前台使用服务器提供的接口建立订单，服务器根据支付宝提供的SDK，进行签名等一系列操做，具体能够参见支付宝的官方文档https://docs.open.alipay.com/203，当服务器完成这些操做后会会返回一个form表单，前台拿到后家在这个form表单就能够了。

让我最困扰最耽误时间的就是在使用返回的form数据
基本形式：
<form id='alipaysubmit' name='alipaysubmit' action='https://openapi.alipay.com/ga...' method='POST'>
....

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