微信H5支付(手机浏览器请求)

时间：2019-09-01 22:03:09 | 来源：

一、功能需求

手机浏览器页面发起产品购买请求，调起微信支付，支付完成后返回购买页面展示支付结果。(手机浏览器->微信app->手机浏览器)

二、关键思路详解

微信参考文档 (http://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4)

其实微信文档已经把流程步骤列出来了，按照步骤就可以实现了,下面给出一些关键步骤及注意事项

1、用户点击页面购买按钮，向自己服务器后端接口发起购买请求并调起微信支付。这里需要注意的是，想要调起微信支付，需要后端向微信发起统一下单，成功后返回结果有mweb_url字段，该字段的值是一个URL，为支付跳转链接。

请求跳转

后端接口直接跳转,后端发起统一下单获取mweburl后直接redirect
前端页面用js跳转,后端将mweburl返回给前端，前端用js跳转

functionpay(){         $.ajax({               type:"POST",//方法类型               dataType:"json",//预期服务器返回的数据类型               url:"www.example.com/pay.php",//url               data:{'oid':oid},                    success:function(mweb_url){                        window.location.href=mweb_url//获取后跳转},                    error :function(){alert("异常");}});}

回调页面后端发起统一下单获得的mweburl，需要在其后面拼接redirecturl参数,并对redirect_url进行urlencode处理，来指定回调页面，如果未指定会报商家参数格式有误。

<?php/**  *后端支付接口(以下代码省略了部分只给出大概逻辑不能直接使用)  *有#####的注释需要留意  **/use ....classpay{/**     * 预支付     */publicfunctionprepay(){//微信支付类        $wxFactory =newWxFactory();//统一下单所需参数(根据自己实际需求定义)        $body ='购买商品';        $notifyUrl ='http://www.example.com/Callback.php';//微信支付异步回调        $tradeType ='MWEB';        $amount =1;        $time =time();        $out_trade_no = $time.sprintf('%08s',mt_rand(10,999999));if( $amount <=0){returnnewApiResponse(['code'=>-1,'msg'=>'支付金额不得小于0']);//json类}try{            $payment = $wxFactory->getObj('wxpayment');//调用统一下单接口//参数            $params =array('trade_type'=>$tradeType,'body'=>$body,'notify_url'=>$notifyUrl,'out_trade_no'=>$out_trade_no,'total_fee'=>$amount,//                 'spbill_create_ip'=>$_SERVER['REMOTE_ADDR'],  #####刚开始使用该方法获取ip结果报错，后面采用下面方法获取IP，得以解决'spbill_create_ip'=>$this->get_client_ip());//预支付返回结果            $result = $payment->prepay($params);            $redirect_url  ='http://www.example.com/show.php?';// #####回调地址，该地址需要是商户号后台提交的授权域名，如果不是请求跳转是需要伪造referer,不建议伪造.            $redirect_url .='order='.$out_trade_no;//####回调所需参数支付id，            $mweb_url = $result['mweb_url'].'&redirect_url='.urlencode($redirect_url);//####拼接回调地址//返回mweb_urlreturnnewApiResponse(['code'=>0,'mweb_url'=>$data]);}catch( WxServerException $e ){//支付不成功会以异常形式返回returnnewApiResponse(['code'=>-1,'msg'=>$e->getMessage()]);}}//获取IP地址privatefunctionget_client_ip(){if(getenv('HTTP_CLIENT_IP')&&strcasecmp(getenv('HTTP_CLIENT_IP'),'unknown')){            $ip =getenv('HTTP_CLIENT_IP');}elseif(getenv('HTTP_X_FORWARDED_FOR')&&strcasecmp(getenv('HTTP_X_FORWARDED_FOR'),'unknown')){            $ip =getenv('HTTP_X_FORWARDED_FOR');}elseif(getenv('REMOTE_ADDR')&&strcasecmp(getenv('REMOTE_ADDR'),'unknown')){            $ip =getenv('REMOTE_ADDR');}elseif(isset($_SERVER['REMOTE_ADDR'])&& $_SERVER['REMOTE_ADDR']&&strcasecmp($_SERVER['REMOTE_ADDR'],'unknown')){            $ip = $_SERVER['REMOTE_ADDR'];}returnpreg_match('/[d.]{7,15}/', $ip, $matches )? $matches [0]:'';}}

2、用户在微信中间页面操作后(支付或取消支付)会回跳到我们指定的回调地址，并带上我们拼装的参数。根据URL中的参数，前端页面请求后端接口查询支付结果(服务器根据支付订单id向微信发起查询)，然后展示给用户。（根据微信文档，由于设置redirecturl后,回跳指定页面的操作可能发生在：1,微信支付中间页调起微信收银台后超过5秒 2,用户点击“取消支付“或支付完成后点“完成”按钮。因此无法保证页面回跳时，支付流程已结束，所以商户设置的redirecturl地址不能自动执行查单操作，应让用户去点击按钮触发查单操作。回跳页面展示效果可参考下图）

3、微信支付异步通知回调地址。统一下单成功后，微信会异步回调，统一下单时参数notify_url所填地址，该异步回调是用于通知服务器端，用户所生成的预支付订单是否支付完成。在做该功能的时候发现微信并没有异步调用该接口，所以第2点提到的需要主动去调用后端接口查询就很有必要，如果担心主动调用查询出错，还可以写一个后端脚本定时去查询用户预支付订单情况。

三、总结

1、参照微信文档，文档中给出了详细的流程步骤。

2、mweburl后必须拼接redirecturl，并且redirect_url必须授权，否则会报错

3、支付流程结束跳转回页面，展示支付结果，需要让用户主动触发查单操作。

原文地址：https://cloud.tencent.com/developer/article/1467638

关于我们：

蓝畅信息技术有限公司成功为多家世界财富500强企业以及其他著名品牌提供优质服务，是您靠谱的互联网开发供应商。

服务客户遍及北京、上海、杭州、深圳、广州、天津、青岛、南京、宁波、苏州、无锡、厦门、重庆、西安等大中型城市及地区为您提供：H5开发，H5设计，H5外包，微信开发外包，H5商城开发，小程序商城开发，网站开发外包，H5游戏开发，小程序开发外包，小程序设计、APP开发外包，UI设计，SEO优化，视频后期制作等优质服务

H5开发,小程序开发供应商