资讯落地我的项目中，波及财联社文章和栏目的付费流程，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;