web支付基础教程

时间  2020-06-13
标签 web 支付 基础 教程 栏目 HTML 繁體版
原文   原文链接

前言

因为在公司的交易支付部门搬砖，所以To C端的前端支付页面，基本由我这边负责javascript

通常来讲，一次正常的交易流程，用户会通过几个阶段：php

  1. 浏览商品列表
  2. 查看商品详情
  3. 点击购买或加入购物车
  4. 商品结算(确认购买)
  5. 收银台(进行支付)
  6. 支付成功

其中收银台做为交易成功的最后一千米，其承担的职责之重可想而知html

咱们先来看看市面上常见网站的收银台：前端

哔哩哔哩会员购:java

触屏端web

pc端ajax

app端json

慕课网:小程序

触屏端后端

pc端

app端

能够看出，收银台页面通常要适配3个终端：pc端，触屏端，app端。所以，主流的第三方支付平台(微信，支付宝，花呗分期，京东白条)也须要能支持这三种场景的支付

接下来，咱们就来分析下不一样支付渠道在不一样终端下，支付的实现方式

因为支付涉及部门核心业务，所以就不拿公司线上的收银台作讲解了。支付交互流程，主要参考哔哩哔哩会员购和慕课网（没有利益相关）

<font color="#6495ed">注意：本文只考虑前端支付业务的实现，后端支付业务的实现，暂不考虑</font>

支付宝(花呗分期)

支付宝开发文档

花呗分期其实就是支付宝的拓展，原理基本一致，就不重复累赘

pc端

交互方式1：

在pc端点击支付宝支付，网页新打开一个页面(window.open())，这个页面指向的是支付宝官方收银台页面

交互方式2:

在pc端点击支付宝支付，网页展现一个二维码，须要用户打开支付宝app进行扫码支付

b站提供了一个很巧妙的思路：把微信，支付宝，qq三个支付二维码统一成了一个二维码。(原理后面会讲解，本质是调用不一样容器的JSAPI)

两种交互方式，点击支付按钮时，其实都是把当前的订单号以及一些相关信息发给后端

const payNum = '123abc';

