html5 调起微信支付

最新推荐文章于 2024-07-23 09:36:59 发布

JarryAndorid

最新推荐文章于 2024-07-23 09:36:59 发布

阅读量8.8k

点赞数 1

分类专栏：微信开发文章标签： html5 微信支付

本文链接：https://blog.csdn.net/qq_14859923/article/details/73613393

版权

本文详细阐述在微信浏览器中实现HTML5调起微信支付的过程，包括注册公众平台、绑定域名、获取code、openId、请求统一下单及调起支付等步骤。并提供了支付成功后的界面展示及安卓用户点击返回键的处理技巧。

摘要由CSDN通过智能技术生成

本文主要是梳理在微信浏览器中调起微信支付的整个过程，以及主要过程中界面的展示效果。虽然整个交易过程看起来很简单，就是输入金额，然后调起微信支付，输入密码完成交易，但是在实现过程中，是需要对接微信公众平台和微信商户平台的，这块比较繁琐。

流程图：
在微信浏览器中调起微信支付，有那么几方面的交互：h5<–>微信、h5<–>服务器、服务器<–>微信服务器。三方面一个不能少。整体流程大致如下：

这里写图片描述

下面具体说明下每个环节要做的事情。
注册公众平台
这里注意一点，目前支付能力只支持服务号，对于个人的订阅号是不支持的。申请支付能力需要提交的信息可能比较繁琐。在开发->基本配置中即可看到AppId
绑定域名
一定按照微信规定的格式填写域名，并且将MP_verify_3GXUmRy2Q1SznaIC.txt文件拷贝到与名对应的服务器根目录下。
h5请求微信服务器获取code

                //服务器接口
                var baseURL = 'http://192.168.1.46:8080/alipay';
                sessionStorage.setItem('baseURL', baseURL);
                //公众号appid
                var appId = "wx62343e380757XXXX";
                sessionStorage.setItem('appId', appId);

                function getQueryString(name) {
   
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if(r != null) return unescape(r[2]);
                    return null;
                }

                // 微信平台,支付宝，其他
                var browserType = (function() {
   
                    var ua = window.navigator.userAgent.toLowerCase();

                    if(ua.match(/MicroMessenger/i) == 'micromessenger') {
                        return 1;
                    } else
                    if(ua.match(/AlipayClient/i) == 'alipayclient') {

                        return 2;
                    } else {
                        return 3