但微信在h5支付未出来前必威:,WapPay就是微信

相信大家,都有这样的需求。一个app中,要给多个商家支付,但微信在h5支付未出来前,是不支持的。现在终于可以用了,what,但是听说坑一堆。。下面让我入坑。

WapPay(微信h5支付)回调问题

        项目中集成的微信支付一直都是APP支付的SDK,去年开始接触到了WapPay,WapPay就是微信h5支付。它不依靠APP端的SDK,在APP的web页面中,直接由h5直接向微信发起支付请求交互。然而这个WapPay,跳转到微信后,点击取消,或者后续完成支付都会跳转到Safari,不返回原APP,这就很尴尬了。最近又接了一些三方业务,购买类还是使用WapPay,所以需要解决这个返回问题。

前言

H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求。同时,由于H5链接传播十分方便、来源不易追踪,商户需要特别注意做好防钓鱼、防刷单的处理,控制风险。

备注: 本文档重点介绍与前端相关的以及一些准备工作的部分,部分后端接口实现的不重点描述

嘿哈.jpg

android端集成“一网通”支付的demo

其实安卓还算比较好弄,坑位比较少。首先,大家网上一搜索

基于schemes

        先让我们设置APP的schemes:

必威 1

设置APP的schemes

        h5向微信发起支付的时候有个redict_url_参数,在该参数中设置的是回调页面地址,如支付结果页地址。我们支付成功,和取消支付都是跳转订单列表地址,所以只要一种url。但是这个url设置需要以APP中设置的schemes打头。例如你设置APP的schemes是SugarFree,那么这个url则是SugarFree://…..。后续的…..拼接回调地址,这边我们没有把域名拼接进去。如跳转地址如果是百度:

        然后再位置支付后,跳转到Safari中,url为设置的redict_url,例如跳转的是:SugarFree://www.baidu.com,Safari会提示是否在你的APP中打开:

必威 2

Safari中输入带有schemes的url

        点击确定后就会跳回APP。然后会走系统AppDelegate中的这个方法:

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary *)options

        里面能获取到url,即会跳地址。如下图:

必威 3

跳回APP进入的方法

        然后在对应url进入对应方法处理后续的跳转,我这边采用通知的形式,回调到APP时发送通知,通知接收方是web基类或者具体web页面,对应跳转结果页面:

必威 4

web基类中的接受通知跳转处理

微信支付场景

必威 5

微信支付场景

参考文章:
1.大招之 官方文档
2.不错的博文
3.苹果验证通用链接是否可用的网站
4.通用链接文件存放的server需要支持https 苹果支持的https证书列表

这段时间公司在做招商银行"一网通"支付的开发工作,当中有些遇到的坑跟大家分享一下,还有就是网上相关可参考的文章确实不多,所以写点自己的心得提高一下大家的效率。文章可是有提供本人写的一个“一网通”支付的demo,感兴趣的同学可以clone下来看看,如果有什么写的不好的地方欢迎指教。

那么都是初级阶段的入门练气。

待完善

1.基于universal link处理

2.通知给基类做url跳转优化

h5支付场景介绍

必威 6

h5支付场景介绍

简单粗暴,有一个需求:


  • 手机打开我们的网站,点击打开按钮或者收藏按钮,用户如果已经安装app,跳转到app做相应的操作。
  • 如果没有安装app,则跳转到应用商店提示用户下载安装。

“一网通”与支付宝支付,微信支付的差异##

已支付宝为例解释一下第三方app是如何调取支付宝完成支付动作的,微信和支付宝大体逻辑相似,有些不一样的地方后面会做说明。

“支付宝”支付分两种情况:

 // 在webview 添加微信支付的过滤 @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { L.e("跳转至--》" + url); if (url.startsWith("alipays:") || url.startsWith("weixin://wap/pay?")) { try { startActivity(new Intent("android.intent.action.VIEW", Uri.parse; } catch (Exception e) { L.e("无支付app", e); } return true; } } 

准备工作

方法1: URL Scheme


    holy 个 shit 啊,第一时间想到的是url scheme ,然后将参数配置在url scheme后面,唤醒app再进行页面跳转逻辑。

    但残酷的现实是企鹅和微信都把url scheme 唤醒app这种方式给禁了。

