前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信H5支付(手机浏览器请求)

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

作者头像
终身幼稚园
发布2019-07-19 17:16:03
3.5K0
发布2019-07-19 17:16:03
举报
文章被收录于专栏:终身幼稚园终身幼稚园

最近在做一个微信H5支付的功能,开发中遇到了一些问题,网上相关的资料比较少,在此做下总结以供参考。

一、功能需求

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

二、关键思路详解

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

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

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

请求跳转

  • 后端接口直接跳转,后端发起统一下单获取mweburl后直接redirect
  • 前端页面用js跳转,后端将mweburl返回给前端,前端用js跳转
代码语言:javascript
复制
function pay() {

         $.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处理,来指定回调页面,如果未指定会报商家参数格式有误

代码语言:javascript
复制
<?php
/**
  *后端支付接口(以下代码省略了部分只给出大概逻辑不能直接使用)
  *有#####的注释需要留意
  **/
use ....
class pay{

  /**
     * 预支付
     */
    public function prepay(){

        //微信支付类
        $wxFactory = new WxFactory();

        //统一下单所需参数(根据自己实际需求定义)
        $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 ){
            return new ApiResponse(['code' =>-1,'msg' =>'支付金额不得小于0']);//json类
        }

        try {

            $payment = $wxFactory->getObj('\wx\payment');//调用统一下单接口

            //参数
            $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_url
            return new ApiResponse(['code' =>0,'mweb_url'=>$data]);

        }catch ( \WxServerException $e ){
            //支付不成功会以异常形式返回
            return new ApiResponse(['code' =>-1,'msg' =>$e->getMessage()]);
        }

    }

    //获取IP地址
    private function get_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'];
        }
        return preg_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、支付流程结束跳转回页面,展示支付结果,需要让用户主动触发查单操作。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-06-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 终身幼稚园 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、功能需求
  • 二、关键思路详解
  • 三、总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档