5-minütiges Tutorial zur Implementierung des WeChat-Zahlungszugriffs

Tatsächlich ist es nicht schwer, die Zahlung mit einer Website oder einem App-Dienst zu verknüpfen. Solange Sie keine Angst davor haben und den gesamten Zahlungsinteraktionsprozess genau verstehen, dauert die Implementierung wirklich nur höchstens eine halbe Stunde . Dieser Artikel basiert auf der Verwendung von Ping++ zur Integration der Zahlungsfunktion zur Implementierung der WeChat-Zahlung, die nur etwa fünf Minuten dauert.

Ich habe heute Morgen eine WeChat-Benachrichtigung erhalten, dass der WeChat Pay-Zugangsantrag, den ich gestern beantragt habe, gerade am Morgen genehmigt wurde. Da ich zuvor Ping++ für den Zugriff auf den Sofortzahlungsdienst von Alipay verwendet habe, ist das Hinzufügen eines WeChat-Zahlungszugangs auf dieser Basis eine Sache von Minuten.

Ping++-Backend konfigurieren

Nachdem die von Ihnen beantragte WeChat-Zahlung genehmigt wurde, erhalten Sie vier sehr wichtige Informationen.

Nachdem die Konfiguration korrekt ist, müssen Sie einfach den Code zum Auslösen der Zahlung im Backend ändern, da es im Ping++-System subtile Unterschiede zwischen Alipay- und WeChat-Zahlungen gibt, insbesondere den Unterschied im zusätzlichen Parameter: Verwenden Sie Alipay, um eine sofortige Zahlung zu erhalten. Beim Erstellen eines Kontos muss success_url im zusätzlichen Teil als synchrone Sprunganforderung übergeben werden, während bei der WeChat-Zahlung die product_id im zusätzlichen Feld übergeben werden muss. Der Code für diesen Teil kann wie folgt lauten:

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}

Diesen Teil dachte ich, er könnte in einer Minute erledigt werden!

Ändern Sie den Front-End-Code

Zu diesem Zeitpunkt verbleiben tatsächlich nur noch zwei Minuten für das Front-End, aber das reicht aus. Da ich zuvor Vuejs zum Rekonstruieren der Zahlungskomponente verwendet habe, habe ich nach dem Hinzufügen von WeChat nur einige Bedingungen zur Beurteilung hinzugefügt, und es war in Ordnung. Eine Sache, die jedoch besondere Aufmerksamkeit erfordert, ist, dass die WeChat-Zahlung nur das Scannen von QR-Codes unterstützt und es keinen Sprunglink gibt .Konzept, daher benötigen wir eine Bibliothek zur Verarbeitung von QR-Codes. Hier können wir den zuvor empfohlenen vue-qrcode direkt verwenden.

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';
        }
    })
},

Auf diese Weise kann es bei der Anzeige des QR-Codes so aussehen:

<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>

Auf diese Weise kann der Benutzer den QR-Code der WeChat-Zahlung korrekt sehen, wenn Wählen Sie WeChat-Zahlung. Zwei Minuten!

Bei dem obigen Inhalt geht es um die 5-minütige Tutorial-Methode zur Implementierung des WeChat-Zahlungszugriffs. Ich hoffe, dass sie allen helfen kann.

Verwandte Empfehlungen:

Schritte zur Implementierung des WeChat-Zahlungsprozesses mit h5

Detaillierte Erläuterung der Integration der WeChat-Zahlungsfunktion in Thinkphp

Zusammenfassung der Zahlungsfunktionsfehler bei der WeChat-Applet-Entwicklung

Das obige ist der detaillierte Inhalt von5-minütiges Tutorial zur Implementierung des WeChat-Zahlungszugriffs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!