ajax({ 
  url: '/api/alipay', // 支付api
  type: 'POST',
  data: {
    payNum: payNum, // 订单号
    other: 'demo', // 其余参数
}).then((res) => {
  const { payUrl } = res;

  // 交互方法1:
  // payUrl若是是支付宝的收银台，则新打开一个页面
  // payUrl通常是 https://mapi.alipay.com/gateway.do 这种，通常会带上return_url参数和其余各类数据，页面最后被重定向到支付宝收银台
  window.open(payUrl);

  // 交互方式2:
  // payUrl若是是支付宝的扫码地址，则建立一个二维码弹窗
  // payUrl通常是 https://qr.alipay.com/bax06893swswc4inaknv505d 这种，页面最后被重定向到支付宝收银台，该收银台能够唤起支付宝app
  qrcode({
    width: 175,
    height: 175,
    url: payUrl
  });
}).catch((err) => {
  console.log('提交失败')
})

因为支付是异步进行的，因此须要前端去查询该笔订单是否支付成功

对于交互方式1，因为支付页面已经转移到支付宝收银台，因此在支付宝收银台支付成功后，支付宝收银台会自动跳转回return_url(return_url是咱们当初跳到支付宝收银台时带上的参数，通常指向支付成功页)。

不过因为咱们使用的是window.open打开的新页面，因此当用户回到咱们的收银台时，咱们须要打开一个弹框，主动询问用户是否支付成功。若是用户点击了支付完成，咱们须要查询该笔订单是否真正支付成功。

// 打开支付宝收银台
window.open(payUrl);

// 在当前页面打开弹窗，询问用户是否支付成功
createFinishWindow()

对于交互方式2，因为仍然是在当前页进行扫码支付，所以建立二维码弹窗后，咱们立刻就要轮询进行查询订单状态

const payNum = '123abc'

// 建立一个二维码弹窗
qrcode({
  width: 175,
  height: 175,
  url: payUrl
});

// 轮询查询订单状态
function getPayStatus() {
  ajax({ 
    url: '/api/getPayStatus', // 支付状态api
    data: {
      payNum: payNum, // 订单号
      other: 'demo', // 其余参数
    },
    type: 'POST'
  ).then((res) => {
    if (res.payStatus === 0) {
      // 支付成功，跳到成功页
      window.location.href = `/success/${payNum}`;
      clearTimeout(statusTimeId);
    } else {
      // 还未支付，继续轮询
      statusTimeId = setTimeout(getPayStatus, 3000);
    }
  }).catch((err) => {
    // 接口报错，继续轮询
    statusTimeId = setTimeout(getPayStatus, 3000);
  })
}



let statusTimeId = setTimeout(getPayStatus, 3000);

触屏端

交互方式：

在触屏端点击支付宝支付，页面直接跳转到支付宝收银台，该页面会尝试唤起手机上的支付宝app

其实触屏端原理和pc端基本同样，只不过在触屏端，有可能须要本身拼装一个form表单，而不是直接跳到连接（固然主要看后端的实现）

const payNum = '123abc';

// 模拟表单提交
function formSubmit(formData, url) {
    const form = $('<form method="post" target="_self"></form>');
    form.attr('action', url);
    let input;
    $.each(formData, function (i, v) {
      input = $('<input type="hidden">');
      input.attr("name", i);
      input.attr("value", v);
      form.append(input);
    });
    $(document.body).append(form);
    form.submit();
    form.remove();
  }

ajax({ 
  url: '/api/alipay', // 支付api
  type: 'POST',
  data: {
    payNum: payNum, // 订单号
    other: 'demo', // 其余参数
}).then((res) => {
  const { formData, url } = res;
  if (formData) {
    // 须要前端本身构建表单
    formSubmit(formData, url)
  } else {
    // 直接跳转连接(后端已经拼装好表单)
    window.location.href = url;
  }
}).catch((err) => {
  console.log('提交失败')
})

支付成功后，同理支付宝会跳转到return_url的地址

须要注意：在微信浏览器里，支付宝是不能被唤起的(微信生态圈平常封杀)

解决方法：

方法一：微信环境隐藏支付宝入口

方法二：微信环境，点击支付宝支付，引导用户使用其余浏览器打开页面

JSAPI

若是咱们能诱导用户使用支付宝客户端的扫一扫打开咱们触屏端的收银台页面，那么其实咱们也可使用支付宝提供的JSAPI唤起收银台

这也是b站实现微信，支付宝，qq同一个二维码都能付款的原理，这三个客户端都提供了本身的JSAPI，用户用不一样的客户端扫码，都会进入同一个页面（b站实现），这个中转页根据容器环境，调用不一样JSAPI的支付功能

支付宝H5开放文档

关于jsbridge的知识，能够查看我以前的文章jsbridge初探

JSAPI的简单示例

function ready(callback) {
  // 若是jsbridge已经注入则直接调用
  if (window.AlipayJSBridge) {
    callback && callback();
  } else {
    // 若是没有注入则监听注入的事件
    document.addEventListener('AlipayJSBridgeReady', callback, false);
  }
}
ready(function () {
  // 显示一个提示框
  AlipayJSBridge.call('toast', {
    content: 'hello'
  });
});

唤起收银台须要使用Alipay JSSDK

<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

<button id="J_btn" class="btn btn-default">支付</button>
<script>
  var btn = document.querySelector('#J_btn');
  btn.addEventListener('click', function(){
    ap.tradePay({
      tradeNO: '201802282100100427058809844'
    }, function(res){
      ap.alert(res.resultCode);
    });
  });
</script>

app端

如今的app基本都是Hybrid App，若是在app端，你的收银台页面不是原生实现的，那么就能够直接使用webview加载触屏端的线上收银台便可

手机网站支付产品不建议在APP端使用

这是支付宝官网文档建议的，所以若是你但愿获得最佳的支付体验，建议客户端的开发同窗接入支付宝SDK，固然这部分已经超出了前端的范围

不过通常在app端中，咱们仍然使用webview加载触屏端的前端页面，只不过在app中，咱们的前端代码，经过jsbridge，调用客户端的支付方法便可

const payNum = '123abc';

// 支付回调函数
window.ali_pay_callback = function(res) {
  if (res.status === 0) {
    // 支付成功
  } else {
    // 支付失败
  }
}

// APPSDK是webview注入的全局对象，能够调用原生方法
APPSDK.invoke('ali_pay', {
  payNum: payNum, // 订单号
  other: 'demo', // 其余参数
}, 'ali_pay_callback');

小程序

小程序唤起支付文档

小程序支付和APP支付的支付流程与体验基本一致，能够在当前页面唤起支付宝收银台

const payNum = '123abc';

my.request({
  url: 'https://demo.com/api/alipay',// 须加httpRequest域白名单
  method: 'POST',
  data: { // data里的key、value是开发者自定义的
    from: '支付宝',
    payNum: payNum, // 订单号
    other: 'demo', // 其余参数
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: 'complete'});
  }
});

支付宝支付小结

咱们从pc端，触屏端，app端三个方面了解了支付宝支付的基本原理。能够看出：支付的前端实现，其实并不复杂，而真正的难点在于后端支付系统的实现。至于最难的支付宝唤起问题，其实支付宝收银台自身已经实现了唤起功能，无需咱们实现

微信

微信支付开发文档

pc端

扫码支付文档

交互方式：

因为微信并无像支付宝提供了pc端的官方收银台，因此点击微信支付，咱们通常都是直接弹出二维码弹窗，要求用户进行扫码支付，用户扫码则能够直接唤起微信支付。弹出二维码的同时，咱们须要当即轮询查询支付状态。

const payNum = '123abc';

ajax({ 
  url: '/api/weixinpay', // 支付api
  type: 'POST',
  data: {
    payNum: payNum, // 订单号
    other: 'demo', // 其余参数
}).then((res) => {
  const { qrUrl } = res;

  // qrUrl是微信的扫码地址，通常是 weixin://wxpay/bizpayurl?pr=P1oi4x6 ，这段schema经过微信扫一扫能够唤起微信支付
  qrcode({
    width: 175,
    height: 175,
    url: qrUrl
  });

  // 开始轮询支付结果
  // 代码省略，能够参考以前的支付宝pc端实现
}).catch((err) => {
  console.log('提交失败')
})

触屏端

H5支付文档

交互方式：

在触屏端点击微信支付，页面直接跳转到微信支付中间页，该页面会尝试唤起微信支付

与支付宝收银台不一样的是，微信支付中间页在调起微信收银台后超过5秒，会自动跳转回redirect_url，所以没法保证页面回跳时，支付流程已结束，因此商户设置的redirect_url地址不能自动执行查单操做，应让用户去点击按钮触发查单操做

// 代码省略，基本和支付宝的触屏端同样

// 微信支付中转页通常是这种格式的url地址

// https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx111408048537349a5434e53d1930739300&package=1982317760&redirect_url=https://m.imooc.com/myorder

须要注意：微信支付中转页通常不能直接用浏览器访问，由于中转页须要判断referer是不是商户申请H5时提交的受权域名。若是你直接用浏览器访问，referer为空，致使页面并不会加载成功。若是是APP里调起H5支付，须要在webview中手动设置referer

还有一种取巧的方法，咱们能够不使用微信中转页，直接在当前页唤起支付

// 后端直接返回一段schema

const schema = `weixin://wap/pay?appid%3Dwxd6841de60b02faef%26noncestr%3D095525b24fc94111a3663068c8dc8a90%26package%3DWAP%26prepayid%3Dwx091027118037832f961440d31092022500%26sign%3D2CF5A14607C6AAEDE382758CA87B973F%26timestamp%3D1591669631`

// 移动端就能唤起微信支付
window.location.href = schema;

不过这种方法，schema容易被第三方app的webveiw拦截，从而调起支付失败。好比在微博访问收银台，若是使用该方法，就会唤起微信失败。所以，仍是建议使用微信中转页，由中转页唤起微信比较保险。固然，支付宝里无论用啥方法，都没法进行微信支付(相爱相杀)。

JSAPI

若是咱们的收银台页面是在微信浏览器里打开的，那么咱们可使用微信提供的JSAPI唤起支付

JSAPI支付文档

const payNum = '123abc';

function onBridgeReady(wxJsApiParam) {
    window.WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      wxJsApiParam,//josn串
      function (res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
          // 支付成功
          location.href = `/success/${payNum}`;
        } else if (res.err_msg == "get_brand_wcpay_request:fail") {
          // 支付失败
        }
      }
    );
  }

