上次有讲到最近开发支付功能，开发中碰到的一些问题，因为之前很少接触支付功能的开发，所以项目要求在H5中要迅速打通微信支付功能以及支付宝支付功能，我在前一篇文章中选择了支付宝当面付支付以及微信Native扫码付支付。
但是在H5中使用支付宝当面付支付以及微信Native扫码付支付真的合适么，如果我们抛开用户体验来讲，确实支付宝当面付支付可以满足我们的需求了，用户在H5中保存二维码，然后进入支付宝进行扫码付款操作，整个流程是没问题的。但是微信Native扫码付支付呢，这里面其实就有个坑，微信Native扫码付只能进行扫码支付，而且不能支持从相册中选择二维码，也就是说微信Native扫码付支付只支持当面扫码支付，而用户使用不可能总是携带两个手机，一只显示二维码，一个用户扫码支付，这有点不切实际。而我写上篇文章的时候测试因为用电脑显示二维码，手机直接扫码支付所以当时没发现这个问题。所以说在不考虑用户体验的角度来说，支付宝当面付支付可以满足我的需求了，但是微信Native需求满足不了我的基本需求了，所以微信Native扫码付支付方式被我pass掉了，然后我去查阅文档发现，其实微信是有提供H5端直接跳转微信进行支付操作的，而这刚好是我需要的，而且直接跳转微信进行支付大大提高了用户的体验性，所以我最后改写支付功能的时候我选择了微信H5支付。接下来说说微信H5支付遇到的一些坑。
微信支付踩过的坑
1.网络环境未能通过安全验证，请稍后再试
微信H5支付需要传递用户支付的真实ip给微信进行校验。这个bug其实是因为用户实际调起支付时微信侧检测到的终端IP和商户端我们传给微信的用户的终端ip不一致导致的。其实在公司内网进行测试的时候是没问题的，可以获取到用户当前操作的真实ip，测试支付功能完全没问题。但是我上传外网的时候就出问题了，外网测试获取到的ip不是用户的真实ip，导致微信端获取到的ip与我们获取到的ip不一致，导致网络环境无法通过校验。
上图就是我在外网测试得到的用户ip，因为外网有nginx反向代理。所以我们获取到的ip其实是nginx的代理地址，而真实ip我们是无法得到的。后来经过查阅文档发现配置nginx可以将用户真实ip进行传递。
我在外网nginx添加以上配置，果然就可以获取到当前用户进行支付时的真实ip。
2.商家参数格式有误，请联系商家解决
这是微信官方文档对这个问题的解释，这是什么意思呢？其实进行微信支付时微信会返回一个mweb_url给你进行支付，我们在申请H5支付时会设置授权域名，网页调取支付H5支付返回的mweb_url ，必须要获取H5支付页面自带的referer才行（问题是当前调起H5支付的referer为空导致），导致referer为空的原因其实是因为微信返回的mweb_url我们直接进行访问导致的，而直接访问mweb_url就会导致无法获取到H5支付页面自带的referer，所以我们在H5中进行点击跳转到mweb_url中就解决了这个问题了。
3.商家存在未配置的参数，请联系商家解决
这个问题比较简单，当前调起H5支付的域名(微信侧从referer中获取)与申请H5支付时提交的授权域名不一致，我们登录商户平台--"产品中心"--"开发配置"配置当前调起支付的授权域名即可。
微信H5支付因为是从Native支付方式进行改写的，所以难度相比重新开发小了很多。在开发过程中主要时碰到了上述三个问题，在这里记录一下。
欢迎关注我的个人公众号：周先生自留地
把微信H5支付完善了之后，你看到两个支付功能一个截图再去扫码，一个直接跳转微信支付，其实你会不知不觉的开始考虑用户体验，所以我就去看了支付宝官方文档，支付宝可不可以实现我们直接从H5端直接跳转支付宝进行支付呢，答案是可以的，支付宝有手机网站支付方式，用户手机安装支付宝会直接跳转支付宝进行支付，用户没有安装支付宝可以在H5端登录支付宝进行支付。于是我又开始了把支付宝当面付功能改写成支付宝H5支付方式。下面讲讲支付宝H5支付碰到的一些问题。
1.签名问题
这个问题其实是由于公司账号申请支付宝H5支付的时候使用了RSA2加密算法，但是之前用的当面付还是使用的RSA算法，因为工作交接不彻底的缘故我不清楚，所以导致签名验证一直失败。后面我将app_id更换成H5支付的app_id,加密算法改成了RSA2算法，就解决签名问题了。
2.无效的app_id参数
这个问题真的是不应该犯的错误，因为我用了正式环境的app_id，但是我地址却使用了沙箱环境的地址，两者不匹配导致的无效的app_id，我改成正式地址之后就解决这个问题了。
可能是因为支付宝集成的比较好，我从当面付支付改写成H5支付没有遇到什么比较困难的问题，而且文档写的也比较清楚，支付宝H5支付相比于当面付其实就是支付方式从alipay.trade.precreate改成了apipay.trade.wap.pay,以及biz_content添加一个product_code的固定参数，所以思路比较清晰，改写起来没有花费特别多的时间就完成了。
到这里，支付宝H5端支付与微信H5端支付都完成了内外网测试，解决了需求了。这篇文章就写到这里了，谢谢观看。
