微信HTML5网页支付PHP + JS API总结

如果你不喜欢广告,请收藏我的网站,下次在网站中搜索
用真金白银赞赏有价值的内容,请通过文末二维码打赏

微信公众号开发给我设置了很多坑,每一个开发过微信的开发者,在面对微信的API文档时,都是崩溃的。微信支付的开发就更加崩溃,因为微信支付涉及到签名,其两次签名的设计,让人饱受折麽,为APP开发的同学们感叹。而这篇文章,主要来谈一下微信支付在HTML5页面(微信浏览器内部)内进行支付的开发过程。

微信服务号用户授权接口

首先要解决的是微信服务号用户授权的问题,授权过程主要是为了拿到用户的openid,或者拿到用户的昵称等更多信息。那么怎么来授权呢?

进入微信公众平台,在“开发-接口权限”中找到“网页授权-网页授权获取用户基本信息”,点击后面的“修改”,在弹出来的界面中,输入你允许在那个域名下进行授权。这个域名,必须与下面提到的redirect_uri中的域名对应,否则授权不了。

完成之后,我们就开始进入授权开发了。首先是获取授权要用的基本信息,包括:

AppID : 在“开发-基本配置”中获取AppSecret : 同上,但需要该公众号的管理员微信扫码后才能显示

第一步,获取code。

接下来,我们(用微信)访问这样一个网址:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

上面的蓝色字表示需要被替换。

APPID 替换为你上面拿到的AppIDREDIRECT_URI 替换为一个你上面填写的那个域名下的人和网页都可以,不过最好是可以访问的,因为这个地址将会在后面作为获取用户openid的页面。SCOPE 有两个值可以挑选snsapi_base和snsapi_userinfo,如果使用前一个,你不会看到授权按钮,但是,你也拿不到用户的昵称等信息,而后一个则一定要让用户点击授权按钮之后才能进行下一步,不过可以拿到用户的更多信息,同时,还可以拿到access token和refresh token。(用户的更多信息需要这里的access token去进一步操作。)

完成之后,你就可以安心等待结果,页面停止跳转后,我们看页面的URL地址。你可以发现,在页面的URL中,有一个code参数,它是拿到接下来的信息的关键。

第二步,凭code获取openid。

code是一个票据,可以用来获取用户openid和access token,我们先获取openid。

访问下面这个地址:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

上面的地址中蓝色部分同样需要替换。其中APPID你已经知道了,SECRET就是AppSecret,是在最开始的时候就让你拿到到那个。CODE则是上一步中拿到的那个。

注意:SECRET是绝密信息,你不可以把它给任何人看到,最好也不要像我刚才说的,直接用它来访问URL,最好的情况下,我们是写一个服务端脚本,通过curl来请求上面这个URL。

我们用PHP写一个函数来实现吧:

<?php

define('APPID','xxxxxx');
define('SECRET','xxxxxx');

$Code = $_GET['code'];
getCurl($url) { //初始化curl
  $ch = curl_init(); //设置超时
  curl_setopt($ch, CURLOP_TIMEOUT, Conf::CURL_TIMEOUT);
  curl_setopt($ch,CURLOPT_URL, $url);
  curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,FALSE);
  curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,FALSE); //设置header
  curl_setopt($ch, CURLOPT_HEADER, FALSE); //要求结果为字符串且输出到屏幕上
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE); //运行curl
  $data = curl_exec($ch);
  curl_close($ch); //返回结果
  if($data) {
    curl_close($ch);
    return $data;
  }
  else {
    $error = curl_errno($ch);
    echo "curl出错,错误码:$error"."<br>";
    echo "<a href='http://curl.haxx.se/libcurl/c/libcurl-errors.html'>错误原因查询</a></br>";
    curl_close($ch);
    return false;
  }
}

$result = getCurl('https://api.weixin.qq.com/sns/oauth2/access_token?appid='.APPID.'&secret='.SECRET.'&code='.$Code.'&grant_type=authorization_code');
echo $result;

然后用getCurl()函数来请求上面那个URL,把抓取到的结果直接显示在你的页面上,这样你就可以看到结果了。把上面这段PHP保存下来,修改对应的信息之后,上传到你的服务器上面,最好就是我上面说的那个redirect_uri,授权完跳转回的那个页面。这样正好接收到code。

这样,你就拿到了一个用户的openid。如果可以的话,把它保存在你的服务器上,和某个用户的ID绑定起来,下次再也不用通过code再去拿openid了。

第三步,获取access token。

重新回到第一步,把SCOPE替换为snsapi_userinfo。然后重新执行第一步,第二步。这时,你可以拿到openid的同时,拿到access token,以及refresh token。refresh token是用来刷新授权使用的,下一次你想拿openid和access token,可以不用code,直接用refresh token就可以了,下面会介绍。

