android WebView套壳 H5微信支付

     看博客,首先得看日期,首先吐槽下,第一次做webview  套壳的android  APP  ,项目有微信支付这一块,就百度搜 看别人的博客,有的说android  webview H5

微信支付可以但发布的资料就那么点,留言也没回复,有的说不行,等等一大堆问题,虽然每一篇都把自己遇到的问题,说出来了,有的说成功了 ,但关键的技术点没描述清

楚,我也是跟着他们的思路摸着走,还是耽误了不少时间的,所以在这里把很核心的以及前辈们指出来 但不清楚的点,用自己的理解表达出来,也希望帮到有同样问题的你。

首先的说,webview 套壳 完全可以做微信H5支付,不需要借助其他外部浏览器(其实还是用的微信自身的协议),先看看微信官方给的一个微信外浏览器吊起微信的链接:

http://wxpay.wxutil.com/mch/pay/h5.v2.php   怎么用呢? 刚开始我是把他复制到电脑的链接里面,出来的如下:

点击立即购买:

 仔细看下这个链接weixin://wap/pay?prepayid%3Dwx20171207142633766b07105c0896981244&package=2085452966&noncestr=1512628098&sign=6c930a4986e38df13f79c7af48313ea2 

prepayid  package  noncestr sign  这些不都是微信支付请求的必须带参嘛,其实weixin://  这个就是默认打开微信的协议  就像电脑端的http:// 一样的,

其实微信官方给的这个链接http://wxpay.wxutil.com/mch/pay/h5.v2.php 正确的测试方式是:打开手机浏览器(uc  qq  360 ....)把这个链接放进去点击支

付去吧,瞬间唤起了手机上的微信支付,此处请注意不是http://wxpay.wxutil.com/mch/pay/h5.v2.php能唤起微信支付,而是立即购买这个按钮下的链接:

weixin://wap/pay?prepayid%3Dwx20171207142633766b07105c0896981244&package=2085452966&noncestr=1512628098&sign=6c930a4986e38df13f79c7af48313ea2    weixin://  负责唤起手机上的微信的协议,后面的  prepayid  package  noncestr sign 这些是支付请求参数,

于是微信唤起跳到支付界面了,就是这样。下面开始核心:

前提得把H5 支付的申请了,这个一天吧 就可以下来了,通过后 在开发配置把支付域名填进去 到这里准备工作完成开始WebView微信H5  APP支付

Log.d(TAG," referer");
Map<String, String> extraHeaders = new HashMap<String, String>();
extraHeaders.put("Referer", "http://************.com");

view.loadUrl(url, extraHeaders);


这个referer  在哪里加呢,其实就是在你点击支付前给加进去,比如购买流程:商品详情页------>立即购买------->提交订单------->微信支付 ,那么建议在提交订单这里加上,怎

么加?webview 的

shouldOverrideUrlLoading方法

我们可以截获提交订单的url

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    // TODO Auto-generated method stub
    Log.d(TAG, "url=" + url);
    if (url.contains("http://***********")) {

        Log.d(TAG," referer");
        Map<String, String> extraHeaders = new HashMap<String, String>();
        extraHeaders.put("Referer", "http://*****.com");
        view.loadUrl(url, extraHeaders);
    }



这里的url.contains  也可以根据你的需要改成url.equals();


上面的url 是当点击微信支付时,服务端向微信的请求的链接:https://wx.tenpay.com/cgi-bin/mmpayweb-bin

/checkmweb?prepay_id=wx201712071300244a29831d4e0272232957&package=3866480500   

如果配置正常的话,微信会给我们返回一个支付链接也就是:weixin://wap/pay?prepayid%3Dwx201712071300244a29831d4e0272232957&package=3866480500&

noncestr=1512622825&sign=04064ca06dfa7b949bd7d8aabe492c72 

而此时webview的

public boolean shouldOverrideUrlLoading(WebView view, String url) 

会默认这个url是一个普通的链接就去加载它,于是就出现了白板,此时正确的方式是:

同样截获返回的这个url 并处理:

if (url.contains("weixin://wap/pay?prepayid")) {
  try{

    Log.d(TAG,"intent pay");
    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_VIEW);
    intent.setData(Uri.parse(url));

   startActivity(intent);    
    return true;   
    }catch (Exception e){
      Log.d(TAG,"START ACTIVITY FAILE ");
      Toast.makeText(MainActivity.this,"请下载安装最新版微信",Toast.LENGTH_SHORT).show();
   }
  }

intent.setAction(Intent.ACTION_VIEW);
intent.setData(Uri.parse(url));


这个方法 我们都不陌生,刚接触android时相信 我把url 都写成 百度的连接 于是 他会跳出来让我们选择要加载的浏览器(如果手机只有系统默认浏览器就是直接打开,不用选择),再打开,因为这个链接是http://协议 

而现在加载的是weixin://  也就是打开微信的协议,于是唤起微信,吊起支付界面了 , 代码里面的try  catch  是当用户没安装微信或微信版本不支持支付时,避免APP崩掉的

界面。

       就这样webview封装微信H5支付搞定,这些都是个人理解,有什么不对的地方还请指点,有不明白也欢迎留言,看到会回复,希望能帮到遇到同样问题的你!


  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过flutter的webview_flutter插件,我们可以在应用中嵌入支付宝和微信支付,并实现支付功能。使用webview_flutter的步骤如下: 1. 首先,在`pubspec.yaml`文件中引入webview_flutter插件。可以在dependencies部分添加`webview_flutter: ^2.0.0`,然后运行`flutter pub get`命令进行依赖安装。 2. 在需要嵌入支付功能的页面中,导入webview_flutter插件。在页面的顶部引入`import 'package:webview_flutter/webview_flutter.dart';`。 3. 在页面的主体中,创建一个WebView组件,并指定需要加载的URL。例如,在Container中使用WebView组件,可以使用如下代码: ```dart Container( child: WebView( initialUrl: 'https://www.alipay.com/', javascriptMode: JavascriptMode.unrestricted, ), ) ``` 4. 在支付宝和微信支付的URL中,传递相关的支付参数,例如订单号、支付金额等。 5. 在WebView组件中,可以通过注册一个JavaScript channel来监听网页中的支付回调信息。例如,在页面初始加载完成后,可以通过使用`onPageFinished`回调方法来执行一段JavaScript代码,监听支付结果。在该代码中,可以通过调用与原生平台交互的方法,将支付结果返回到Flutter中进行处理。 6. 在Flutter中,可以根据支付结果展示相关的提示信息,例如支付成功、支付失败等。 需要注意的是,支付宝和微信支付的具体接口和参数可能会根据版本的更新而有所变化,所以在代码实现中需要根据最新的文档进行调整。同时,为了确保支付过程的安全性,建议在应用中对支付接口进行适当的安全设置,例如使用HTTPS协议,并对支付参数进行加密处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值