H5收银台的对接集成体验
业务背景:
支付产品构建收银台能力。对于H5应用的商户,提供H5收银台的支付能力;对于App应用的商户,如果用户未安装该支付应用app,通过SDK拉起H5收银台完成支付。
商户应用集成H5收银台时的体验要求:
在手机浏览器上基础的接集成体验:
a. 商户拉起: 外部商户直接对接H5收银台时,通过post表单提交拉起H5收银台;或通过后台预下单获取到跳转地址,跳转到H5收银台;
b. 用户登录:对于外部商户集成,用户需要进行帐号登录的操作;但对于内部同一个账号体系的商户,可以通过鉴权方式实现免登录进入H5收银台;
c. 用户支付完成:通过商户下单传递的returnUrl,携带签名的支付结果跳转到商户订单结果页,重新将页签的控制权交到商户;如果商户未传returnUrl,则关闭页签。
d. 用户支付异常:同样携带异常信息跳转回商户订单结果页,商户引导用户重新挑选或支付;如果商户未传returnUrl,则关闭页签。
e. 用户支付返回:返回商户重新选择支付方式,可以通过页面后退回到商户支付方式选择页面。
对于其他场景的集成,实现方案及效果有一些差异,以下做具体的说明:
在内部生态app内拓展的H5商户集成体验:
b. 内部生态内的app,往往已经登录了账号,可以获取基本的账号id,用户只需验证密码即可进入;
各主流app扫码拉起H5收银台支付的集成体验:
a. 商户拉起:外部商户通过后台预下单的方式获取二维码地址,用户扫码进入H5收银台;
c. 用户支付完成:该场景商户未传递returnUrl,h5收银台调用宿主app的关闭接口,回收app首页; 异常和返回同理。
商户app集成SDK拉起H5收银台的集成体验:
a. 商户拉起: 外部商户app调用SDK的拉起收银台接口,SDK内的webview组件内下单拉起H5收银台。 此时,h5收银台占据整个视图,顶部显示header及后退关闭按钮以优化体验。
c. 用户支付完成:H5收银台支付结果传递给SDK,用户点击关闭按钮后,h5收银台关闭webview,SDK将支付结果通知给商户App;支付异常同理。
e. 用户支付返回:通过H5收银台顶部header的关闭按钮退出。
H5收银台的关键实现:
检测环境为SDK内拉起时,顶部显示header头及后退关闭按钮;
检测用户的页面左滑动作,默认回退。优先保证能返回到商户拉起时的页面。对于需要进行开户等复杂操作,无法通过返回时,则走关闭收银台逻辑;
在需要退出收银台时,优先返回returnUrl,再根据宿主app,调用不同方式关闭app回到首页;