Nodejs WeChat 공개 계정 결제 개발-위챗 개발-php.cn

odeJs WeChat 공개 계정 기능 개발, 모바일 H5 페이지에서 WeChat의 결제 기능을 호출합니다. 지난 며칠 동안 회사의 결제 요구 사항 완료 요구에 따라 노드 및 h5 페이지를 사용하여 WeChat의 결제 기능을 호출했습니다. 이제 더 많은 개발자가 WeChat 결제 기능 개발을 성공적으로 완료할 수 있도록 개발 프로세스를 다시 살펴보겠습니다. (WeChat은 아직 노드 결제 기능을 제공하지 않습니다.)

1. 코드 요청

코드 요청의 목적은 사용자의 openid(현재 공식 계정과 관련된 사용자의 고유 식별자)를 얻는 것입니다. access_token.요청된 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
이 API는 여러 매개변수에 주의해야 합니다. 🎜>

1. appid 공식 계정의 appid는 공식 계정에서 확인할 수 있습니다

2. Redirect_uri 위의 주소를 요청하면 사용자가 정의한 WeChat 콜백 주소로 WeChat이 이동합니다. 코드를 사용하려면 여기의 리디렉션_URL에 **url_encode** *php*가 필요합니다. 프로그램이 노드인 경우 **encodeURLComponent(url)** 인코딩을 사용해야 합니다.
3. 이에 대해서는 할 말이 없습니다. . response_type=code 수정, 자세한 안내는 위챗 공식 홈페이지 안내를 참고하세요
4.scope=snsapi_userinfo, 이렇게 적어주세요, 자세한 안내는 위챗 공식 홈페이지 안내를 확인해주세요
5. state=STATE, 이렇게 작성하세요. 자세한 지침은 WeChat 공식 웹사이트에서 지침을 볼 수 있습니다
6. Wechat_redirect는 다음과 같이 작성할 수 있습니다. WeChat 공식 홈페이지
ps: 공식 홈페이지 링크:

2. openid 코드를 통해 access_token 받기

코드의 값은 첫 번째 단계에서 얻은 후, 코드를 통한 access_token 및 openid 값 api here:

1. appid WeChat 공식 계정 ID, WeChat 공식 계정 배경에서 가져옵니다
2. Secret은 WeChat 공식 계정의 배경에서 가져옵니다.

3. 첫 번째 단계는 사용된 코드를 가져오는 것입니다.

4. grant_type=authorization_code

3. access_token을 통해

access_token을 호출합니다. 후속 기능을 수행하려면 공식 예를 참조하세요:

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

4. 웹페이지에서 결제 API 호출

이것을 보면 웹페이지에서 WeChat 결제 기능을 호출하면 거의 끝나는 것 같죠? 아니요, 닫지도 마세요

WeChat 브라우저에서 H5 웹페이지를 열고 JS를 실행하여 결제를 활성화하세요. 인터페이스의 입력 및 출력 데이터 형식은 JSON입니다.

참고: WeixinJSBridge 내장 개체는 다른 브라우저에서는 유효하지 않습니다.

샘플 코드는 다음과 같습니다.

위 코드를 보시고, WeChat의 결제 기능을 호출하려면

function onBridgeReady(){
 WeixinJSBridge.invoke(
 &#39;getBrandWCPayRequest&#39;, {
  "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(&#39;WeixinJSBridgeReady&#39;, onBridgeReady, false);
 }else if (document.attachEvent){
 document.attachEvent(&#39;WeixinJSBridgeReady&#39;, onBridgeReady); 
 document.attachEvent(&#39;onWeixinJSBridgeReady&#39;, onBridgeReady);
 }
}else{
 onBridgeReady();
}

로그인 후 복사

<🎜 매개변수를 전달해야 합니다. >매개변수 설명:

1. appId // 판매자가 전달한 공식 계정 이름

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

로그인 후 복사

2. timeStamp // 타임스탬프, 1970년 이후의 초 수. 여기서는 특별한 주의가 필요합니다. 문자열 타임스탬프 형식이어야 합니다. 즉, "" 따옴표여야 합니다

3. nonceStr //임의의 문자열 32비트, 메서드는 나중에 제공됩니다

4. signType //WeChat 서명 메서드: MD5

5. paySign //위챗 서명이라고 할게요
6. **패키지** //가장 중요한데요. 다음.
ps: 공식 웹사이트 인터페이스 설명
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

5. 패키지 받기 WeChat의 통합 주문 인터페이스에서 prepay_id를 얻습니다

공식 API:

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

요청 매개변수가 많습니다. 하지만 그 중 일부는 필요하지 않습니다.

WeChat의 통합 주문 인터페이스에는 xml 데이터 전송이 필요하며 데이터에도 서명이 필요하므로 먼저 데이터에 서명하세요.

서명규칙은 위챗에서 제공하는 서명규칙을 참고하시면 됩니다. (서명방법은 추후 안내해드리겠습니다.)

위챗 공식 서명규칙 :

{
 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 : &#39;JSAPI&#39;,
}

로그인 후 복사

https://pay.weixin.qq.com/wiki /doc/api/ jsapi.php?chapter=4_3

서명을 생성한 후 데이터를 xml 형식으로 조합해야 합니다.

다음 단계는 API를 요청하는 것입니다. prepay_id 값을 가져와서 위에서 얻은 xml을 변환합니다. 데이터 요청 아래의 API가 WeChat으로 전송되며 데이터가 괜찮은지 확인한 후 원하는 값을 다시 넣습니다.

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;;

로그인 후 복사

6. prepay_id를 얻은 후 h5 섹션에서 WeChat 결제를 직접 호출할 수 있나요? 대답은 아직 없습니다.

prepay_id를 얻은 후 WeChat 결제 기능을 호출하는 h5의 매개변수는 다음과 같습니다.

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

로그인 후 복사

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

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

로그인 후 복사

如果你的各个环节都没有问题，那么得到了这样参数后你就可以正常的调用起微信的支付功能，跟原生的功能是没有任何的差别的，（估计你现在的心里也特高兴吧，没有 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>

로그인 후 복사

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

<xml>
 <return_code><![CDATA[SUCCESS]]></return_code>
 <return_msg><![CDATA[OK]]></return_msg>
</xml>

로그인 후 복사

小坑：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
 }
}));

로그인 후 복사

这样你就可以正常的获取到微信的 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
 });
 });

로그인 후 복사

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

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