Android 集成微信h5支付

集成h5支付也很久了,记录一下,其实h5支付的话没有什么比较难受的操作,我觉得 原生 小程序 h5 这三种支付h5是最简单的,好了直接上干货吧,我们调起微信支付之前肯定是拿到一个商品的ServiceId或者其他的信息去请求接口,用来获取激活调起微信支付的参数,送h5也是一样的只不过h5调起这个接口返回的是一个链接,我们用这个链接用webView就可以打开微信h5支付,ok,下面是代码,你的任务就是跟着我一步步的来就可以了:

在接入H5微信支付时，如果是APP里调起H5支付，需要在webview中手动设置referer，如果不设置的话就会出现以下问题,如下

所以一定要设置,至于你说这个授权地址是什么的话,其实刚开始的时候我也纠结过这个问题,后来想了一下这个域名咱们前端最好不要写死,至于为什么,因为如果你所在的公司产品很多,微信支付很多的话,当你这个正在使用的微信支付被封号的话,可以后台直接切换这个授权的域名,就算你们产品少我也是建议直接从后台获取:

• Map extraHeaders = new HashMap();
  extraHeaders.put("Referer", "商户申请H5时提交的授权域名");//例如 http://www.baidu.com 
  webView.loadUrl(targetUrl, extraHeaders);//targetUrl为微信下单地址

接下来我就不多说了直接上代码了:

webview:这个是WebView布局你可以写在PayActivity里面gone掉,效果就是调起微信支付的时候不会跳转到另一个Activity不会展示过程,只会在完成之后直接调起:

weChatInfo.getReferer() : 就是商户申请h5时提交的授权域名
weChatInfo.getWebUrl()  : 这个是用来调起h5支付的URL

webView.getSettings().setJavaScriptEnabled(true);//支持JS
webView.getSettings().setDomStorageEnabled(true);//解决显示不全的问题

 if (TextUtils.isEmpty(weChatInfo.getReferer())) {
     ToastUtil.showLongToast(PayActivity.this, "网络不给力～");
    } else if (TextUtils.isEmpty(weChatInfo.getWebUrl())) {
     ToastUtil.showLongToast(PayActivity.this, "网络不给力～");
    }

    initdata(weChatInfo.getReferer(), weChatInfo.getWebUrl());

• 然后是initdata方法

//调起微信h5支付
    private void initdata(final String referer, String weburl) {
        Map<String, String> extraHeaders = new HashMap<>();
        extraHeaders.put("Referer", referer);
        webView.loadUrl(weburl, extraHeaders);
        webView.setWebViewClient(new WebViewClient() {

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
//                return super.shouldOverrideUrlLoading(view, url);

                if (url == null) return false;
                try {
                    //弹窗
                    initdialog();
                    alertDialog.show();
                    WindowManager m = PayActivity.this.getWindowManager();
                    Display d = m.getDefaultDisplay();  //为获取屏幕宽、高
                    android.view.WindowManager.LayoutParams p = alertDialog.getWindow().getAttributes();  //获取对话框当前的参数值
                    //p.height = (int) (d.getHeight() * 0.3);   //高度设置为屏幕的0.3
                    p.width = (int) (d.getWidth() * 0.75);    //宽度设置为屏幕的0.5
                    alertDialog.getWindow().setAttributes(p);     //设置生效

                    if (url.startsWith("weixin://wap/pay?")) {
                        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                        startActivity(intent);
                        return true;
                    } else if (url.startsWith("https://wx.tenpay.com")) {
                        Map<String, String> extraHeaders = new HashMap<>();
                        extraHeaders.put("Referer", referer);
                        view.loadUrl(url, extraHeaders);
                        return true;
                    }
                } catch (Exception e) {
                    //防止crash (如果手机上没有安装处理某个scheme开头的url的APP, 会导致crash)
                    return true;//没有安装该app时，返回true，表示拦截自定义链接，但不跳转，避免弹出上面的错误页面
                }
                // 在APP内部打开链接，不要调用系统浏览器
                view.loadUrl(url);

                return true;
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                handler.proceed();
            }
        });
    }

• initdialog

//微信h5支付弹窗
    private void initdialog() {
        AlertDialog.Builder dialog = new AlertDialog.Builder(PayActivity.this, R.style.AlertDialog);
        View inflate = LayoutInflater.from(PayActivity.this).inflate(R.layout.dialog_wechat_h5_pay, null);
        tv_wechat_success = (TextView) inflate.findViewById(R.id.tv_wechat_success);
        tv_wechat_failure = (TextView) inflate.findViewById(R.id.tv_wechat_failure);

        tv_wechat_success.setOnClickListener(this);
        tv_wechat_failure.setOnClickListener(this);
        dialog.setView(inflate);
        alertDialog = dialog.create();
        alertDialog.setCancelable(true);
        alertDialog.setCanceledOnTouchOutside(false);
    }

• 全局的变量

    @BindView(R.id.wv_pay_h5)
    WebView webView;    

    AlertDialog alertDialog;
    private TextView tv_wechat_success;
    private TextView tv_wechat_failure;

• dialog_wechat_h5_pay.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="300dp"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@drawable/round_white"
    android:layout_height="wrap_content">

    <TextView
        android:gravity="center"
        android:padding="15dp"
        android:textSize="15dp"
        android:text="请确认微信支付是否成功"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="#3333"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <TextView
        android:gravity="center"
        android:id="@+id/tv_wechat_success"
        android:textColor="#FC576C"
        android:padding="15dp"
        android:textSize="15dp"
        android:text="已完成支付"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <View
        android:background="#3333"
        android:layout_width="match_parent"
        android:layout_height="1dp"/>

    <TextView
        android:gravity="center"
        android:id="@+id/tv_wechat_failure"
        android:textColor="#8333"
        android:textSize="15dp"
        android:text="支付遇到问题，重新支付"
        android:padding="15dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

效果就是这个样子,具体自己请求的时候查看

• activity_pay.xml (webView)

    <WebView
        android:visibility="gone"
        android:id="@+id/wv_pay_h5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

• AlertDialog.Builder dialog = new AlertDialog.Builder(PayActivity.this, R.style.AlertDialog); 
  --> R.style.AlertDialog

在 res --> values --> styles.xml

<style name="AlertDialog" parent="Base.Theme.AppCompat.Light.Dialog">
        <!-- 这里设置背景为透明，为了隐藏边框 -->
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowNoTitle">true</item>
        <!-- 这里是修改顶部标题背景颜色，具体颜色自己定，可以是图片 -->
        <item name="android:topDark">#fff</item>
        <!-- 这里是修改内容区域背景颜色 -->
        <item name="android:centerDark">#fff</item>
        <item name="android:windowIsTranslucent">true</item>
        <!--<item name="android:windowAnimationStyle">@+android:style/Animation.Translucent</item>-->
    </style>

到这里h5支付就算是集成完成了,需要的小伙伴可以去集成一下,应该没有什么缺少的文件了,如果有欢迎大家在下面留言然后我再补全,希望可以帮到你,避免踩坑,谢谢