你的手机已安装支付宝app#####

当第三方app发起支付动作,第三方app内集成的支付宝的sdk会通过进程间的通讯把相关的支付信息传给支付宝app,支付宝app完成支付动作后,再通过进程间的通讯告诉第三方app支付的结果。(支付宝实现进程间的通讯是通过handler实现,而微信是通过aidl实现,个人觉得支付宝的实现方式更利于我们程序员开发)

好的,到了这里,你发现你已看完了 降龙十八掌 的绝学之书,并且已然了熟于心。

申请入口

必威 7

申请入口

方法2: meta标签


    然后考虑了在网页上对meta 标签做手脚,可以实现类似下图的效果:

meta标签示例.jpeg

meta标签的格式如下:

 <meta charset="UTF-8" name="apple-itunes-app" content="app-id=1234567890, affiliate-data=myAffiliateData, app-argument=yourScheme://">

    这样添加meta标签后的网页,使用safari打开的时候,就会在顶部显示自己app的导航条。
    如果没有安装app点击能够跳转到appstore去下载,如果安装了app就能直接通过顶部的meta标签唤醒app了。

你的手机没有安装支付宝app#####

那这个时候怎么办呢?当然不用担心,支付宝的sdk里集成了一个h5页面,如果发现你的手机没有安装支付宝app,那这个时候它就会唤起这个h5页面让用户通过这个h5页面完成支付动作,当然这种方式肯定是没有直接用支付宝app方便的。

说了这么多好像跟“一网通”没有半毛钱关系,先别急,现在开始来说说“一网通”。其实“一网通”和我上面说的两种情况中的第二种是一样的,不同的是支付宝已经把他封装成sdk,可以很方便的提供给开发者使用,而“一网通”只是提供了一个键盘的sdk其他的相关逻辑(如:webview的加载,签名,加密,支付结果的回调出里)都要开发者自行解决。说道这是不是感觉有点坑。

你发出了你的第一掌,开始测试微信h5支付了,发现出现如下界面

ua确定

为了保证最后的微信h5能成功,请确认需要的ua能把案例的微信支付唤起,其本质是一个url连接,带有唤起微信支付的功能。
案例url:http://wxpay.wxutil.com/mch/pay/h5.v2.php
参考的生成地址格式(该页面首先进行安全校验,通过后才会唤起支付,不通过则会提示各种问题):https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx201711292155101b1c4a8fce0223911410&package=3611216311

方法3:Why Universal Links?


    上面两种方式都能实现某一方面的需求,但无法完美解决。于是就想到了iOS9之后的Universal Links。

1.接入“一网通”的键盘

这里其实没什么好讲的官方有提供demo view, String url)的方法(这个在 android5.0以后就被shouldOverrideUrlLoading(WebViewWebResourceRequest)取代了)。

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)@Overridepublic boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { // 使用当前的WebView加载页面 CMBKeyboardFunc kbFunc = new CMBKeyboardFunc( view.getContext; if(kbFunc.HandleUrlCall(view, request.getUrl().toString == false) { return super.shouldOverrideUrlLoading(view, view.getUrl; }else { return true; }}@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) { DebugLog.e("shouldOverrideUrlLoading: "+url); // 使用当前的WebView加载页面 CMBKeyboardFunc kbFunc = new CMBKeyboardFunc( view.getContext; if(kbFunc.HandleUrlCall(view, url) == false) { return super.shouldOverrideUrlLoading(view, url); }else{ return true; }}

#######2,如何加载WebView因为现在有很多app开发是h5和native的混合开发,加载的“一网通”支付链接是通过form请求

<form action="请求地址" method="post" ><input type="hidden" name="jsonRequestData" value='以上json字符串' /></form>

如果是h5跳转用上面的方式如果是native加载webview使用下面的方式

String jsondata = "jsonRequestData="+josn参数;webview.postUrl(payUrl,jsondata.getBytes;

payUrl是“一网通”的接口链接

本文由必威发布于必威-编程,转载请注明出处:但微信在h5支付未出来前必威:,WapPay就是微信

相关阅读