내장된 browser_javascript 기술을 사용하여 H5 페이지 결제를 위한 WeChat 결제를 구현하는 방법

프로젝트 요구 사항으로 인해 H5 페이지에 WeChat 결제를 추가해야 해서 시도해 보았는데, 특히 디버깅이 불편할 때 정말 까다롭다고 말씀드리고 싶습니다.

위챗 공식 API 문서입니다 위챗 API

위챗 결제 준비

공개 계정을 신청하고 결제를 활성화하는 것은 매우 간단합니다.
신청 후 WeChat 공개 플랫폼 페이지의 "WeChat 결제" 페이지에 있는 "개발 구성" 탭에서 "결제 승인 디렉터리", "테스트 승인 디렉터리" 및 "테스트 화이트리스트"를 구성합니다
WeChat 공개 플랫폼 페이지의 "개발자 센터"에서 "AppID(애플리케이션 ID)" 및 "AppSecret(애플리케이션 키)"를 찾으세요
가맹점 플랫폼에서 WeChat 결제로 할당된 가맹점 번호를 찾아 가맹점 결제 키를 구성하세요

구체적인 단계

먼저 위챗 결제 API를 통해 결제용 prepay_id를 얻어야 합니다. 여기서는 위에서 언급한 "AppID(애플리케이션 ID)", "AppSecret(애플리케이션 키)", "위챗 결제에서 할당된 가맹점 번호"를 사용해야 합니다. " "가맹점 결제 키" 및 기타 매개변수(자세한 내용은 WeChat 개발 문서 참조)는 MD5(첫 번째 서명)를 사용하여 서명으로 암호화됩니다. prepay_id를 얻은 후 prepay_id 및 기타 매개변수를 사용합니다(자세한 내용은 위챗 개발 문서 참조). 자세한 내용은 WeChat 개발 문서 참조) MD5를 사용하여 서명으로 암호화합니다. (두 번째 서명) 그런 다음 프런트엔드에서 WeChat 내장 브라우저인 WeixinJSBridge.invoke에서 제공하는 js API를 사용하여 WeChat의 팝업 페이지를 호출합니다. 여기서는 위의 두 번째 서명을 사용해야 합니다.

구체적인 코드는 다음과 같습니다

$.get('/xxx',function(data){
 if(data && data !== ""){
  var _data = $.parseJSON(data)[0];
  if(parseInt(_data.userAgent) < 5){
  alert('您的微信版本低于5.0，无法使用微信支付！');
  return false;
  }
  WeixinJSBridge.invoke('getBrandWCPayRequest',{
  'appId': _data.appId,
  'timeStamp': _data.timeStamp,
  'nonceStr': _data.nonceStr,
  'package': 'prepay_id=' + _data.packageOne,
  'signType': _data.signType,
  'paySign': _data.paySign
  },function(res){
   if(res.err_msg === 'get_brand_wcpay_request:ok'){
   alert('支付成功，返回订单列表！');
   }else if(res.err_msg === 'get_brand_wcpay_request:cancel'){
   alert('取消支付！');
   }
  });

 }
});

몇 가지 쉬운 실패 지점에 주의가 필요합니다

결제 링크가 개발 플랫폼에 설정된 링크와 일치하지 않습니다

총 2개의 서명이 필요하며, 필수 매개변수가 다릅니다. JS에서 사용하는 서명은 두 번째 서명이므로 매개변수를 혼동하지 말고 올바르게 전달하세요.

본문에 탈출해야 할 한자가 있는 경우 아직 완전히 해결되지 않은 문제가 있습니다. 즉, 팝업 레이어의 경우 위치 결제의 유효성을 판단할 시간이 없습니다. WeChat 결제가 너무 오래 지속되면 주문이 당사 웹사이트에 있을 수 있습니다. 만료되었지만 여전히 WeChat 결제에 성공할 수 있습니다. 이 문제를 해결하는 방법을 아시는 분은 해결 방법을 알려 주시기 바랍니다.