第四步,获取用户昵称和头像。

访问这个网址:

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

上面蓝色的字,是在第三步中才能拿到的信息。替换就好了。

注意:和SECRET一样,ACCESS_TOKEN也是绝密信息,不允许泄露,所以,我们还是不能在浏览器中请求这个URL,接着在上面那个PHP文件中这么写:

$data = json_decode($result,true);
$AccessToken = $data['access_token'];
$OpenId = $data['openid'];
$user_info = getCurl('https://api.weixin.qq.com/sns/userinfo?access_token='.$AccessToken.'&openid='.$OpenId.'&lang=zh_CN');
echo $user_info;

这样,我们又可以看到抓取到到用户信息了。赶紧把这个用户的各种信息记录到你的数据库里面,和原来的用户绑定在一起吧。

第五步,刷新授权。

接下来就看refresh token怎么用了。在从第1步到第3步到过程中,我们需要界面到跳转,用户的授权等动作。但是,如果你有了refresh token,这个过程就不需要了,直接到第3步。

访问下面这个网址:

https://api.weixin.qq.com/sns/oauth2/refresh_token?appid=APPID&grant_type=refresh_token&refresh_token=REFRESH_TOKEN

你可以发现,这个接口只需要你的APPID和REFRESH_TOKEN。如果你有refresh token的话,直接通过这个接口,就可以拿到第3步的结果,取决于你最开始的时候得到该refresh token时传入的SCOPE值必须是snsapi_userinfo。

为什么要刷新授权呢?因为你前面拿到的那个access token只有7200秒的有效期,如果过了这个有效期,你就拿不到用户的个人信息咯。但是再刷新一下access token,就可以拿到了,用户更新了头像,你也可以把他的头像更新过来。

通过JS API调起微信支付

在拿到用户的openid之后,我们接下来就要考虑支付的问题了。当用户准备支付的时候,你怎么样才能调起微信进行支付呢?要用JS API调起微信,要满足很多条件,这些条件都比较复杂,导致我们经常在这个过程中出现混乱。

开通公众号微信支付功能

在服务号后台开通微信支付功能,需要进行商户验证,提交各种材料。商户认证完之后,设置“微信支付-开发配置”选项中的支付授权目录。什么是支付授权目录呢?也就是调起微信支付的访问URL所在的目录,比如你打算在yourdomain/pay/weixin.html进行微信支付,在这个页面中有JS代码来呼出微信支付,那么在填写时,就要填写yourdomain/pay/,末尾要以/结尾。

当然,如果你打算只进行测试,可以在下方填写测试目录,规则和上面的授权目录相同,但是测试目录填写之后,必须填写白名单,也就是用于测试的用户微信id号。

如果你在非该目录下的页面中使用JS调起微信支付,那么微信会提示错误。

获取商户信息

商户信息需要通过上一步中完成商户认证时,邮件中收到的商户登录信息登录到商户平台获取。微信支付其实和微信公众号是两块业务,在微信公众平台后台的微信支付功能,其实是调用了微信支付的接口进行的操作,原则上,在商户平台(pay.weixin.qq.com)可以完成和支付相关的所有操作,而在公众平台完成的,主要是依托公众号的操作。

这里有一个衍生知识,如果你打算申请APP微信支付,那么微信公众号的微信支付是不可用的,你需要到微信开放平台(open.weixin.qq.com)去申请一个账号,然后完成商户认证,完成认证时,会得到另外一个商户平台(pay.weixin.qq.com)账号,这个账号将绑定到微信开放平台的账号,而前面一个商户账号绑定的是微信公众平台的账号。所以,最终你应该明白:微信支付、微信公众平台、微信开放平台,三者是相同级别的应用,没有谁属于谁的关系,但是他们之间又有相互调用的联系,微信开放平台在开发方面又更强过微信公众号,例如在开放平台可以完成APP和网页微信支付的集成,但是如果仅仅只有开放平台账号,则相当于没有公众号,又少了公众号的开发环节。所以,如果你两个平台都用的话,就必须要交两个300进行认证。

登录商户平台之后,你可以拿到微信支付需要的资料:

machid 商户ID号key 商户平台开发密钥cert.pem SSL证书文件key.pem SSL证书文件

有了这个信息之后,才能进入后面的开发。

创建预支付信息

微信支付的逻辑是,先通过我们自己的服务器向微信支付服务器申请一个预支付订单号,在支付时,得根据这个预支付订单号进行支付,当支付完成之后,这个预支付订单就变成正式订单了。

