信息落地项目，涉及财联社文章栏目支付流程。为方便客户，APP引入了支付宝、微信支付等第三方支付方式。对于前端H5来说，实现起来并不难。整个购买过程总结如下。1.支付前风险等级的验证对于证券类APP的客户，在进行支付交易等之前，需要对产品的风险等级和用户的风险等级做出适当的判断，适度匹配可以进入支付流程。因此，当支付按钮被点击时，我们不会立即调用支付api。一般方法是调用封装好的风险匹配检测方法，匹配成功时通过回调函数调用购买流程：NavUtil.checkRiskLevel(productRiskLevel,()=>{_go2Pay();});二、支付流程完整的支付流程主要有以下几个步骤：首先调用创建订单接口，传入需要的相关参数（如支付方式、价格、商品信息等），这里有一点要第一步要注意，就是一般我们需要传入一个callbackUrl，也就是支付完成后需要跳转的页面地址：let{pathname}=window.location;让callbackUrl='';callbackUrl=${路径名}#/pay/result?orderId=;创建一个返回结果的订单接口，返回结果中会包含一个根据callbackUrl生成的地址，根据这个地址，我们调用三方支付方法；三方支付方式：本方法中类型支付方式（支付宝、微信）、内容生成地址（订单结果页）；三方支付方式中设置“支付处理”页面的跳转地址：${origin}${pathname}#/payment/paying?类型=${类型}；将订单结果页面地址存储在店铺中，然后跳转到“支付处理页面”；go2ThirdPay(type,content){let{origin,pathname}=window.location;leturl=${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）显示loadingpayment标志（2）调用支付方法，首先从store获取储值输入的订单结果页面的地址；（3）根据支付方式，选择不同的方式调用三方支付APP。对于支付宝支付方式，创建一个div包元素，将回调地址放入其中，提交表单调用：letdiv=document.createElement('div');div.innerHTML=payContent;document.body.appendChild(div);document.forms[0].submit();对于微信支付方式，直接设置浏览器地址为回调地址即可window.location.href=payContent;
