So implementieren Sie die WeChat-Zahlung in WordPress

Für den Aufruf von WeChat-Zahlungen stellt WeChat ein JS SDK bereit, das uns bei der Implementierung der Funktion zum Aufrufen von WeChat-Zahlungen in WeChat unterstützt. Im Folgenden sind die spezifischen Implementierungsschritte aufgeführt:

Der erste Schritt besteht darin, die für die Implementierung der WeChat-Zahlung erforderlichen Pakete zu installieren

Wir verwenden weiterhin das Omnipay Wechat Pay-Paket, um uns zu helfen Die Implementierung von WeChat Payment ähnelt tatsächlich der vorherigen nativen Scan-Code-Zahlungsmethode, außer dass die verwendete Schnittstelle unterschiedlich ist. Das Folgende ist die Bibliothek, die in der von mir entwickelten WeChat-Website verwendet wird. Es erübrigt sich zu erwähnen, dass es sich bei den ersten beiden offensichtlich um die Omnipay-Bibliothek handelt, die für die WeChat-Zahlung verwendet wird. Dabei handelt es sich um ein WordPress-Router-System, das zur Implementierung benutzerdefinierter URLs verwendet wird und hauptsächlich zur Überprüfung der vom Benutzer übermittelten Daten verwendet wird.

"require": {
    "omnipay/omnipay": "~2.0",
    "lokielse/omnipay-wechatpay": "^1.0",
    "thefold/wordpress-dispatcher": "^1.0",
    "vlucas/valitron": "^1.2",
    },

Führen Sie nach Abschluss der Installation den Composer-Installationsbefehl aus und führen Sie die automatisch ladende Datei in das Theme oder Plug-in ein.

require_once( get_template_directory() . '/vendor/autoload.php' );

Front-End-Implementierung: Konfigurieren Sie das WeChat JS SDK und implementieren Sie die WeChat-Zahlung

Die jssdk.php hier wird vom WeChat-Beamten bereitgestellt und wird zum Initialisieren des WeChat JS SDK verwendet Signaturpaket verfügbar. Führen Sie diese Datei auf der Seite ein, auf der die WeChat-Zahlung implementiert werden muss, und initialisieren Sie dann die JSSDK-Klasse.

require_once( get_template_directory() . '/inc/jssdk.php' );
$jssdk       = new JSSDK( "xxxxx", "xxxxxxxxxxxxxxxx" );
$signPackage = $jssdk->GetSignPackage();

WeChat JS SDK initialisieren, WeChat-Zahlungsmethode aufrufen, um die WeChat-Zahlung zu implementieren

Stellen Sie zunächst sicher, dass sich die JavaScript-Datei des WeChat JS SDK im Kopf des befindet Seite: jweixin-1.0 .0.js. Basierend auf dem oben erhaltenen $signPackage haben wir die folgenden Vorgänge im folgenden Code ausgeführt.

Verwenden Sie wx.config, um js sdk zu initialisieren, und verwenden Sie wx.ready, um zu erkennen, ob js sdk erfolgreich initialisiert wurde. Wenn die Initialisierung erfolgreich ist, können wir die von WeChat js sdk bereitgestellte Schnittstelle für den Betrieb verwenden. Wenn auf die Zahlungsschaltfläche geklickt wird, wird eine Ajax-Anfrage an den Server gesendet, um die WeChat-Bestellung zu erhalten, und dann wird wx.chooseWXPay verwendet, um die WeChat-Zahlung zu initiieren. Dabei handelt es sich um die Popup-Schnittstelle, die wir in WeChat zur Eingabe des WeChat-Passworts sehen.

