微信小程序支付过程

关于微信支付的开发文档
由于自己本身就是PHP开发的,所以只涉及到PHP微信支付的开发。我将会一步一步的记录如何实现微信支付的。

第一步:先上微信支付开发文档境内普通商户里面下载SDK与DEMO。

下载网址:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1

在这里可以下载自己对应的编程代码来使用对应的SDK和DEMO进行改。我主要用的是PHP,所以下载的是PHP。

第二步:将下载的支付SDK与DEMO进行解压,然后打开这个解压后的文件夹。

第三步,从商家中心下载证书到本地放到cert文件夹里面。

商家中心路径:(注意需要下载安全插件,且只能在IE模式登录!)
https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F

具体路径为:登录进去到商家中心后,登录微信支付商户平台,点击【账户中心】->【账户设置】->【API安全】->【下载证书】中

下载证书完成后,记得顺便设置密钥!!这个密钥等下需要在微信支付lib配置文件夹里面配置支付。

密钥要求:需要字母+数字一起32位数!!为的是认真和安全。

下载证书到本地后,取出这两个证书放到cert文件里面去,
这两个证书分别叫做: apiclient_cert.pem 和 apiclient_key.pem

第四步:配置支付信息

打开lib文件夹下的 WxPay.Config.php

在这里就有说明需要用到的配置信息,只用配置这四项,其他的都不用修改!!
首先是APPID,注意一定是要注册的主体一致,其次用到支付的公众号或者是小程序都必须是和APPID一致的开发者!!不的话,请求支付会出错,提示:appid and openid not match!

APPID和MCHID可以通过开户邮件中获取,关于KEY就是刚才在第三步中要一起设置的密钥,直接复制粘贴进来就可以了。

APPSECRET就是小程序里面开发者的那个APPSECRET,直接去微信小程序里面获取粘贴过来就可以了!具体看下面!!

按上面的配置好,保存后就可以下一步了,修改支付接口。

第五步:修改获取openid的接口

打开example文件夹,打开WxPay.JsApiPay.php
找到 private function __CreateOauthUrlForOpenid($code) 方法。需要修改里面的 $urlObj[“code”] = $code; 修改为:$urlObj[“js_code”] = $code;

说说为什么这样修改:【下面的内容只是为了了解,不想深入原理可以跳过】

code 换取 session_key
这是一个 HTTPS 接口,开发者服务器使用登录凭证 code 获取 session_key 和 openid。其中 session_key 是对用户数据进行加密签名的密钥。为了自身应用安全,session_key 不应该在网络上传输。
获取openid的接口地址: https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

微信支付中,需要获取微信用户的openid,所以在小程序中,需要先通过wx.login获取到用户返回的code代码,然后用code换取用户的openid回来。在微信支付中,WxPay.JsApiPay.php里面已经封装了通过传过来的code换取openid的方法:GetOpenid()。而在这里请求获取openid的路径知道带参名是js_code不是code,所以需要修改配置文件里面的code为js_code!

保存好后,就可以第六步了,修改支付接口!!

第六步:修改支付接口

打开example文件夹下的jsapi.php文件。

首先:删除头部的这些代码,也可以注释!【因为用不到,都是测试数据】
  1. //初始化日志

  2. $logHandler= new CLogFileHandler("../logs/".date('Y-m-d').'.log');

  3. $log = Log::Init($logHandler, 15);

  4. //打印输出数组信息

  5. function printf_info($data)

  6. {

  7.    foreach($data as $key=>$value){

  8.        echo "<font color='#00ff55;'>$key</font> : $value <br/>";

  9.    }

  10. }

其次:删除底部的HTML代码,全部!全部!全部!!因为都是多余的,不要因为这些HTML代码请求出错。
  1. <html>

  2. <head>

  3. ...............这里省略..................

  4. </body>

  5. </html>

最后,修改核心的部分代码!!将要进行详细讲解。这时候贴上官方文档,可以看着文档修改这里的支付信息,因为很重要。

参考文档:
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

