Tutoriel de 5 minutes pour mettre en œuvre l'accès au paiement WeChat

En fait, il n'est pas difficile de connecter le paiement à un site Web ou à un service d'application. Tant que vous n'avez pas peur de le faire et que vous comprenez soigneusement l'ensemble du processus d'interaction de paiement, la mise en œuvre ne prend en réalité qu'une demi-heure au maximum. . Cet article est basé sur l'utilisation de Ping++ pour intégrer la fonction de paiement afin de mettre en œuvre le paiement WeChat, ce qui ne prend que cinq minutes environ.

J'ai reçu ce matin une notification WeChat indiquant que l'application d'accès WeChat Pay pour laquelle j'ai demandé hier a été approuvée. Gu vient de connecter WeChat Pay dans la matinée. Comme j'ai déjà utilisé Ping++ pour accéder au service de paiement instantané d'Alipay, l'ajout d'un accès au paiement WeChat sur cette base n'est qu'une question de minutes.

Configuration du backend Ping++

Une fois le paiement WeChat que vous avez demandé approuvé, vous obtiendrez quatre informations très critiques.

Une fois la configuration correcte, vous devez simplement modifier le code d'initiation du paiement sur le back-end, car il existe des différences subtiles entre le paiement Alipay et WeChat dans le système Ping++, en particulier la différence dans le paramètre supplémentaire : Utilisez Alipay pour obtenir un paiement instantané Lors de la création d'un compte, success_url doit être transmis dans la partie supplémentaire comme exigence de saut synchrone, tandis que le paiement WeChat doit transmettre le product_id dans le champ supplémentaire. Cette partie du code peut ressembler à ceci : <.>

switch ( $channel ) {    case 'alipay_pc_direct' :      
 $extra['success_url'] = url('/payment/done');       
  break;    case 'wx_pub_qr':       
   $extra['product_id'] = $this->wechatOrder();    
       break;    default:      
         //more extra comes here}

Cette partie, je pensais que cela pourrait être fait en une minute !

Modifier le code du front-end

À ce stade, il ne reste effectivement que deux minutes pour le front-end, mais cela suffit. Parce que j'ai utilisé Vuejs pour reconstruire le composant de paiement auparavant, après avoir ajouté WeChat, j'ai juste ajouté quelques conditions pour juger et c'était OK. Cependant, une chose qui nécessite une attention particulière est que le paiement WeChat ne prend en charge que la numérisation des codes et qu'il n'y a pas de lien de saut. concept, nous avons donc besoin d'une bibliothèque pour traiter les codes QR. Ici, nous pouvons utiliser directement le vue-qrcode que j'ai recommandé auparavant.

then((response) => {
    if(this.channel === 'wx_pub_qr') {
      this.status = 'paying';
      this.qrcodeUrl = 
           response.data.credential.wx_pub_qr;
      this.timeId = setInterval(() => {
          if (this.status == 'success') {
              clearInterval(this.timeId);
          }
          this.checkPaymentDone(response.data.id);
       }, 5000)
    }
 }
 
checkPaymentDone(chargeId) {
    axios.post('/payment/check', {
        chargeId: chargeId
    }).catch(error => {
        this.status = 'exception';
    }).then(response => {
        if (response.data.finished) {
            this.status = 'success';
        }
    })
},

De cette façon, lors de l'affichage du code QR, cela peut ressembler à ceci :

<div v-show="status == &#39;paying&#39;">
    <p v-show="channel == &#39;wx_pub_qr&#39;">
        <qrcode 
         :value="qrcodeUrl"
         v-if="qrcodeUrl"
        :options="{ size: 170 }">
        </qrcode>
    </p>
    <p>请使用微信扫码支付</p>
</div>

De cette façon, l'utilisateur peut voir correctement le code QR du paiement WeChat lors du paiement en choisissant le paiement WeChat Coded! Deux minutes !

Le contenu ci-dessus concerne la méthode du didacticiel de 5 minutes pour mettre en œuvre l'accès au paiement WeChat. J'espère que cela pourra aider tout le monde.

Recommandations associées :

Étapes pour mettre en œuvre le processus de paiement WeChat à l'aide de h5

Explication détaillée de Thinkphp intégrant la fonction de paiement WeChat

Résumé des erreurs de la fonction de paiement dans le développement de l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!