So implementieren Sie die WeChat-Zahlung für die H5-Seitenzahlung mit integrierten Browser-Javascript-Kenntnissen

Aufgrund der Projektanforderungen muss die WeChat-Zahlung zur H5-Seite hinzugefügt werden, daher möchte ich nur sagen, dass es wirklich schwierig ist, insbesondere wenn das Debuggen umständlich ist.

Dies ist das offizielle API-Dokument von WeChat WeChat API

Vorbereitung für die WeChat-Zahlung

Beantragen Sie ein öffentliches Konto und aktivieren Sie die Zahlung. Dies ist ganz einfach. Verwenden Sie einfach Baidu.
Konfigurieren Sie nach der Bewerbung das „Payment Authorization Directory“, das „Test Authorization Directory“ und die „Test Whitelist“ auf der Registerkarte „Development Configuration“ auf der Seite „WeChat Payment“ der Seite der öffentlichen WeChat-Plattform
Suchen Sie nach „AppID (Anwendungs-ID)“ und „AppSecret (Anwendungsschlüssel)“ im „Developer Center“ auf der Seite der öffentlichen WeChat-Plattform
Suchen Sie auf der Händlerplattform nach der durch die WeChat-Zahlung zugewiesenen Händlernummer und konfigurieren Sie einen Händler-Zahlungsschlüssel

Spezifische Schritte

Besorgen Sie sich zunächst die prepay_id für die Zahlung über die WeChat-Zahlungs-API. Hier müssen Sie die oben genannte „AppID (Anwendungs-ID)“, „AppSecret (Anwendungsschlüssel)“ und „von der WeChat-Zahlung zugewiesene Händlernummer“ verwenden. „„Merchant Payment Key“ und einige andere Parameter (Einzelheiten finden Sie in der WeChat-Entwicklungsdokumentation) werden mit MD5 (der ersten Signatur) in eine Signatur verschlüsselt. Nachdem Sie die prepay_id erhalten haben, verwenden Sie prepay_id und einige andere Parameter (siehe). WeChat-Entwicklungsdokumentation für Details), um es mit MD5 (zweite Signatur) in eine Signatur zu verschlüsseln. Verwenden Sie dann im Frontend die js-API, die vom integrierten Browser von WeChat bereitgestellt wird, WeixinJSBridge.invoke, um die Popup-Seite von WeChat aufzurufen Hierfür ist die zweite Unterschrift oben

zu verwenden

Der spezifische Code lautet wie folgt

$.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('取消支付！');
   }
  });

 }
});

Einige einfache Fehlerpunkte erfordern Aufmerksamkeit

Der Zahlungslink stimmt nicht mit dem auf der Entwicklungsplattform konfigurierten Link überein

Insgesamt sind 2 Signaturen erforderlich und die erforderlichen Parameter sind unterschiedlich. Die in JS verwendete Signatur ist die zweite Signatur. Verwechseln Sie die Parameter nicht und übergeben Sie sie korrekt

Wenn der Körper chinesische Schriftzeichen enthält, die maskiert werden müssen, gibt es immer noch einige Probleme, die noch nicht vollständig gelöst sind. Das heißt, es bleibt keine Zeit, die Gültigkeit der Standortzahlung zu beurteilen Wenn die WeChat-Zahlung zu lange anhält, ist die Bestellung möglicherweise abgelaufen, aber die Zahlung kann bei der WeChat-Zahlung trotzdem erfolgreich sein. Wenn jemand weiß, wie man dieses Problem löst, kann er Ihnen hoffentlich die Lösung nennen >