Comment mettre en œuvre le paiement WeChat pour le paiement de la page H5 avec les compétences browser_javascript intégrées

En raison des exigences du projet, le paiement WeChat doit être ajouté à la page H5, donc je l'ai essayé, je veux juste dire que c'est vraiment délicat, surtout lorsque le débogage n'est pas pratique

.

Ceci est le document API officiel de WeChat API WeChat

Préparation du paiement WeChat

Demandez un compte public et activez le paiement C'est très simple. Utilisez simplement Baidu vous-🎜>. Après avoir postulé, configurez le « Répertoire d'autorisation de paiement », le « Répertoire d'autorisation de test » et la « Liste blanche de test » dans l'onglet « Configuration de développement » de la page « Paiement WeChat » de la page de la plateforme publique WeChat
Recherchez « AppID (Application ID) » et « AppSecret (Application Key) » dans le « Developer Center » sur la page de la plateforme publique WeChat
Recherchez le numéro de commerçant attribué par le paiement WeChat dans la plateforme marchand, et configurez une clé de paiement marchand

Étapes spécifiques

Tout d'abord, obtenez le prepay_id pour le paiement via l'API de paiement WeChat. Ici, vous devez utiliser "AppID (ID d'application)", "AppSecret (clé d'application)", "numéro de commerçant attribué par le paiement WeChat" mentionnés ci-dessus. " " Clé de paiement du commerçant " et certains autres paramètres (veuillez vous référer à la documentation de développement WeChat pour plus de détails) sont cryptés dans une signature à l'aide de MD5 (la première signature). Après avoir obtenu le prepay_id, utilisez prepay_id et quelques autres paramètres (veuillez vous référer au Documentation de développement WeChat pour plus de détails) pour le chiffrer dans une signature à l'aide de MD5. (Deuxième signature) Ensuite, sur le front-end, utilisez l'API js fournie par le navigateur intégré de WeChat, WeixinJSBridge.invoke, pour appeler la page contextuelle de WeChat. paiement Ici, vous devez utiliser la deuxième signature ci-dessus

.

Le code spécifique est le suivant

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

 }
});

Quelques points d'échec faciles nécessitent une attention particulière

Le lien de paiement ne correspond pas au lien configuré sur la plateforme de développement

Au total, 2 signatures sont requises, et les paramètres requis sont différents. La signature utilisée en JS est la deuxième signature. Ne confondez pas les paramètres et transmettez-les correctement

.

S'il y a des caractères chinois dans le corps qui doivent être échappés, il y a encore des problèmes qui n'ont pas été complètement résolus, c'est-à-dire qu'on n'a pas le temps de juger de la validité du paiement de localisation si la couche pop-up. du paiement WeChat reste trop longtemps, la commande est peut-être sur notre site Web. Elle a expiré, mais le paiement peut toujours réussir dans le paiement WeChat. Si quelqu'un sait comment résoudre ce problème, j'espère qu'il pourra vous indiquer la solution