WordPress で WeChat 決済を実装する方法

WeChat 支払いを呼び出すために、WeChat では WeChat で WeChat 支払いを呼び出す機能を実装するのに役立つ JS SDK を提供しています。具体的な実装手順は次のとおりです。

最初の手順は、WeChat 支払いの実装に必要なパッケージをインストールすることです。

当社では、引き続き Omnipay Wechat Pay パッケージを使用して支援しています。 WeChat Payment の実装は、使用されるインターフェイスが異なることを除いて、実際には以前のネイティブ スキャン コード支払い方法と似ています。以下は私が開発した WeChat Web サイトで使用されているライブラリです。言うまでもなく、最初の 2 つは明らかに WeChat 支払いに使用される Omnipay ライブラリです。WordPress Dispatcher はカスタム URL の実装に使用される WordPress Router システムです。Valitron は主にユーザーが送信したデータを検証するために使用されます。

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

composer install コマンドを実行します。インストールが完了したら、自動読み込みファイルをテーマまたはプラグインに導入します。

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

フロントエンド実装: WeChat JS SDK の構成と WeChat 支払いの実装

ここでの jssdk.php は WeChat 公式によって提供され、WeChat JS SDK の初期化に使用されます。署名パッケージをご利用いただけます。 WeChat 決済を実装する必要があるページにこのファイルを導入し、JSSDK クラスを初期化します。

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

WeChat JS SDK を初期化し、WeChat 支払いメソッドを呼び出して WeChat 支払いを実装します

まず、WeChat JS SDK の JavaScript ファイルが先頭にあることを確認します。ページ: jweixin-1.0 .0.js。上記で取得した $signPackage に基づいて、以下のコードで次の操作を完了しました。

wx.config を使用して js sdk を初期化し、wx.ready を使用して js sdk が正常に初期化されたかどうかを検出します。初期化が成功すると、WeChat js sdk が提供するインターフェースを使用して動作できます。支払いボタンをクリックすると、WeChat 注文を取得するために Ajax リクエストがサーバーに送信され、その後、wx.chooseWXPay を使用して WeChat 支払いが開始されます。これは、WeChat パスワードを入力するために 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;
      });
   });});

次の状況で支払いウィンドウが点滅したり消えたりします

WeChat で WeChat 支払いをテストすると、WeChat 支払いウィンドウが点滅したり消えたりすることがよくあります。支払いパスワードを入力する画面をご覧ください。以下の理由が考えられますので、よくご確認ください。

jssdk が設定されていません。上記コードの wx.config および wx.readyAjax によって返されるデータが間違っていることを確認してください。Ajax リクエストの返されるデータのセキュリティ ドメイン名の設定が間違っていることを確認してください。テスト ドメイン名が WeChat 管理バックグラウンドで設定されているかどうか 安全なドメイン名に追加されました

バックエンドの実装: 注文データの検証と送信

バックエンドの実装:最終的な実装は非常に簡単で、上記の Ajax によって送信されたデータを受信し、WeChat を処理します。支払いに必要な Json データは、後続のクエリや通知コールバックで使用するためにサイトのデータベースに保存されます。

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

   },] );

WeChat 支払い成功通知を受け入れて注文を自動的に完了するか、自動的にリチャージしてください

支払いが完了すると、WeChat は指定した通知 URL に支払い成功通知を返します。コンテンツでは、注文を自動的に完了したり、自動的にチャージしたりするなどの操作を実行します。ここで注意すべき点が 2 つあります。

通知 URL はアクセス可能である必要があります。アクセスできない場合、WeChat は通知を送信しません。支払い URL と同じディレクトリにある必要があります。

WeChat 公式が提供する SDK とインターフェース データは非常に非標準的なものです。使用するときは、コード内の大文字と小文字に注意する必要があります。ドキュメントによると、使用する言語または開発フレームワークが WeChat 開発に使用するライブラリを提供している場合は、これらのライブラリを直接開発に使用することをお勧めします。 WeChat が大小さまざまな穴を掘ってくれたので、デバッグの難易度が下がり、開発がスピードアップしました。

WordPress 関連の技術記事をさらに詳しく知りたい場合は、wordpress チュートリアル 列にアクセスして学習してください。

以上がWordPress で WeChat 決済を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。