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