使用 Omnipay Wechatpay 在 WordPress 中增加微信支付 - JS SDK 公众号支付方法

微信作为一种移动支付方式，已经普及开来了，很有赶超支付宝的势头。不过微信支付提供的开发接口却和支付宝的接口相比，相差的却不是一点点，我在本站之前的文章使用 Omnipay Wechatpay 在 WordPress 中增加微信支付-原生二维码支付方法介绍了使用 Omnipay Wechat Pay 开发原生二维码支付的方法，这种方法主要在桌面端进行微信支付的时候，返回一个二维码供微信扫描支付。如果我们要开发的是一个微信网站，这种方法显然是不合适的。对于在微信里面调用微信支付，微信提供了 JS SDK 来帮助我们实现在微信里面调用微信支付的功能。下面是具体的实现步骤，是我从自己开发的一个微信网站中提取出来的代码，贴出来供有需要的朋友参考。

第一步、安装实现微信支付所需的包

我们依然使用 Omnipay Wechat Pay 这个包来帮助我们实现微信支付，其实和之前的原生扫码支付方法是类似的，只不过使用的接口不同罢了。下面是我开发的微信网站中使用的库。其中前两个不用说了，很明显是微信支付所用的 Omnipay 库，Wordpress Dispatcher 是一个 WordPress Router 系统，用来实现自定义 URL，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' );

前端实现：配置微信 JS SDK，并实现微信支付

这里的 jssdk.php 是微信官方提供的，用来实现为初始化微信 JS SDK 提供签名包。在需要实现微信支付的页面引入这个文件，然后初始化 JSSDK 类即可。

require_once( get_template_directory() . '/inc/jssdk.php' );

$jssdk       = new JSSDK( "xxxxx", "xxxxxxxxxxxxxxxx" );
$signPackage = $jssdk->GetSignPackage();

初始化微信 JS sdk, 调用微信支付方法实现微信支付

首先、确保在页面的 head 因为了微信 JS SDK 的 JavaScript 文件：jweixin-1.0.0.js。根据上面获取的 $signPackage，我们在下面代码中完成了以下几个操作。

使用 wx.config 初始化 js sdk
使用 wx.ready 检测 js sdk 是否初始化成功，如果初始化成功，我们就可以使用微信 js sdk 提供的接口进行操作了。
点击支付按钮时，发送一个 Ajax 请求到服务器，获取微信订单，然后使用 wx.chooseWXPay 发起微信支付，就是我们在微信里面看到的弹出输入微信密码的界面。

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

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

});

支付窗口闪一下消失有以下几种情况

在微信上测试微信支付的时候，经常会遇到微信支付窗口闪一下就消失了，看不到输入支付密码的界面，可能的原因有以下几点，仔细检查一下。

jssdk 没有配置，检查上面代码中的 wx.config 和 wx.ready
Ajax 返回的数据有错误，检查 Ajax 请求的返回数据
安全域名设置错误，检查在微信管理后台中，是否把测试域名加入到了安全域名中

后端实现：验证并发送订单数据

后端实现很简单，就是接收上面 Ajax 提交过来的数据，然后处理微信支付需要的 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 );

   },

] );

接受微信支付成功通知，实现自动完成订单或自动充值

支付完成后，微信会返回一个支付成功的通知到我们提供的通知 URL，我们可以根据返回的内容，进行自动完成订单或者自动充值等操作。这里有两点需要注意。

通知 URL 一定要能访问，如果不能访问，微信不会发送通知。
要和支付 URL 在一个目录下

/**
 * 处理微信支付返回信息
 */
new Dispatch( [

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

      $gateway = get_wechat_gateway();
      $response = $gateway->completePurchase( ['request_params' => file_get_contents( 'php://input' ),] )->send();

      if ( $response->isPaid() ) {
         // 这里获取的 $data 是一个数组，数组里面的数据就是微信官方返回的数据。
         $data = $response->getRequestData();
         // 在这里我们可以根据微信返回的订单号，获取站点的订单数据，然后对订单进行操作。
      } else {
         echo '支付失败';
      }
   },

] );

微信官方提供的 SDK 和接口数据非常不规范，在使用的时候一定要代码中的注意大小写，出现了问题，仔细和微信官方提供的开发文档相对照，如果你使用的语言或开发框架提供了微信开发所用到库，建议直接使用这些库进行开发，这些库可以帮助我们绕过微信为我们挖下的各种大坑小坑，减少调试难度、加快开发速度。

WordPress智库

使用 Omnipay Wechatpay 在 WordPress 中增加微信支付 – JS SDK 公众号支付方法

第一步、安装实现微信支付所需的包

前端实现：配置微信 JS SDK，并实现微信支付

初始化微信 JS sdk, 调用微信支付方法实现微信支付

支付窗口闪一下消失有以下几种情况

后端实现：验证并发送订单数据

接受微信支付成功通知，实现自动完成订单或自动充值

我们提供 WordPress主题和插件定制开发服务

发表回复取消回复

第一步、安装实现微信支付所需的包

前端实现：配置微信 JS SDK，并实现微信支付

初始化微信 JS sdk, 调用微信支付方法实现微信支付

支付窗口闪一下消失有以下几种情况

后端实现：验证并发送订单数据

接受微信支付成功通知，实现自动完成订单或自动充值

我们提供 WordPress主题和插件定制开发服务

发表回复 取消回复

发表回复取消回复