위챗 애플릿 위챗 개발 Nodejs WeChat 공개 계정 결제 개발

Nodejs WeChat 공개 계정 결제 개발

Jan 04, 2017 pm 04:52 PM

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(
 '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();
}
로그인 후 복사
<🎜 매개변수를 전달해야 합니다. >매개변수 설명:

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中文网!


본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)