jQuery(document).ready(function ($) {
    
   // 配置 js sdk
   wx.config({
      debug: false,
      appId: &#39;<?php echo $signPackage[ "appId" ];?>&#39;,
      timestamp: <?php echo $signPackage[ "timestamp" ];?>,
      nonceStr: &#39;<?php echo $signPackage[ "nonceStr" ];?>&#39;,
      signature: &#39;<?php echo $signPackage[ "signature" ];?>&#39;,
      jsApiList: [&#39;chooseWXPay&#39;]
      // 这里的 jsApiList 需要什么就填写什么
   });

   // 一定要检查 js sdk 是否已经准备好了
   wx.ready(function () {
      $("#topay").click(function () {
         $.ajax({
            url: &#39;/order/&#39;,
            type: &#39;POST&#39;,
            dataType: &#39;json&#39;,
            data: $("#wepay").serialize(),
            success: function (order) {
               var params = {
                  &#39;timestamp&#39;: order.timeStamp,
                  &#39;nonceStr&#39;: order.nonceStr,
                  &#39;package&#39;: order.package,
                  &#39;signType&#39;: order.signType,
                  &#39;paySign&#39;: order.paySign               };
               wx.chooseWXPay(params);
            },
            error: function (order) {
               c-alert(order.message);
            }
         });
         return false;
      });
   });});

Das Zahlungsfenster blinkt und verschwindet in den folgenden Situationen

Beim Testen der WeChat-Zahlung auf WeChat stellen wir häufig fest, dass das WeChat-Zahlungsfenster blinkt und verschwindet Die Schnittstelle zur Eingabe des Zahlungspassworts wird nicht angezeigt. Die möglichen Gründe sind folgende. Bitte prüfen Sie dies sorgfältig.

jssdk ist nicht konfiguriert. Überprüfen Sie, ob die von wx.config und wx.readyAjax im obigen Code zurückgegebenen Daten falsch sind Der Testdomänenname wird im WeChat-Verwaltungshintergrund festgelegt. Zum sicheren Domänennamen hinzugefügt

Back-End-Implementierung: Bestelldaten überprüfen und senden

Die Back-End-Implementierung Es ist sehr einfach, die oben von Ajax übermittelten Daten zu empfangen, dann die erforderlichen JSON-Daten von WeChat Pay zu verarbeiten und die Bestellung für spätere Abfragen und nachfolgende Benachrichtigungsrückrufe in der Datenbank der Website zu speichern.

// 获取微信支付网关的函数function get_wechat_gateway() {
   $gateway = Omnipay::create( 'WechatPay_Js' );
   $gateway->setAppId( ' xxxxxxxx' );
   $gateway->setMchId( 'xxxxxxxx' );
   $gateway->setApiKey( 'xxxxxxxx' ); //注意这里的 ApiKey 是我们在微信商户后台设置的一个32位的随机字符串，和微信公众号里面的 App Secrit 不是一回事。

   return $gateway;}/**
 * 处理订单信息, 跳转到微信支付
 */new Dispatch( [

   'wepay/order' => function ( $request ) {

      // 检查用户提交的数据是否有错，如果有错误，返回错误信息
      $v = new Validator( $_POST );
      $v->rule( 'required', [ 'count', 'buyer_name', 'buyer_phone', 'buyer_address' ] );

      if ( ! $v->validate() ) {
         $msg = [
            'success' => '0',
            'message' => '下单失败, 请检查所有必填项。',
         ];
         wp_send_json( $msg );
      }

      $user = wp_get_current_user();
      $req = Request::createFromGlobals();
      $pid     = $req->get( 'pid' );
      $count   = $req->get( 'count' );
      $open_id = $req->cookies->get( 'open_id' );
      $prod  = get_post( $pid );
      $price = get_post_meta( $pid, '_prod_price', true );
      $total_fee = $price * $count * 100;
      $tn        = date( 'YmdHis' ) . mt_rand( 1000, 9999 );

      // 在实际开发过程中，我们需要把用户提交的订单数据保存到数据库一份
      // 订单参数
      $order = [
         'body'             => $prod->post_title',
         'out_trade_no'     => $tn,
         'total_fee'        => $total_fee,
         'spbill_create_ip' => wizhi_get_real_ip(),
         'fee_type'         => 'CNY',
         'open_id'          => $open_id,
      ];
      // 发送支付请求到微信并获取返回信息
      $gateway = get_wechat_gateway();
      $gateway->setNotifyUrl( 'https://www.wpzhiku.com/order/return' );
      $response = $gateway->purchase( $order )->send();
      $wechat_return = $response->getJsOrderData();

      wp_send_json( $wechat_return );

   },] );

Akzeptieren Sie die WeChat-Zahlungserfolgsbenachrichtigung, um die Bestellung automatisch abzuschließen oder automatisch aufzuladen.

Nach Abschluss der Zahlung sendet WeChat eine Zahlungserfolgsbenachrichtigung an die von uns angegebene Benachrichtigungs-URL zurück auf den zurückgegebenen Inhalt zugreifen, Vorgänge wie das automatische Abschließen von Bestellungen oder das automatische Aufladen durchführen. Hier sind zwei Punkte zu beachten.

Die Benachrichtigungs-URL muss zugänglich sein. Wenn sie nicht zugänglich ist, sendet WeChat die Benachrichtigung nicht. Es muss sich im selben Verzeichnis wie die Zahlungs-URL befinden.

Das von WeChat bereitgestellte SDK und die Schnittstellendaten unterscheiden sich stark vom Standard. Bei der Verwendung müssen Sie auf die Groß- und Kleinschreibung im Code achten Bei Problemen wenden Sie sich bitte sorgfältig an das von WeChat bereitgestellte Entwicklungsteam. Wenn die von Ihnen verwendete Sprache oder das Entwicklungsframework Bibliotheken für die WeChat-Entwicklung bereitstellt, wird empfohlen, diese Bibliotheken direkt für die Entwicklung zu verwenden Große und kleine Gruben, die WeChat für uns gegraben hat, reduzieren die Debugging-Schwierigkeit und beschleunigen die Entwicklung.

Weitere technische Artikel zum Thema WordPress finden Sie in der Spalte WordPress-Tutorials, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die WeChat-Zahlung in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!