前端支付流程-微信支付&支付宝支付

CrisyHuang

2021年10月29日 22:52 · 阅读 3741

H5端支付

微信支付-H5支付

定义

H5支付主要是在手机、ipad等移动设备中通过浏览器来唤起微信支付的支付产品。

时序图

支付宝支付-手机网站支付

定义

手机网页应用接入该能力后，用户在手机网站进行支付时，可通过浏览器唤起支付宝客户端进行付款，实现和App支付相同的支付体验。

时序图

关键代码

/**
 * @description: 在当前页面打开链接
 * @param {string} url 链接
 * @return {*}
 */
export function openLink (url: string): void
{
  const a = document.createElement('a');
  a.setAttribute('href', url);
  a.setAttribute('id', new Date().getTime().toString());
  document.body.appendChild(a);
  a.click();
}

/**
 * @description: 根据不同支付方式，发起支付流程
 * 注1：若生成支付宝支付订单，通过提交Form表单的形式，唤起支付宝支付
 * 注2：若生成微信支付订单，访问微信链接，唤起微信支付
 * @return {*}
 */
function handlePayByChannel ()
{
  // 支付宝手机网站支付
  if (Number(payChannel) === 1)
  {
    const alipayContainer = document.getElementById('alipay');

    alipayContainer.innerHTML = payUrl;
    // H5端不能设置_blank，否则APP内无法调起支付宝的支付页面
    // alipayContainer.children[0].target = '_blank';
    alipayContainer.children[0].submit();
  }
  // 微信H5支付
  else if (Number(payChannel) === 3)
  {
    // 设置 redirect_url，支付成功后会自动打开手机浏览器访问链接
    // const baseUrl = getBaseUrl();
    // const encodedDomain = encodeURIComponent(getDomainFromUrl(baseUrl));
    // openLink(`${payUrl}&redirect_url=${encodedDomain}`);

    openLink(payUrl);
  }
}
复制代码

PC端支付

微信支付-Native支付

定义

Native支付是商户系统按微信支付协议生成支付二维码，用户再用微信“扫一扫”完成支付的模式。该模式适用于PC网站支付、实体店单品或订单支付、媒体广告支付等场景。

时序图

支付宝支付-电脑网站支付

定义

用户通过支付宝 PC 网站收银台完成支付，交易款项直接汇入商户支付宝账户，实时到账。

时序图

小结

支付宝支付：PC端和H5端几乎一致，都是通过浏览器来唤起支付宝平台；
微信支付：PC端采用二维码扫码的形式，H5端是通过浏览器来唤起微信客户端；
H5端还需考虑在微信浏览器中的场景，这种情况需要使用JSAPI支付，即公众号支付......

欲知后文如何，且听下回分享~