WeChat 애플릿에서 개발한 온라인 결제 기능 구현 코드-미니 프로그램 개발-php.cn

WeChat 애플릿에서 개발한 온라인 결제 기능 구현 코드

高洛峰

풀어 주다： 2017-03-16 15:17:51

원래의

2419명이 탐색했습니다.

이 글은 위챗 애플릿 개발의 온라인 결제 기능 구현 코드에 대한 관련 정보를 주로 소개합니다. 필요한 친구는

위챗 애플릿의 온라인 결제 기능

최근 위챗 미니 프로그램에서 온라인 결제 기능을 사용해야 해서 공문서를 살펴보니 미니 프로그램에서 위챗 결제를 구현하는 것이 매우 편리하다는 것을 알았습니다. 이전에 서비스 계정으로 WeChat 결제를 개발한 적이 있다면 미니 프로그램의 WeChat 결제 개발 프로세스가 서비스 계정의 개발 프로세스와 완전히 동일하다는 것을 알게 될 것입니다. 이제 WeChat의 개발 프로세스와 주의 사항에 대해 이야기하겠습니다. 미니 프로그램에서 결제를 자세히 알아보세요.

WeChat 애플릿에서 개발한 온라인 결제 기능 구현 코드

1. 위챗 결제 및 위챗 가맹점 계정 개설

이 과정은 위챗 결제 과정과 동일합니다. 서비스 계좌 개설도 마찬가지고 할 말이 없습니다.

WeChat 애플릿에서 개발한 온라인 결제 기능 구현 코드

2. 사용자의 openid를 얻습니다

미니 프로그램 클라이언트를 사용해야 합니다. 🎜 >js

현재 사용자의 openid를 얻으려면 wx.login 메소드를 호출하여 사용자의 코드를 얻을 수 있으며, 개발자 서버는 로그인 자격 증명 코드를 사용하여 openid를 얻습니다.

wx.login({
   success: function(res) {
    if (res.code) {
     //发起网络请求
     wx.request({
      url: &#39;https://yourwebsit/onLogin&#39;,
      method: &#39;POST&#39;,
      data: {
       code: res.code
      },
      success: function(res) {
        var openid = res.data.openid;
      },
      fail: function(err) {
        console.log(err)
      }
     })
    } else {
     console.log(&#39;获取用户登录态失败！&#39; + res.errMsg)
    }
   }
  });

로그인 후 복사

var code = req.param("code");
    request({
      url: "https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+code+"&grant_type=authorization_code",
      method: &#39;GET&#39;
    }, function(err, response, body) {
      if (!err && response.statusCode == 200) {
        res.json(JSON.parse(body));
      }
    });

로그인 후 복사

3.prepay_id 및 결제 서명 확인 paySign

이 단계의 과정은 클라이언트와 서버로 나누어지는 서비스 계정의 위챗 결제 과정과 동일합니다

먼저 클라이언트 js를 살펴보겠습니다

서비스 계정에서는 다음 코드를 통해 결제 기능을 활성화합니다.

function jsApiCall()
    {
      WeixinJSBridge.invoke(
        &#39;getBrandWCPayRequest&#39;,
        {
          "appId":"",   //公众号名称，由商户传入   
          "timeStamp":"",     //时间戳，自1970年以来的秒数   
          "nonceStr":"", //随机串   
          "package":"prepay_id=<%=prepay_id%>",   
          "signType":"MD5",     //微信签名方式：   
          "paySign":"<%=_paySignjs%>" //微信签名
        },
        function(res){
          WeixinJSBridge.log(res.err_msg);
          if( res.err_msg =="get_brand_wcpay_request:ok"){
            alert("支付成功!");
          }else{
            alert("支付失败!");
          }
        }
      );
    }

로그인 후 복사

미니 프로그램에서는 wx.requestPayment 메소드를 통해 결제 기능을 활성화합니다. 물론, 여기에서는 먼저 prepay_id를 얻어야 합니다.

 wx.request({
          url: &#39;https://yourwebsit/service/getPay&#39;, 
          method: &#39;POST&#39;,
          data: {
           bookingNo:bookingNo, /*订单号*/
           total_fee:total_fee,  /*订单金额*/
           openid:openid
          },
          header: {
            &#39;content-type&#39;: &#39;application/json&#39;
          },
          success: function(res) {
            wx.requestPayment({
             &#39;timeStamp&#39;:timeStamp,
             &#39;nonceStr&#39;: nonceStr,
             &#39;package&#39;: &#39;prepay_id=&#39;+res.data.prepay_id,
             &#39;signType&#39;: &#39;MD5&#39;,
             &#39;paySign&#39;: res.data._paySignjs,
             &#39;success&#39;:function(res){
               console.log(res);
             },
             &#39;fail&#39;:function(res){
               console.log(&#39;fail:&#39;+JSON.stringify(res));
             }
            })
          },
          fail: function(err) {
            console.log(err)
          }
        })

