最近做了一个关于网页支付的项目，用的ping++集成支付。主要用到了三种支付方式微信公众号支付、微信h5支付、支付宝网页支付。（微信外浏览器用微信h5支付，微信内浏览器用微信公众号支付） 接下来进入正题，ping++前端h5开发接入指南，前端童鞋可以先看一下这个文档，当然这个需要后端配合的，这里我们前端只需要下载好前端SDK就可以了，在接入时候只需要调用ping++的一个函数pingpp.createPayment（）就可以调起支付，但是！！每次都觉得这次支付搞通了都会遇到新的坑！！必须要吐槽一下，大家在看文档的时候一定要仔细仔细再仔细，尤其是支付文档，我这边用的ping++集成支付，省去了看微信jssdk和支付宝支付文档，但是遇到的坑也是无数。下面我们开始踩坑。
（在 Ping++ 对象 正确的前提下，调用 js 方法后会直接跳入第三方的支付界面，然后用户完成支付动作。用户支付成功后，会跳转到服务端创建 Ping++ 对象时定义的 result_url 或者 success_url。如果用户取消支付，则会跳转到 result_url 或者 cancel_url（具体情况根据渠道不同会有所变化））这段话是ping++文档上面的原话，当时看着很懵，后来搞明白原来是 支付对象调取成功之后，只有微信公众号才有回调函数，其他支付是没有回调函数的，也就是说其他支付支付完成，前端是不知道这个支付是成功了还是失败了的，但是每种支付方式有的有他的成功地址（success_url）和失败地址（cancel_url）还有返回地址（result_url）！！这里注意了，这个成功地址和失败地址我们知道，就是支付完成或者失败跳转的地址，但是有个坑就是“返回地址”，他的extra里面只有一个返回地址，这里ping++文档没有说的很清楚，“返回地址”是指，无论你成功支付还是失败支付，他都会跳转到这个地址！！！这个地址其实就是一个判断地址，我们需要在这个页面去请求我们服务器去让服务器返回这个支付结果。当时我做的的时候，微信h5（wx_wap）就是只有返回地址，而支付宝网页支付(alipay_wap)用的就是success_url和cancel_url。
之后看完这个文档如果你第一次接触还要看一下Ping++的charge对象，这个对象就是你从后端你们自己的服务器上去获取到这个charge对象，然后去调用上面的那个Ping++函数，才会成功调起支付。上面所说的回调地址都会在charge对象里面的extra参数里面配置，每种支付方式对应的extra参数不一样，一定要认真看！
然后我说一下我这边的支付的大致流程，我这通过用户点击支付类型，往后台请求charge对象，参数传的是price、title等等一些，这个你们需要和后台商量一下具体传什么，根据自身项目去定义，额外的微信公众号支付的话需要传open_id ！！！！这里一定要注意，如果不传，微信内浏览器支付会掉不起来。具体稍后说。
先说支付宝网页支付（alipay_wap）也是最简单的支付，当前端我们获取到charge对象的时候，又遇到一个坑，总是返回到 “fail”里面，当时觉得有点奇怪我也没有用到微信公众号支付，怎么会走回调函数，原来！！！ping++对象不正确也会返回fail
后来我们这边查了一下，确实是charge对象不正确，但是后端返回的charge对象却没有报错，后来找到原因是后台传过来的是下划线的键值，因为我这前端项目做了配置，把键值改成了驼峰式的了，解决之后就能在测试环境成功调起支付了，这里不是在微信内浏览器支付，微信内浏览器自动屏蔽了支付宝支付，但还是有方法支付的，但是我们这也没有做在微信内浏览器用支付宝支付。在正式环境上跑了之后又出现了问题，后台显示该产品的ISV权限不足？这啥问题，一查原来产品那边对支付宝网页支付权限根本没开通！到这里支付宝算是搞完了。
接下来说说微信h5支付，和支付宝支付（alipay_wap）差不多，基本上测试环境是没有问题，但是他的回调地址只有一个result_url，前边已经说了，我们需要在这个页面加个对用户的判断，询问用户是否支付成功，然后向后台请求支付结果，（这点支付宝支付不知道要好多少倍），如果用户支付成功才会跳转成功页面，做这个支付遇到了两个坑，一个是我在我手机上谷歌浏览器支付完怎么也不跳转到result_url就是不跳！！后来又问ping++客服，也是描述了一大堆去定位这个问题，结果其实是我手机的谷歌浏览器的自身原因， 我用了其他浏览器都可以正常跳转，唯独谷歌浏览器阻止了页面自动跳转。另一个坑就是，提示我该网络环境未能通过安全验证，官网说这个问题是IP获取的不对，后台问题，我们那后台给我看他的代码说我能获取到ip，我又帮他看说是不是可能做了代理，你获取到的不是真实的ip地址，他说也做了代理ip的处理，获取的就是我手机的ip。后来原因是后台只做了一级代理，我那手机做了二级代理。
接下来说说微信内的微信公众号支付（wx_pub）
首先公众号支付，你得需要去微信公众平台申请一个微信公众号，并且要开通支付权限，这个不用多说，我们产品经理申请完成公众号支付，没有在微信公众号内申请支付权限，直接通过微信开发平台的移动应用的支付权限，通过m-a授权给了该公众号，这里我提一下，微信公众平台、微信开放平台、微信商户平台、大家一定要搞明白！！！微信公众平台肯定要绑定微信公众号的这个都懂，微信开放平台里面是可以集成各种appID的，公司之前做的app内的微信支付就是在微信开放平台下有一个移动应用的appID,前端拿到appId才可以开发微信支付。但是公众号支付一定要是公众号，那个产品说这个AppID也有，类似一个公众号，可不可以不用重新申请，不可以！公众号支付必须用公众号，而且必须是一个服务号。我来支付微信开发平台有支付权限，他们就没把微信公众号的支付权限开通，直接授权给了微信公众平台。
先说一下拿到微信公众号的AppID然后干什么吧，微信公众号支付需要授权才能支付，这里有两个链接，一定要看对了，这个是错的，这个是对的
首先用AppID获取code，看文档是通过访问微信的一个链接，然后微信在返回给你一个带code的链接，这里又有一个坑，你写的返回地址redirect_url必须是没有参数的，但是我的链接就是有参数，这个时候怎么办！！！微信里面有一个state参数，你把这个state参数带上去，微信会原样返回给你，但是这个state参数只能接受128个字节，我当时需要拼的参数挺多，刚好够128个字节，但是还是显示state参数过长。。。。后来用base64转码再转成json字符串大功告成！
然后获取到code码，在用code获取openID，这个我这是直接把code传给后台，他给我返回的openID，openID是指每个微信号对应的该公众号的唯一识别，当你获取到openID后记得要保存到本地，就不需要再次登录获取了，这里还有一个access_token因为我这项目里面没有遇到，好像这里也有跟多的坑。当我拿到openID后传给后台获取charge对象，只有wx_pub支付才会用openid，其他两种支付都穿空字符串“”，调起支付的时候又双叒叕出现问题了，就提示该支付权限未开通，就是上面提到的，你需要把公众平台的支付权限开通之后再使用M-A授权！等产品配好之后，又又又又出现问题了，这个问题是url支付授权目录配置的有误，当时产品那边配置了，我看也是配置好了，但是就报这个错误，后来一查是这个原因：比如：你的域名是http://www.baidu.com/abc/index.html当时我们配置的是http://www.baidu.com/提示报错，你应该写http://www.baidu.com/abc/
到此完成了ping++的集成支付，踩坑完毕。
