Nodejs WeChat-Zahlungsentwicklung für öffentliche Konten

高洛峰
Freigeben: 2017-01-04 16:52:00
Original
1971 Leute haben es durchsucht

OdeJs WeChat-Funktion für öffentliche Konten entwickelt, mobile H5-Seite ruft die Zahlungsfunktion von WeChat auf. In den letzten Tagen wurden Node- und H5-Seiten verwendet, um die Zahlungsfunktion von WeChat entsprechend den Anforderungen des Unternehmens aufzurufen und die Zahlungsanforderungen zu erfüllen. Lassen Sie uns nun den Entwicklungsprozess noch einmal durchgehen, um mehr Entwicklern zu helfen, die Entwicklung der WeChat-Zahlungsfunktionen erfolgreich abzuschließen. (WeChat bietet noch keine Knotenzahlungsfunktion)

1. CODE anfordern

Der Zweck der Codeanforderung besteht darin, die OpenID des Benutzers (die eindeutige Kennung des Benutzers in Bezug auf das aktuelle offizielle Konto) zu erhalten access_token. Angeforderte API: https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect
Diese API muss auf mehrere Parameter achten:

1. App-ID des offiziellen Kontos
2. Redirect_uri Die benutzerdefinierte WeChat-Rückrufadresse springt zu der von Ihnen definierten Redirect_uri-Adresse Code, die Redirect_URL benötigt hier **url_encode** *php*. Wenn es sich bei Ihrem Programm um einen Knoten handelt, müssen Sie **encodeURLComponent(url)**-Codierung
3 verwenden, dazu gibt es nichts zu sagen . Response_type=code behoben. Detaillierte Anweisungen finden Sie in den Anweisungen auf der offiziellen WeChat-Website
4. Schreiben Sie es einfach so. Detaillierte Anweisungen finden Sie in den Anweisungen auf der offiziellen WeChat-Website
5. state=STATE, schreiben Sie es einfach so. Detaillierte Anweisungen finden Sie auf der offiziellen WeChat-Website. 6. Wechat_redirect kann so geschrieben werden. Detaillierte Anweisungen finden Sie auf der Offizielle WeChat-Website
ps: Offizieller Website-Link:

2. Erhalten Sie access_token über Code, openid

Der Wert des Codes wurde im ersten Schritt ermittelt, dann müssen Sie den erhalten Wert von access_token und openid durch Code. Die angeforderte API

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

1. appid Offizielle WeChat-Konto-ID, erhalten aus dem offiziellen WeChat-Kontohintergrund

2. Secret ist der Schlüssel des offiziellen WeChat-Kontos.
3. Der erste Schritt besteht darin, den verwendeten Code zu erhalten


3. Rufen Sie die Schnittstelle

access_token auf Um nachfolgende Funktionen auszuführen, können Sie sich auf das offizielle Beispiel beziehen:

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t= resources/res_list&verify=1&id=open1419316518&lang=zh_CN


4. Rufen Sie die Zahlungs-API auf der Webseite auf

Wenn Sie dies sehen, haben Sie das Gefühl, dass es fast vorbei ist, solange die Webseite die WeChat-Zahlungsfunktion aufruft. Nein, nicht einmal schließen

Öffnen Sie die H5-Webseite im WeChat-Browser und führen Sie JS aus, um die Zahlung zu aktivieren. Das Eingabe- und Ausgabedatenformat der Schnittstelle ist JSON.

Hinweis: Die in WeixinJSBridge integrierten Objekte sind in anderen Browsern nicht gültig.
Der Beispielcode lautet wie folgt:

Sehen Sie sich den obigen Code an. Wenn Sie dann die Zahlungsfunktion von WeChat aufrufen möchten, müssen Sie Parameter übergeben:
function onBridgeReady(){
 WeixinJSBridge.invoke(
 'getBrandWCPayRequest', {
  "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 
  "timeStamp":" 1395712654",  //时间戳,自1970年以来的秒数 
  "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 
  "package" : "prepay_id=u802345jgfjsdfgsdg888", 
  "signType" : "MD5",  //微信签名方式: 
  "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
 },
 function(res){ 
  if(res.err_msg == "get_brand_wcpay_request:ok" ) {} // 使用以上方式判断前端返回,微信团队郑重提示:res.err_msg将在用户支付成功后返回 ok,但并不保证它绝对可靠。 
 }
 ); 
}
if (typeof WeixinJSBridge == "undefined"){
 if( document.addEventListener ){
 document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
 }else if (document.attachEvent){
 document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
 document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
 }
}else{
 onBridgeReady();
}
Nach dem Login kopieren

