账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
微信小程序支付

必要条件

1 已经认证的微信小程序( 企业用户 );
2 申请微信支付,开通产品 JSAPI 支付;
3 小程序绑定微信支付 : 
    3.1 打开微信支付 > 我的产品 > AppID 账户管理 > 关联AppID;
    3.2 打开公众号管理中心 > 微信支付 > 关联商户号;

支付流程

1 小程序用户打开支付页面,点击支付按钮触发支付事件;
2 支付事件通过 request 请求后端 api;
3 后端 api 利用微信支付统一下单接口创建订单信息并将订单数据返回给前端;
4 小程序前端拉起支付功能,完成/取消支付;

配置代码

<?php
// 微信开发配置
return array(
    //....
    /* -------- 微信支付 [ 小程序支付 ] 需要的配置 -------- */
    'MINIAPP'     => array(
        // 小程序 appId
        'appid'   => '***',
        // 小程序 SECRET
        'secret'  => '*****',
        // 微信支付商户 ID
        'mchid'   => '*****',
        // 微信支付对应的 KEY
        'key'     => '*****'
    ),
    //.....

php端代码

<?php
class wxPayController extends grace{

    public function createOrder(){
        if(empty($_POST['openid'])){
            exit(json_encode(array('err_code'=>'99999', 'err_code_des' => 'openid 参数错误')));
        }
        /*
         * 微信支付后端示例代码
         * 模拟一个1元的支付信息,真实环境可以利用订单数据来产生下面的order数据
         */
        //模拟一个简单的订单信息
        $order = array(
            'id'         => mt_rand(111111111,999999999),     // 订单号码
            'price'      => 1           // 订单价格 实际开发 * 100
        );
        //使用统一下单接口返回微信支付前端必须的信息
        $orderWxPay                  = array();
        $orderWxPay['body']         = '支付描述'; //支付描述
        //商户系统内部订单号,要求32个字符内
        $orderWxPay['out_trade_no'] = $order['id'];
        //总价,需要 * 100
        $orderWxPay['total_fee']    = $order['price'];
        //异步接收微信支付结果通知的回调地址
        $orderWxPay['notify_url']   = 'https://域名/wxPay/payback/';
        //客户的openid 公众号支付必须参数,通过登录即可获取
        $orderWxPay['openid']       = $_POST['openid'];
        //实例化微信支付对象
        $graceWeChat    = new \phpGrace\tools\graceWeChat();
        $graceWeChatPay = new \phpGrace\tools\graceWeChat\pay($graceWeChat);
        //生成订单并返回支付必须的信息
        $graceWeChatPay->createOrder($orderWxPay, 'MINIAPP');
    }

    public function code2session(){
        if(empty($_POST['code'])){
            exit(json_encode(array('errcode'=>'99999', 'errmsg' => 'code 参数错误')));
        }
        //实例化小程序操作对象
        $graceWeChat            = new \phpGrace\tools\graceWeChat();
        $graceWeChatMiniProgram = new \phpGrace\tools\graceWeChat\miniProgram($graceWeChat);
        exit($graceWeChatMiniProgram->code2session($_POST['code']));
    }

    // 支付成功后微信支付服务器异步通知接口
    // 根据通知结果处理订单状态等后续工作
    public function payback(){
        $graceWeChat    = new \phpGrace\tools\graceWeChat();
        $graceWeChatPay = new \phpGrace\tools\graceWeChat\pay($graceWeChat);
        $res = $graceWeChatPay->payBack();
        // 将 res 数组与数据库内订单信息进行比对,比对后进行后续操作,如:更新订单、发送通知......
        file_put_contents('pay.txt', json_encode($res, JSON_UNESCAPED_UNICODE));
        echo '<xml> 
        <return_code><![CDATA[SUCCESS]]></return_code>
        <return_msg><![CDATA[OK]]></return_msg>
      </xml>';
    }
}

小程序 js 代码

Page({
  data : {
    
  },
  pay : function(){
    wx.showLoading({
      title: 'loading',
    });
    var isLogin = this.checkLogin();
    // 用户未登录 [ 不存在 openid 则利用 return 终止程序继续运行 ]
    if(!isLogin){
      this.wxLogin(()=>{
        this.pay();
      });
      return ;
    }
    // 请求后端进行微信支付订单的形成
    var openid = wx.getStorageSync('openid');
    wx.request({
      header: {"Content-Type": "application/x-www-form-urlencoded"}, 
      method:"POST",
      data   : {openid:openid},
      url: 'https://scms.hcoder.net/wxPay/createOrder',
      success:(res)=>{
        console.log(res);
        res = res.data;
        if(res.err_code){
          wx.showToast({title: res.err_code_des, icon:"none"});
          return ;
        }
        // 拉起支付
        wx.requestPayment({
          nonceStr: res.nonceStr,
          package: res.package,
          signType:'MD5',
          paySign: res.paySign,
          timeStamp: res.timeStamp,
          success:(res)=>{
            console.log(res);
          },
          fail:(e)=>{
           // console.log(e)
          }
        })
      },
      complete:()=>{wx.hideLoading();}
    })
  },
  // 检查用户是否登录保证openid数据
  checkLogin : function(){
    var openid = wx.getStorageSync('openid');
    if(openid == ''){return false;}
    return true;
  },
  // 登录
  wxLogin : function(callBack){
    var openid = wx.getStorageSync('openid');
    if(openid == ''){
      wx.login({
        success:function(res){
          // res 格式 {errMsg: "login:ok", code: "013e4D000yGdX***00FF6Lj1e4D0f"}
          console.log(res)
          // 通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、
          // 微信开放平台帐号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台帐号)
          // 及本次登录的会话密钥(session_key)等。
          wx.request({
            url    : 'https://scms.hcoder.net/wxPay/code2session',
            method : 'POST',
            header: {"Content-Type": "application/x-www-form-urlencoded"}, 
            data   : {code:res.code},
            success : (res)=>{
              console.log(res);
              wx.hideLoading();
              res = res.data;
              if(res.errcode){
                wx.showToast({title: '登录失败',icon:"none"});
                return ;
              }
              try {
                wx.setStorageSync('openid', res.openid);
                callBack();
              } catch (e) { }
            }
          })
        }
      });
      return false;
    }
  }
});

小程序视图代码

<view style="line-height:200rpx; font-size:36rpx; text-align:center;" bindtap="pay">
  <text>点击这里进行支付</text>
</view>