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

使用JSSDK实现在微信网页中调用微信支付的功能

作为一种移动支付方式，微信支付已经普及开来了，很有赶超支付宝的势头。不过微信支付提供的开发接口却和支付宝的接口相比，相差的却不是一点点，如果我们要开发的是一个微信网站，在桌面端进行微信支付的时候，返回一个二维码供微信扫描支付是不合适的。对于在微信里面调用微信支付，微信提供了JSSDK来帮助我们实现在微信里面调用微信支付的功能。下面是具体的实现步骤，是我从自己开发的一个微信网站中提取出来的代码，贴出来供有需要的朋友参考。

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

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

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

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

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

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

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

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

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

jQuery(document).ready(function($){

//配置jssdk
wx.config({
    debug: false,
    appId: '',
    timestamp: ,
    nonceStr: '',
    signature: '',
    jsApiList: ['chooseWXPay']
    //这里的jsApiList需要什么就填写什么
});

//一定要检查jssdk是否已经准备好了
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数据，同时保存订单到站点的数据库中，供后续查询和后

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。