对于调用微信支付,微信提供了 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.readyAjax 返回的数据有错误,检查 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在一个目录下
微信官方提供的 SDK 和接口数据非常不规范,在使用的时候一定要代码中的注意大小写,出现了问题,仔细和微信官方提供的开发文档相对照,如果你使用的语言或开发框架提供了微信开发所用到库,建议直接使用这些库进行开发,这些库可以帮助我们绕过微信为我们挖下的各种大坑小坑,减少调试难度、加快开发速度。