所以,无论是app还是网页端,都需要先在你的服务器上进行这一步操作,以获得预支付订单信息。

怎么创建预支付信息呢?使用微信提供的SDK。微信的SDK也很混乱,这里还有一个SDK(2),前面一个SDK是从商户平台文档中找到的,而SDK2则是在微信公众平台后台点击权限接口的微信支付链接进入找到的。从简洁度来讲,我们使用SDK2更方便,因此我这里选择了SDK2来进行讲解。我们下面用PHP来做一个演示。

下载PHP SDK2,解压到本地,可以看到有多个目录,在演示中不断找到WxPayPubHelper和demo目录。demo目录中有一个js_api_call.php,打开来阅读代码。在了解所有的工作原理之后,我们自己来写一个自己的SDK,把授权也囊括进来。

第1步,配置。

创建一个Conf.php文件,内容如下:

 <?php

namespace WeiXin;

class Conf {
    const APPID = '你的公众号APPID';
    const MCHID = '你的商户ID';
    const KEY = '你的商户开发密钥';
    const APPSECRET = '你的公众号密钥';
    //证书路径,注意应该填写绝对路径
    const SSLCERT_PATH = '/你的路径/cacert/cert.pem';
    const SSLKEY_PATH = '/你的路径/cacert/key.pem';

    const CURL_TIMEOUT = 30;
}

上面就是配置文件的内容,根据你的情况修改为你自己的开发信息。

第2步,创建公共类。

创建一个公共类,用来被继承,这个公共类里面包含基本的curl操作、时间戳、数据类型等方法,你可以自己再继续扩展。

创建文件Common.php,创建一个Common类来作为公共类。

这个公共类包含了三类方法,一类是字符串处理和算法,一类是array和xml之间的转换,一类是curl操作。

第3步,创建授权类。

虽然前面我们已经讲过了授权怎么做,但是这里我们仍然将它集成到我们自己的SDK中。

创建一个Oauth类来实现授权。

你可以看到,我们使用Common进行继承,使用了Common类中的一些方法。

第4步,创建微信支付类。

微信支付类我们要分解开详细讲,我会在文末把SDK上传,这样你可以下载SDK自己去研究。

由于本文讲的是HTML5页面用JS调起微信支付,所以我这里也只讲解这个部分,其他的部分,你可以慢慢阅读SDK中的源码。

首先我们列出统一下单的SDK

/** * 统一支付接口类 */
class UnifiedOrder extends WxpayClient {
    function __construct() {
        //设置接口链接
        $this->url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
        //设置curl超时时间
        $this->curl_timeout = Conf::CURL_TIMEOUT;
    }

    /**
     * 生成接口参数xml
     */
    function createXml() {
        try {
            //检测必填参数
            if($this->parameters["out_trade_no"] == null) {
                throw new RuntimeException("缺少统一支付接口必填参数out_trade_no!"."<br>");
            }
            elseif($this->parameters["body"] == null) {
                throw new RuntimeException("缺少统一支付接口必填参数body!"."<br>");
            }
            elseif ($this->parameters["total_fee"] == null ) {
                throw new RuntimeException("缺少统一支付接口必填参数total_fee!"."<br>");
            }
            elseif ($this->parameters["notify_url"] == null) {
                throw new RuntimeException("缺少统一支付接口必填参数notify_url!"."<br>");
            }
            elseif ($this->parameters["trade_type"] == null) {
                throw new RuntimeException("缺少统一支付接口必填参数trade_type!"."<br>");
            }
            elseif ($this->parameters["trade_type"] == "JSAPI" && $this->parameters["openid"] == NULL){
                throw new RuntimeException("统一支付接口中,缺少必填参数openid!trade_type为JSAPI时,openid为必填参数!"."<br>");
            }
            $this->parameters["appid"] = Conf::APPID;//公众账号ID
            $this->parameters["mch_id"] = Conf::MCHID;//商户号
            $this->parameters["spbill_create_ip"] = $_SERVER['REMOTE_ADDR'];//终端ip
            $this->parameters["nonce_str"] = $this->createNoncestr();//随机字符串
            $this->parameters["sign"] = $this->createSign($this->parameters);//签名
            return  $this->arrayToXml($this->parameters);
        }
        catch (RuntimeException $e) {
            die($e->errorMessage());
        }
    }

    /**
     * 获取prepay_id
     */
    function getPrepayId() {
        $this->postXml();
        $this->result = $this->xmlToArray($this->response);
        $prepay_id = $this->result["prepay_id"];
        return $prepay_id;
    }
}

接下来看下JS SDK的内容

/**
 * JSAPI支付——H5网页端调起支付接口
 */
