H5唤起移动支付方法(支付宝、微信支付、银联支付)
最近开发的项目中涉及到了移动支付的模块,主要是支付宝、微信支付和银联支付。
下面总结一下H5唤起这些移动支付平台的方法。
主要流程:后端接入支付平台SDK,当支付发起时,后端获得支付参数信息,将信息返回给前端,前端根据这些信息唤起支付。
为了简化调用,我们封装了一个获取支付参数信息的方法,可以通过传递参数来返回不同的支付参数信息。
1 | // getPayTypeParam 为获取支付参数信息的方法 |
具体的请求参数说明可以参考支付宝开发文档、微信支付开发文档、银联支付开发文档。
成功获得支付参数信息即可开始唤起支付。
支付宝
唤起支付宝的方式是通过把获取的支付参数信息作为url参数,跳转到
https://openapi.alipay.com/gateway.do
1 | getPayTypeParam({'payType': payType}).then((params) => { |
若设置了return_url(前台回跳),会在支付成功后返回该页面并带上唯一订单号、交易流水号等关键参数,详细可参阅支付宝开发文档。
微信支付
和支付宝相似,唤起微信支付的方法也是通过把获取的支付参数信息作为参数,进行url跳转。
但和支付宝不同的是,微信支付的前台回跳参数是不需要验签的。直接作为参数拼接到url即可。
假设通过统一下单接口获到的MWEB_URL= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx20161110163838f231619da20804912345&package=1037687096
还有要注意的是需对redirect_url进行urlencode处理。
银联支付
银联支付是三个支付中最麻烦的一个。( ╯-_-)╯┴—┴
方法是将请求参数组装成form表单,form表单post提交到银联交易地址,打开银联支付页面。银联交易地址可参阅银联支付开发文档中的「测试地址与测试卡」,这里有一些测试地址以及测试账号。
由于懒得拼装表单,所以获取银联支付参数信息的时候直接返回了一个form表单的html文本,然后直接通过post提交。
1 | getPayTypeParam({'payType': payType}).then((params) => { |
在开发过程中也踩到了坑。银联支付的frontUrl(前台通知地址)参数是不支持「#」、换行符等字符的。( ╯#-_-)╯┴—┴
由于我们设置的frontUrl带有「#」,所以支付后无法进行跳转。
而且,支付后返回的订单号等信息不是通过url带回的,是通过FormData对象带回的。(╯ ̄Д ̄)╯╘═╛
我们的解决办法是把frontUrl设置成一个空白的jsp页面,jsp获取到FormData对象的信息后进行二次跳转。