로그인 후 복사

서버측에서 가장 중요한 것은 prepay_id를 얻고 paySign에 서명하는 것입니다

 var bookingNo = req.param("bookingNo");
    var total_fee = req.param("total_fee");
    var openid = req.param("openid");
    var body = "费用说明";
    var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";
    var formData = "<xml>";
    formData += "<appid>appid</appid>"; //appid
    formData += "<attach>test</attach>";
    formData += "<body>" + body + "</body>";
    formData += "<mch_id>mch_id</mch_id>"; //商户号
    formData += "<nonce_str>nonce_str</nonce_str>";
    formData += "<notify_url>notify_url</notify_url>";
    formData += "<openid>" + openid + "</openid>";
    formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";
    formData += "<spbill_create_ip>spbill_create_ip</spbill_create_ip>";
    formData += "<total_fee>" + total_fee + "</total_fee>";
    formData += "<trade_type>JSAPI</trade_type>";
    formData += "<sign>" + paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, bookingNo, spbill_create_ip, total_fee, &#39;JSAPI&#39;) + "</sign>";
    formData += "</xml>";
    request({
      url: url,
      method: &#39;POST&#39;,
      body: formData
    }, function(err, response, body) {
      if(!err && response.statusCode == 200) {
        var prepay_id = getXMLNodeValue(&#39;prepay_id&#39;, body.toString("utf-8"));
        var tmp = prepay_id.split(&#39;[&#39;);
        var tmp1 = tmp[2].split(&#39;]&#39;);
        //签名
        var _paySignjs = paysignjs(appid, mch_id, &#39;prepay_id=&#39; + tmp1[0], &#39;MD5&#39;,timeStamp);
        var o = {
          prepay_id: tmp1[0],
          _paySignjs: _paySignjs
        }
        res.send(o);
      }
    });

로그인 후 복사

다음은 다음과 같습니다.

기능

function paysignjs(appid, nonceStr, package, signType, timeStamp) {
  var ret = {
    appId: appid,
    nonceStr: nonceStr,
    package: package,
    signType: signType,
    timeStamp: timeStamp
  };
  var string = raw1(ret);
  string = string + &#39;&key=&#39;+key;
  console.log(string);
  var crypto = require(&#39;crypto&#39;);
  return crypto.createHash(&#39;md5&#39;).update(string, &#39;utf8&#39;).digest(&#39;hex&#39;);
};

function raw1(args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function(key) {
    newArgs[key] = args[key];
  });

  var string = &#39;&#39;;
  for(var k in newArgs) {
    string += &#39;&&#39; + k + &#39;=&#39; + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

function paysignjsapi(appid, attach, body, mch_id, nonce_str, notify_url, openid, out_trade_no, spbill_create_ip, total_fee, trade_type) {
  var ret = {
    appid: appid,
    attach: attach,
    body: body,
    mch_id: mch_id,
    nonce_str: nonce_str,
    notify_url: notify_url,
    openid: openid,
    out_trade_no: out_trade_no,
    spbill_create_ip: spbill_create_ip,
    total_fee: total_fee,
    trade_type: trade_type
  };
  var string = raw(ret);
  string = string + &#39;&key=&#39;+key;
  var crypto = require(&#39;crypto&#39;);
  return crypto.createHash(&#39;md5&#39;).update(string, &#39;utf8&#39;).digest(&#39;hex&#39;);
};

function raw(args) {
  var keys = Object.keys(args);
  keys = keys.sort()
  var newArgs = {};
  keys.forEach(function(key) {
    newArgs[key.toLowerCase()] = args[key];
  });

  var string = &#39;&#39;;
  for(var k in newArgs) {
    string += &#39;&&#39; + k + &#39;=&#39; + newArgs[k];
  }
  string = string.substr(1);
  return string;
};

function getXMLNodeValue(node_name, xml) {
  var tmp = xml.split("<" + node_name + ">");
  var _tmp = tmp[1].split("</" + node_name + ">");
  return _tmp[0];
}

로그인 후 복사

를 사용하면 간단한 3단계만으로 미니 프로그램의 위챗 결제 기능이 연결됩니다. 테스트 결제 효과는 다음과 같습니다. 다이어그램

WeChat 애플릿에서 개발한 온라인 결제 기능 구현 코드