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支付，即公众号支付......
预知后文如何，且听下回分享~