class JsApi extends Common {
    var $parameters;//jsapi参数,格式为json
    var $prepay_id;//使用统一支付接口得到的预支付id
    var $curl_timeout;//curl超时时间

    function __construct() {
        //设置curl超时时间
        $this->curl_timeout = Conf::CURL_TIMEOUT;
    }

    /**
     *
     作用:设置prepay_id
     */
    function setPrepayId($prepayId) {
        $this->prepay_id = $prepayId;
    }

    /**
     *
     作用:设置jsapi的参数
     */
    public function getParameters() {
        $jsApiObj["appId"] = Conf::APPID;
        $timeStamp = time();
        $jsApiObj["timeStamp"] = "$timeStamp";
        $jsApiObj["nonceStr"] = $this->createNoncestr();
        $jsApiObj["package"] = "prepay_id=$this->prepay_id";
        $jsApiObj["signType"] = "MD5";
        $jsApiObj["paySign"] = $this->createSign($jsApiObj);
        $this->parameters = json_encode($jsApiObj);

        return $this->parameters;
    }
}

SDK在这里下载。

第5步,在页面中生成支付代码,调起支付。

SDK已经有了,我们来看下在页面中,究竟应该怎么用呢?

<?php

// 引入SDK的文件:
require '....省略了....';

$Oauth = new WeiXin\Oauth();
// 如果没有openid的情况下,要用户先去授权,页面要跳转一次,当然,这里不需要获取用户的昵称等信息
// 最好是你可以将用户的openid保存到数据,根据当前登录用户的信息直接拿到openid,这样就不需要授权了
if(!isset($_GET['code'])) {
   $url = $Oauth->createCodeURL('回调地址,填写当前页面的URL');
   header("Location: $url");
   exit;
}

// 接下来是通过JS SDK获取预支付信息
// 先获得openid
$code = $_GET['code'];
$Oauth->setCode($code);
$openid = $Oauth->getOpenId();

// 统一下单SDK
$UnifiedOrder = new \WeiXin\UnifiedOrder();
$UnifiedOrder->setParameter("openid",$openid);
$UnifiedOrder->setParameter("body",'订单信息');
$UnifiedOrder->setParameter("out_trade_no",'订单号,指在你自己的系统中的订单号'); 
$UnifiedOrder->setParameter("total_fee",20.99 * 100);//总金额,微信支付是按分为单位,因此这里乘以100
$UnifiedOrder->setParameter("notify_url",'回调地址,下一步中会有讲解');
$UnifiedOrder->setParameter("trade_type","JSAPI");
$prepay_id = $UnifiedOrder->getPrepayId();

$JsApi = new \WeiXin\JsApi();
$JsApi->setPrepayId($prepay_id);
$result = $JsApi->getParameters(); // 这样就拿到了用于调起微信支付的预支付订单信息,接下来就是JS代码了

?>

...

<script>
function jsApiCall() {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        <?php echo $result; ?>,
        // 直接把上面得到的结果放在这里
        function(res){
          // 这个是回调函数,表示用户调起微信支付后的一些动作,不过一般情况下,这个回调函数的执行时间难以把握,你只能在这个函数中确定用户已经开始执行微信支付了,到底有没有支付成功是很难把握的
        }
    );
}

function callpay(){
    if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ) {
            document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
        }
        else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', jsApiCall);
            document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
        }
    }
    else {
        jsApiCall();
    }
}

window.onload = callpay(); // 网页加载完之后,立即调起微信支付,现在可以去支付了。
</script>

回调

这里的回调和上面javascript代码中的回调函数是两码事,这里的回调是指你支付完后,微信服务器会通过你在前面统一下单处传入的URL,发送一些支付数据给你的服务器,你的服务器收到这个数据后,对订单进行判断和处理,如果微信告知你用户已经付款成功了,就应该更新订单的状态为已支付成功。

2016-04-16 48620

为价值买单,打赏一杯咖啡

本文价值486.2RMB
已有5条评论
  1. qgqgqg 2017-11-11 10:02

    授权完,通过code获得的结果中,同时包含了openid和access_token(user token),还有一个refresh_token,什么意思?

    • 否子戈 2017-11-11 10:07

      Access token有效期比较短,refresh 有效期比较长,可以通过refresh token直接获得一个新的access token而无需用户登陆授权

  2. […] 其它的就真的是一模一样的。授权完,通过code获得的结果中,同时包含了openid和access_token(user token),还有一个refresh_token,这个我们不讲,请阅读前面一篇《微信服务号用户授权接口》。 […]

  3. 龙斯超 2017-04-04 11:17

    想下载一个好的微信支付demo;官方的有BUF

    • 否子戈 2017-04-04 14:01

      这是多年前的文章了,可能api已经不适用