Parameterbeschreibung:
{
 "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 
 "timeStamp":" 1395712654",  //时间戳,自1970年以来的秒数 
 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 
 "package" : "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" : "MD5",  //微信签名方式: 
 "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
}
Nach dem Login kopieren

1. appId // Offizieller Kontoname, vom Händler übergeben

2. timeStamp // Zeitstempel, die Anzahl der Sekunden seit 1970. Hier muss besonders darauf geachtet werden muss ein String-Zeitstempelformat sein, d. h. Es muss „“ nonceStr //Zufälliger String mit 32 Bits sein, und die Methode wird später bereitgestellt

4 🎜>5. paySign //WeChat-Signatur, dann heißt es
6. **Paket** //Das ist das Wichtigste. Nächste.
ps: Offizielle Website-Schnittstellenbeschreibung
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

5 von der einheitlichen Bestellschnittstelle von WeChat erhält prepay_id

Offizielle API:

https://api.mch.weixin.qq.com/pay/unifiedorder

Es gibt viele Anforderungsparameter, Einige davon sind jedoch nicht erforderlich.


Die einheitliche Bestellschnittstelle von WeChat erfordert die Übertragung von XML-Daten. Die Daten müssen daher zuerst signiert werden.

Informationen zu den Signaturregeln finden Sie in den von WeChat bereitgestellten Signaturregeln (die Signaturmethode wird später erläutert).

Offizielle Signaturregeln von WeChat:
{
 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 ,//new Date().getTime(), //订单号
 spbill_create_ip : SPBILL_CREATE_IP , //客户端的 ip
 total_fee : TOTAL_FEE, //商品的价格, 此处需要注意的是这个价格是以分算的, 那么一般是元, 你需要转换为 RMB 的元
 trade_type : 'JSAPI',
}
Nach dem Login kopieren
https://pay.weixin.qq.com/wiki /doc/api/ jsapi.php?chapter=4_3


Nachdem Sie die Signatur generiert haben, müssen Sie die Daten im XML-Format zusammenstellen:

Der nächste Schritt besteht darin, die API anzufordern Um den Wert von prepay_id abzurufen und die oben erhaltene XML-Datei zu konvertieren, wird die Datenanforderung an WeChat gesendet, nachdem überprüft wurde, ob die Daten in Ordnung sind.

api: https://api.mch.weixin.qq.com/pay/unifiedorder

var body = &#39;<xml> &#39; +
 &#39;<appid>&#39;+config.wxappid+&#39;</appid> &#39; +
 &#39;<attach>&#39;+obj.attach+&#39;</attach> &#39; +
 &#39;<body>&#39;+obj.body+&#39;</body> &#39; +
 &#39;<mch_id>&#39;+config.mch_id+&#39;</mch_id> &#39; +
 &#39;<nonce_str>&#39;+obj.nonce_str+&#39;</nonce_str> &#39; +
 &#39;<notify_url>&#39;+obj.notify_url+&#39;</notify_url>&#39; +
 &#39;<openid>&#39;+obj.openid+&#39;</openid> &#39; +
 &#39;<out_trade_no>&#39;+obj.out_trade_no+&#39;</out_trade_no>&#39;+
 &#39;<spbill_create_ip>&#39;+obj.spbill_create_ip+&#39;</spbill_create_ip> &#39; +
 &#39;<total_fee>&#39;+obj.total_fee+&#39;</total_fee> &#39; +
 &#39;<trade_type>&#39;+obj.trade_type+&#39;</trade_type> &#39; +
 &#39;<sign>&#39;+obj.sign+&#39;</sign> &#39; + // 此处必带签名, 否者微信在验证数据的时候是不通过的
 &#39;</xml>&#39;;
Nach dem Login kopieren
6. Kann ich nach Erhalt der prepay_id direkt die WeChat-Zahlung im h5-Bereich aufrufen? Die Antwort ist noch nicht.


Nach Erhalt der prepay_id lauten die Parameter von h5, die die Zahlungsfunktion von WeChat aufrufen, wie folgt:

{
 "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 
 "timeStamp":" 1395712654",  //时间戳,自1970年以来的秒数 
 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 
 "package" : "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" : "MD5",  //微信签名方式:
}
Nach dem Login kopieren

有了这样的参数, 那么你还需要吧所有参与的参数做签名。签名规跟上面的一样,生成了签名后需要吧签名的参数 paySign 赋给h5 呼起微信的支付功能的参数(也就是微信的签名不参与签名的生成)
最后的参数是这样子的:

