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

LZ-Says：困意上来，感觉简直痛不欲生~ 生亦何欢~！！！

前言

这俩天在玩微信的H5支付，不得不说，腾讯出品，Enmmm，懂就好。。。

原想着这是一件很easy的东西，WebView加载一个地址不久好了，enmmm，五分钟不到就妥妥完事儿~

Enmmm，当时我是这么对自己说的，结果，Enmmm，MMP。。。

微信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";@Overrideprotected 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() {@Overridepublic 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);}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);}@Overridepublic 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

个人公众号

不定期更新博文，欢迎老铁关注~

赞赏

觉得不错，可以来波赞赏~ 老铁，比心~