function weixinPay(wxJsApiParam) {
    if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(wxJsApiParam) }, false);
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', function () { onBridgeReady(wxJsApiParam) });
        document.attachEvent('onWeixinJSBridgeReady', function () { onBridgeReady(wxJsApiParam) });
      }
    } else {
      onBridgeReady(wxJsApiParam);
    }
  }

ajax({ 
  url: '/api/weixin_jsapi', // 支付api
  type: 'POST',
  data: {
    payNum: payNum, // 订单号
    other: 'demo', // 其余参数
}).then((res) => {
  const { jsapiData } = res;
  // jsapiData是一串json字符串，里面包含了appId，paySign等各类数据，用来调起微信支付
  weixinPay(JSON.parse(jsapiData));
}).catch((err) => {
  console.log('提交失败')
})

使用JSAPI须要咱们有微信公众平台，由于下单必传的参数openid，须要咱们在公众平台设置获取openid的域名，才能获取成功

除了使用微信浏览器内置的WeixinJSBridge对象，咱们也可使用JSSDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
wx.chooseWXPay({
  timestamp: 0, 
  nonceStr: '', 
  package: '', 
  signType: '', 
  paySign: '',
  success: function (res) {
    // 支付成功后的回调函数
  }
});
</script>

app端

APP支付文档

H5支付不建议在APP端使用，如须要在APP中使用微信支付，请接APP支付

微信官方文档一样不建议在APP端使用触屏端的支付方式，所以最好接入微信SDK。前端一样可使用jsbridge调用客户端的微信支付方法，能够参考前面支付宝的app端方式。

小程序

小程序支付文档

小程序支付其实和微信JSAPI支付很是相似，都须要先获取到Openid，调用相同的API

wx.requestPayment({
  timeStamp: '',
  nonceStr: '',
  package: '',
  signType: 'MD5',
  paySign: '',
  success (res) { },
  fail (res) { }
})

微信支付小结

微信支付在JSAPI和小程序的流程上比较复杂些，由于涉及到公众号access_token openid 等一系列权限的获取。不过总的来讲，复杂难度主要仍是在后端方面。

其余第三方支付

除了主流的微信支付和支付宝支付，咱们有可能还须要对接一些其余第三方支付平台，好比：QQ，PayPal, 银联，京东白条，各大银行等等，固然原理也是大同小异。

同时，咱们也可使用第三方聚合支付平台，好比度小满支付，这些平台已经集成好了各大银行信用卡和存储卡支付功能，咱们能够很容易的接入sdk，节约开发成本。

总结

web支付因为开发条件要求很高(至少要有注册公司)，所以大部分同窗平常工做接触并非不少。固然本文也仅仅是回顾了下平常开发中，前端在web支付中的一些常见套路。

真正实际项目里，咱们仍然会面临不少问题和难点，这时就须要咱们见招拆招了。

参考

  1. web开发中的支付宝支付和微信支付
  2. 微信支付文档
  3. 支付宝文档
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程