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

·  阅读 450

H5端支付

微信支付-H5支付

定义

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

时序图

sequence.png

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

定义

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

时序图

sequence.png

关键代码

/**
 * @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网站支付、实体店单品或订单支付、媒体广告支付等场景。

时序图

sequence.png

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

定义

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

时序图

sequence.png

小结

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

预知后文如何,且听下回分享~

分类:
前端
标签:
分类:
前端
标签: