记录下关于微信h5支付那点事儿(百分之80拷贝官方)

微信H5支付简介

H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。

微信官方体验链接:

http://wxpay.wxutil.com/mch/pay/h5.v2.php,请在微信外浏览器打开。

下面来看一张关于官方提供接口流程图:

1、用户在商户侧完成下单,使用微信支付进行支付

2、由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB

3、统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名“mweb_url”),商户通过mweb_url调起微信支付中间页

4、中间页进行H5权限的校验,安全性检查(此处常见错误请见下文)

5、如支付成功,商户后台会接收到微信侧的异步通知

6、用户在微信支付收银台完成支付或取消支付,返回商户页面(默认为返回支付发起页面)

7、商户在展示页面,引导用户主动发起支付结果的查询

8,9、商户后台判断是否接到收微信侧的支付结果通知,如没有,后台调用我们的订单查询接口确认订单状态

10、展示最终的订单支付结果给用户

表墨迹,上代码

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import java.util.HashMap;
import java.util.Map;

public class WebPayActivity extends Activity {

    private WebPayActivity mActivity = WebPayActivity.this;

    private WebView mWebView;

    // h5的url链接
    private static final String WX_H5_PAY_TEST_URL = "http://wxpay.wxutil.com/mch/pay/h5.v2.php";
    // 支付域名(公司申请H5的域名)
    private static final String AY_WX_H5_DOMAIN_URL = "http://wxpay.wxutil.com";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_pay);
        initView();
    }

    private void initView() {
        mWebView = findViewById(R.id.id_web_show);
        mWebView.getSettings().setJavaScriptEnabled(true);
        // referer 目前测试加不加都不影响,不晓得网上说的各种版本是什么鬼?好奇
        Map<String, String> extraHeaders = new HashMap<>();
        extraHeaders.put("Referer", AY_WX_H5_DOMAIN_URL);
        mWebView.loadUrl(WX_H5_PAY_TEST_URL, extraHeaders);
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                if (url.startsWith("weixin://wap/pay?")) {
                    try {
                        Intent intent = new Intent();
                        intent.setAction(Intent.ACTION_VIEW);
                        intent.setData(Uri.parse(url));
                        startActivity(intent);
                        return true;
                    } catch (Exception e) {
                        Toast.makeText(mActivity, "请安装微信App!", Toast.LENGTH_SHORT).show();
                        mWebView.goBack();
                    }
                }
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
            }

        });

    }

}

出现的问题

Q 1. 商家参数格式有误,请联系商家解决

Q 2. 重复刷新支付页

这个比较恶心,手机卡死多次。

上面这俩个问题,LZ查阅了好多内容,也没发现有啥卵子用。

最后还是老大亲自操练,深入源码,指出疑点:H5使用window.location进行重定向,会不会是这里的问题?

随后看了下H5界面源码:

<script type="text/javascript">
    $(function() {
        $.post("WxPay.ashx", {}, function(d) {
            window.location = d;
        });
    })
</script>

怀着疑问点,LZ Google一波,震惊了,MMP真的是:

window.location.href重定向不会被触发webview.shouldOverrideUrlLoading。

比较蛋疼的一点是:IOS支持,Android不支持,可怜我泱泱大国的猿猿~!

也不知道啥时候搜出来的一句话,也不知道会不会是这个的根本原因:

webkit 引擎不支持除 input 和 button 以外元素的点击模拟,需要通过 dispatch 方法实现 。

查看了下微信提供的界面的源码:

<script type="text/javascript">
    var fp=new Fingerprint2();
    fp.get(function(result)
    {
    $.getJSON("h5.json.php?code="+result, function(d){
    if(d.errmsg == ''){
        $('#getBrandWCPayRequest').attr("href",d.url+'&redirect_url=http%3a%2f%2fwxpay.wxutil.com%2fmch%2fpay%2fh5jumppage.php');
     }else{
      alert(d.errmsg);              
    }
    });                                                            
    });
</script>

简单搜索了下:

这种方式叫:强制转换,限制跳转方式

具体不是很明白,在此做个记录~

其他问题

一、回调页面(这点感觉挺有意思,DeBug调试时看到有些不理解,正好看到此解惑了)

正常流程用户支付完成后会返回至发起支付的页面,如需返回至指定页面,则可以在MWEB_URL后拼接上redirect_url参数,来指定回调页面。

如,您希望用户支付完成后跳转至https://www.wechatpay.com.cn,则可以做如下处理:

假设您通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096

则拼接后的地址为MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096&redirect_url=https%3A%2F%2Fwww.wechatpay.com.cn

注意:

  1. 需对redirect_url进行urlencode处理
  2. 由于设置redirect_url后,回跳指定页面的操作可能发生在:
  • 微信支付中间页调起微信收银台后超过5秒
  • 用户点击“取消支付“或支付完成后点“完成”按钮。

因此无法保证页面回跳时,支付流程已结束,所以商户设置的redirect_url地址不能自动执行查单操作,应让用户去点击按钮触发查单操作,如下所示:

其余问题直接看官方吧

地址如下:

https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4

参考资料

微信官方文档: https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1;

如何监听WebView完成加载URL: https://stackoverflow.com/questions/3149216/how-to-listen-for-a-webview-finishing-loading-a-url

本文分享自微信公众号 - 贺利权(hlq_struggle)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-06-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

axios请求Echarts折线图

在jQuery里面,实现一个折线图,【前端统计图】echarts实现单条折线图 https://www.jianshu.com/p/0354a4f8c563

21740
来自专栏魏晓蕾的专栏

【Hadoop】网站基本指标分析及统计

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/...

9730
来自专栏魏晓蕾的专栏

Servlet运行原理及404、500、405异常原因和解决方法总结

比如,在浏览器地址栏输入http://ip:port/web01/hello,整个通信流程如下图所示:

58910
来自专栏强仔仔

java后端解决重复提交问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

15840
来自专栏魏晓蕾的专栏

web.xml各版本头文件及与JDK、Tomcat版本对应关系

<?xml version="1.0" encoding="ISO-8859-1"?> <!DOCTYPE web-app PUBLIC "-//Sun ...

36620
来自专栏魏晓蕾的专栏

物联网专业术语

6LoWPAN是“IPv6 over low-power personal area networks”的缩写。是低速无线个域网标准,它基于IEEE 802....

24920
来自专栏魏晓蕾的专栏

配置maven过程中报过的错及其解决方案

1、【报错】Could not calculate build plan: Plugin org.apache.maven.plugins:maven-reso...

17630
来自专栏云瓣

如何使页面交互更流畅

本篇是基于 FDCon2019 上《让你的网页更丝滑by刘博文》的复盘文。该课题也是博主感兴趣的领域, 后续会结合 React 的 Schedule 与该文进行...

9130
来自专栏魏晓蕾的专栏

Maven常用命令

Maven用了很久了,命令一直记不住,其实想想就那个几个常用的,今天写下来,帮着记忆吧

6930
来自专栏魏晓蕾的专栏

在Eclipse中导入及部署JavaWeb项目遇到的问题及解决方案

版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/...

20030

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励