How to implement WeChat payment in WordPress

For calling WeChat payment, WeChat provides JS SDK to help us implement the function of calling WeChat payment in WeChat. The following are the specific implementation steps,

The first step is to install the packages required to implement WeChat payment

We still use the Omnipay Wechat Pay package to help us implement WeChat Payment is actually similar to the previous native scan code payment method, except that the interface used is different. The following is the library used in the WeChat website I developed. Needless to say, the first two are obviously the Omnipay library used for WeChat payment. WordPress Dispatcher is a WordPress Router system used to implement custom URLs. Valitron is mainly used to verify user submitted data.

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

Run the composer install command. After the installation is complete, introduce the auto-loading file into the theme or plug-in.

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

Front-end implementation: Configure WeChat JS SDK and implement WeChat payment

The jssdk.php here is provided by WeChat official and is used to initialize WeChat JS SDK Signature package available. Introduce this file to the page where WeChat payment needs to be implemented, and then initialize the JSSDK class.

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

Initialize WeChat JS sdk, call WeChat payment method to implement WeChat payment

First, make sure that the JavaScript file of WeChat JS SDK is in the head of the page: jweixin-1.0 .0.js. Based on the $signPackage obtained above, we completed the following operations in the code below.

Use wx.config to initialize js sdk and use wx.ready to detect whether js sdk is initialized successfully. If the initialization is successful, we can use the interface provided by WeChat js sdk to operate. When the payment button is clicked, an Ajax request is sent to the server to obtain the WeChat order, and then wx.chooseWXPay is used to initiate WeChat payment, which is the pop-up interface we see in WeChat for entering the WeChat password.

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

The payment window flashes and disappears in the following situations

When testing WeChat payment on WeChat, we often encounter the WeChat payment window that flashes and disappears , you cannot see the interface for entering the payment password. The possible reasons are as follows, please check carefully.

jssdk is not configured. Check that the data returned by wx.config and wx.readyAjax in the above code is incorrect. Check that the security domain name setting of the return data of the Ajax request is incorrect. Check whether the test domain name is set in the WeChat management background. Added to the secure domain name

Back-end implementation: verify and send order data

The back-end implementation is very simple, it is to receive the data submitted by Ajax above, and then process WeChat The Json data required for payment is stored in the database of the site for use in subsequent queries and notification callbacks.

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

   },] );

Accept WeChat payment success notification to automatically complete orders or automatically recharge

After the payment is completed, WeChat will return a payment success notification to the notification URL we provided. We can use the returned Content, perform operations such as automatically completing orders or automatically recharging. There are two points to note here.

The notification URL must be accessible. If it is not accessible, WeChat will not send notifications. It must be in the same directory as the payment URL

The SDK and interface data provided by WeChat official are very non-standard. When using it, you must pay attention to the capitalization in the code. If there is a problem, carefully contact the development provided by WeChat official According to the documentation, if the language or development framework you use provides libraries used for WeChat development, it is recommended to use these libraries directly for development. These libraries can help us bypass the various big and small pits WeChat dug for us and reduce debugging. difficulty and speed up development.

For more wordpress related technical articles, please visit the wordpress tutorial column to learn!

The above is the detailed content of How to implement WeChat payment in WordPress. For more information, please follow other related articles on the PHP Chinese website!