上面是图片,下面是代码部分详细解析有:这些信息可以通过请求的时候带参数过来对应的替换,记得用get方式传!!

  1. //②、统一下单

  2. $input = new WxPayUnifiedOrder();

  3. $input->SetBody("test"); //商品描述

  4. $input->SetAttach("test"); //附加数据

  5. $input->SetOut_trade_no(WxPayConfig::MCHID.date("YmdHis")); //商户订单号

  6. $input->SetTotal_fee("1"); //标价币种 单位分

  7. $input->SetTime_start(date("YmdHis")); //交易起始时间

  8. $input->SetTime_expire(date("YmdHis", time() + 600)); //交易结束时间 可以设置结束时间 必须大于5分钟!

  9. $input->SetGoods_tag("test"); //订单优惠标记

  10. $input->SetNotify_url("http://paysdk.weixin.qq.com/example/notify.php"); //通知地址 不要改!!

  11. $input->SetTrade_type("JSAPI");//交易类型 不要改!

  12. $input->SetOpenid($openId); //用户标识 只用传code过来就可以自动帮你得到$openId,不用改

  13. $order = WxPayApi::unifiedOrder($input); //主要是传信息过去,有错误可以通过print_r打印出来看

  14. /*echo '<font color="#f00"><b>统一下单支付单信息</b></font><br/>';

  15. printf_info($order);*/  //多余的需要删除

  16. $jsApiParameters = $tools->GetJsApiParameters($order);

  17. //主要通过它获取用户的信息返回我们需要的数据

  18. echo $jsApiParameters;//一定要加这个,输出用户信息给微信支付调取支付

    //获取共享收货地址js函数参数

    $editAddress = $tools->GetEditAddressParameters(); //用不到,可以保留


最核心的配置就是上面的这些了,注意认真看!!

然后下一步,把这些文件上传到服务器里面!记住,微信支付必须是HTTPS域名的!!

第七步:修改sdk与demo文件夹名称,上传服务器

注意必须是HTTPS域名!

在这里我修改文件夹名为wxpay,上传到服务器。名称自己随意改,主要是方便请求用。

我是放到服务器的根目录下,访问服务器的域名是
https://hz.hzedtong.com/wxpay

然后就会访问到微信支付的Index.php示例文件。

就这样算是部署成功了。

第八步:小程序调用支付接口!

app.js中写下下面的代码,通过wx.login获取的code传到支付接口那里,然后获取支付参数返回来,用wx.requestPayment方法发起支付操作。

参考代码为:

  1.   App({

  2.  onLaunch: function() {

  3. //发起用户登录,获取code换取openid

  4.    wx.login({

  5.      success: function(res) {

  6.        if (res.data.code) {

  7.          //发起请求支付接口

  8.          wx.request({

  9.            url: 'https://hz.hzedtong.com/wxpay/example/jsapi.php', //请求支付接口

  10.            data: {

  11.              code: res.data.code  //传code换openid再返回支付信息

  12.            },

  13.           Success:function(res){

  14.              //成功就发起支付,下面的这些参数都是请求成功返回的。也就是刚才jsapi.php里面echo $jsApiParameters; 出来的数据

  15.             wx.requestPayment({

  16.                   'timeStamp': res.data.'timeStamp',

  17.                   'nonceStr':res.data.'nonceStr',

  18.                   'package': res.data.package,

  19.                   'signType': 'MD5', //不用改

  20.                   'paySign': res.data.paySign,

  21.                   'success':function(res){

  22.               },

  23.              'fail':function(res){

  24.               }

  25.             })

  26.          }

  27.          })

  28.        } else {

  29.          console.log('获取用户登录态失败!' + res.errMsg)

  30.        }

  31.      }

  32.    });

  33.  }

  34. })

上面的部分就是从获取用户信息到请求发起支付的全部过程。记住上面的这部分测试都需要在手机小程序里面跑,才能实现支付!!

然后贴上我修改的支付代码给大家:
链接:http://pan.baidu.com/s/1jHUBhg6 密码:sy0f

如果上面的文档看完还有问题,我在这里留下个微信支付视频教程给大家:
http://v.ku6.com/show/neX1U2SUvd789nrONY8mqw...html?st=3_1_1