Comment implémenter le paiement WeChat dans WordPress

Pour appeler le paiement WeChat, WeChat fournit le SDK JS pour nous aider à implémenter la fonction d'appel du paiement WeChat dans WeChat. Voici les étapes spécifiques de mise en œuvre,

La première étape consiste à installer les packages requis pour mettre en œuvre le paiement WeChat

Nous utilisons toujours le package Omnipay Wechat Pay pour nous aider La mise en œuvre du paiement WeChat est en fait similaire au précédent mode de paiement par code QR natif, sauf que l'interface utilisée est différente. Vous trouverez ci-dessous les bibliothèques utilisées dans le site Web WeChat que j'ai développé. Inutile de dire que les deux premiers sont évidemment la bibliothèque Omnipay utilisée pour le paiement WeChat. WordPress Dispatcher est un système de routeur WordPress utilisé pour implémenter des URL personnalisées et Valitron est principalement utilisé pour vérifier les données soumises par les utilisateurs.

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

Exécutez la commande composer install. Une fois l'installation terminée, introduisez le fichier à chargement automatique dans le thème ou le plug-in.

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

Implémentation frontale : configurez le SDK WeChat JS et implémentez le paiement WeChat

Le jssdk.php ici est fourni par le responsable WeChat et est utilisé pour initialiser le SDK WeChat JS Forfait signature disponible. Introduisez ce fichier sur la page où le paiement WeChat doit être implémenté, puis initialisez la classe JSSDK.

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

Initialisez le SDK WeChat JS, appelez le mode de paiement WeChat pour implémenter le paiement WeChat

Tout d'abord, assurez-vous que le fichier JavaScript du SDK WeChat JS est dans l'en-tête du page : jweixin-1.0 .0.js. Sur la base du $signPackage obtenu ci-dessus, nous avons effectué les opérations suivantes dans le code ci-dessous.

Utilisez wx.config pour initialiser js sdk et utilisez wx.ready pour détecter si js sdk est initialisé avec succès. Si l'initialisation réussit, nous pouvons utiliser l'interface fournie par WeChat js sdk pour fonctionner. Lorsque vous cliquez sur le bouton de paiement, une requête Ajax est envoyée au serveur pour obtenir la commande WeChat, puis wx.chooseWXPay est utilisé pour lancer le paiement WeChat, qui est l'interface contextuelle que nous voyons dans WeChat pour saisir le mot de passe WeChat.

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

La fenêtre de paiement clignote et disparaît dans les situations suivantes

Lorsque nous testons le paiement WeChat sur WeChat, nous constatons souvent que la fenêtre de paiement WeChat clignote et disparaît, vous. Je ne vois pas l'interface de saisie du mot de passe de paiement. Les raisons possibles sont les suivantes, veuillez vérifier attentivement.

jssdk n'est pas configuré. Vérifiez que les données renvoyées par wx.config et wx.readyAjax dans le code ci-dessus sont incorrectes. Vérifiez que les données de retour de la requête Ajax ont un paramètre de nom de domaine incorrect. Le nom de domaine de test est défini dans l'arrière-plan de gestion WeChat. Ajouté au nom de domaine sécurisé

Implémentation back-end : vérifier et envoyer les données de commande

L'implémentation back-end. est très simple, il s'agit de recevoir les données soumises par Ajax ci-dessus, puis de traiter WeChat Pay les données Json requises et d'enregistrer la commande dans la base de données du site pour des requêtes ultérieures et des rappels de notification ultérieurs.

// 获取微信支付网关的函数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 );

   },] );

Acceptez la notification de réussite du paiement WeChat pour terminer automatiquement la commande ou recharger automatiquement

Une fois le paiement terminé, WeChat renverra une notification de réussite du paiement à l'URL de notification que nous avons fournie. au Contenu restitué, effectuer des opérations telles que la finalisation automatique des commandes ou la recharge automatique. Il y a deux points à noter ici.

L'URL de notification doit être accessible. Si elle n'est pas accessible, WeChat n'enverra pas la notification. Il doit être dans le même répertoire que l'URL de paiement

Les données du SDK et de l'interface fournies par WeChat sont très non standard. Lors de son utilisation, vous devez faire attention à la majuscule dans le code. problème, contactez soigneusement l'équipe de développement fournie par WeChat. Selon la documentation, si le langage ou le cadre de développement que vous utilisez fournit des bibliothèques utilisées pour le développement de WeChat, il est recommandé d'utiliser ces bibliothèques directement pour le développement. Ces bibliothèques peuvent nous aider à contourner les différentes. les grandes et petites fosses que WeChat a creusées pour nous réduisent les difficultés de débogage et accélèrent le développement.

Pour plus d'articles techniques liés à WordPress, veuillez visiter la colonne tutoriel WordPress pour apprendre !

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!