{
 "appId" : "wx2421b1c4370ec43b", //公众号名称,由商户传入 
 "timeStamp":" 1395712654",  //时间戳,自1970年以来的秒数 
 "nonceStr" : "e61463f8efa94090b1f366cccfbbb444", //随机串 
 "package" : "prepay_id=u802345jgfjsdfgsdg888", 
 "signType" : "MD5",  //微信签名方式:
 "paySign" : "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
}
Nach dem Login kopieren

如果你的各个环节都没有问题, 那么得到了这样参数后你就可以正常的调用起微信的支付功能, 跟原生的功能是没有任何的差别的,(估计你现在的心里也特高兴吧, 没有 app 竟然可以使用 app 的功能,就是这么的神奇)。

七.支付完成的回调

微信支付完了后会在 h5 页面的微信支付的回调函数里面放回值,
res.err_msg == "get_brand_wcpay_request:ok" ,这样就是成功了, 但是不是就完事儿了呢 ? 也不是,为什么呢? 微信真的收到钱了么? 收到的钱是不是你传递给微信的值呢 ?你还需要将支付的结果写数据库什么的,这些都是未知。还记的在统一下单接口中有个必须参数就是 notify_url : NOTIFY_URL,// 微信付款后的回调地址 这个地址是用户传递给微信的, 微信在收到用户的付款后会以 post 的方式请求这个接口,微信会传递用户付款的信息过来, 不过是 xml 格式的。
类系这样的 xml 格式:

<xml>
 <appid><![CDATA[wx2421b1c4370ec43b]]></appid>
 <attach><![CDATA[支付测试]]></attach>
 <bank_type><![CDATA[CFT]]></bank_type>
 <fee_type><![CDATA[CNY]]></fee_type>
 <is_subscribe><![CDATA[Y]]></is_subscribe>
 <mch_id><![CDATA[10000100]]></mch_id>
 <nonce_str><![CDATA[5d2b6c2a8db53831f7eda20af46e531c]]></nonce_str>
 <openid><![CDATA[oUpF8uMEb4qRXf22hE3X68TekukE]]></openid>
 <out_trade_no><![CDATA[1409811653]]></out_trade_no>
 <result_code><![CDATA[SUCCESS]]></result_code>
 <return_code><![CDATA[SUCCESS]]></return_code>
 <sign><![CDATA[B552ED6B279343CB493C5DD0D78AB241]]></sign>
 <sub_mch_id><![CDATA[10000100]]></sub_mch_id>
 <time_end><![CDATA[20140903131540]]></time_end>
 <total_fee>1</total_fee>
 <trade_type><![CDATA[JSAPI]]></trade_type>
 <transaction_id><![CDATA[1004400740201409030005092168]]></transaction_id>
</xml>
Nach dem Login kopieren

根据自己的业务逻辑解析这个 xml 格式的数据就好了。
注意:这里你在获取到数据后微信需要得到你的回应, 如果你一直不回应微信, 微信会请求你好几次, 这样估计你的逻辑会有问题吧,所以你需要给微信返回 xml 的格式的 回应。

<xml>
 <return_code><![CDATA[SUCCESS]]></return_code>
 <return_msg><![CDATA[OK]]></return_msg>
</xml>
Nach dem Login kopieren

小坑:node ,express 框架开发, 如果你在微信的支付成功后的回调中没有获取到任何 xml 的值, 那么你需要安装一组件:body-parser-xml, 你可以使用 npm install body-parser-xml --save 安装, 在 app.js 里面require('body-parser-xml')(bodyParser);,使用中间件的方式

// 解决微信支付通知回调数据
app.use(bodyParser.xml({
 limit: &#39;2MB&#39;, // Reject payload bigger than 1 MB
 xmlParseOptions: {
 normalize: true, // Trim whitespace inside text nodes
 normalizeTags: true, // Transform tags to lowercase
 explicitArray: false // Only put nodes in array if >1
 }
}));
Nach dem Login kopieren

这样你就可以正常的获取到微信的 xml 数据了。

使用方法:

pay.getAccessToken({
 notify_url : &#39;http://demo.com/&#39;, //微信支付完成后的回调
 out_trade_no : new Date().getTime(), //订单号
 attach : &#39;名称&#39;,
 body : &#39;购买信息&#39;,
 total_fee : &#39;1&#39;, // 此处的额度为分
 spbill_create_ip : req.connection.remoteAddress,
 }, function (error, responseData) {
 res.render(&#39;payment&#39;, {
  title : &#39;微信支付&#39;,
  wxPayParams : JSON.stringify(responseData),
  //userInfo : userInfo
 });
 });
Nach dem Login kopieren

就到这里吧, 感觉也差不多了。如有不对的地方还请指正。

更多nodejs微信公众号支付开发相关文章请关注PHP中文网!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage