关于前端:H5项目中唤起第三方支付软件项目支付流程

资讯落地我的项目中，波及财联社文章和栏目的付费流程，APP 为不便客户应用，引入支付宝与微信领取的第三方领取形式，对于前端 H5 来说，实现起来并不艰难，现将整个购买流程总结如下。

一、领取前对危险等级的校验

    对于证券类 app 中的客户，个别进行领取交易等之前，须要对产品的危险等级和用户的危险等级做适当性的判断，适当性匹配才能够进入领取流程。故点击领取按钮，咱们并不会立马调用领取 api，通用的做法是调用封装好的危险匹配检测办法，并通过回调函数的形式，当匹配时调用购买流程：

NavUtil.checkRiskLevel(productRiskLevel, () => {

        _go2Pay();

      });

二、领取流程

    领取残缺流程为以下几个次要步骤：

• 首先调用创立订单接口，传入所需的相干参数（如领取形式，价格，产品信息等），在这一步骤有一个须要留神的点，就是个别咱们须要传入一个 callbackUrl，也就是之后领取实现后需跳转的页面地址：

    let {pathname} = window.location;

    let callbackUrl = ”;

    callbackUrl = ${pathname}#/pay/result?orderId=;

• 创立订单接口返回后果，返回后果会蕴含一个依据 callbackUrl 生成的地址，依据这个地址，咱们调用三方领取的办法；
• 三方领取办法：

此办法中的 type- 领取形式（支付宝，微信），content- 生成的地址（订单后果页面）；

在三方领取办法中设置了“领取解决中”页面的跳转地址：${origin}${pathname}#/payment/paying?type=${type};

在 store 中存入订单后果页面的地址，而后跳转“领取解决页面”；

go2ThirdPay(type, content) {

let {origin, pathname} = window.location;

let url = ${origin}${pathname}#/payment/paying?type=${type};

window.localStorage.setItem(STORAGE_KEY.PAYMENT_CONTENT, content);

console.debug(‘go2ThirdPay->’, url, content);

setTimeout(() => {

jumpToAppView({

url,

hasBottomBar: 0,

hasTitle: 0,

hasVideo: 0

});

}, 200);

}

• 领取解决页面做了些什么？

领取解决页面是一个两头过渡页面，解决了微信放弃领取时返回的跳转凌乱问题，在领取解决两头页面，做了如下几件事件：

（1）展现 loading 领取中标记

（2）调用领取办法，首先从 store 中获取之前存入的订单后果页面地址；

（3）依据领取形式，选用不同的形式唤起三方领取 app。

对于支付宝领取的形式，创立一个 div 包裹元素，将回调地址放入其中，表单提交即可唤起：

let div = document.createElement(‘div’);

div.innerHTML = payContent;

document.body.appendChild(div);

document.forms[0].submit();

对于微信领取的形式，间接将浏览器地址设为回调地址即可

window.location.href = payContent;