微信支付有多种方式,包括公众号支付,扫码支付,刷卡支付,APP支付等。不同的支付方式适合不同的场景。
例如PC网站接入微信支付,就可以选择扫码支付,由网页上展示出一个支付二维码,由用户打开微信扫码后进行支付。
如果是在微信内置浏览器中打开网页并发起支付(例如微商城等),那么就可以选择公众号支付。
Ping++ 简介
Ping++ 是为移动端应用以及 PC 网页量身打造的下一代支付系统,通过一个 SDK 便可以同时支持移动端以及 PC 端网页的多种主流支付渠道,你只需要一次接入即可完成多个渠道的接入。 Ping++ SDK 包括 Client SDK 和 Server SDK 两部分,支持主流的七种后端开发语言,适配了 Android,iOS 和 HTML5 三种移动端平台以及 PC 端网页。
接入 Ping++ SDK 步骤
1.下载并配置服务端SDK
下载地址:https://www.pingxx.com/docs/downloads
例如php的SDK下载地址为:https://github.com/PingPlusPlus/pingpp-php
该PHP SDK需要PHP版本5.3及其以上。
下载后,在网站根目录新建weixin文件夹,将pingpp-php-master.zip解压到weixin文件夹中,例如解压到server目录下。如图所示:

可以使用 Composer 或直接手动引入。这里介绍手动引入的方式:
在weixin文件夹中新建一个server.php,内容如下:
<?php
require_once('server/init.php');
$amount = floatval($_REQUEST['amount']); //接收传递过来的金额
$openid = $_REQUEST['openid']; //接收传递过来的openid
$channel=$_REQUEST['channel']; //微信公众号支付
$appid = 'app_4af58G8a9G04Cy1u'; //ping++ app_id
$pingppKey='sk_test_jnL08KfDKKqD5avDSGPmrHiT'; //ping++ KEY
$orderNo=date('YmdHis').uniqid(); //订单号
\Pingpp\Pingpp::setApiKey($pingppKey);
$extra = array();
$amount = $amount * 100; //支付单位为分
switch ($channel) {
case 'alipay_pc_direct';
//支付宝PC
$extra = array(
'success_url' => 'http://www.baidu.com', //支付成功后回调地址
);
break;
case 'wx_pub_qr';
//微信扫码
$extra = array(
'product_id' => $orderNo,
);
break;
case 'wx_pub';
//微信公众号支付
$extra = array(
'open_id' => $openid,
);
break;
}
try {
$ch = \Pingpp\Charge::create(array(
'order_no' => $orderNo,
'amount' => $amount,//订单总金额, 人民币单位:分(如订单总金额为 1 元,此处请填 100)
'app' => array('id' => $appid),
'channel' => $channel,
'currency' => 'cny',
'extra' => $extra,
'client_ip' => $_SERVER['REMOTE_ADDR'],
'subject' => 'ping++充值测试',
'body' => '【ping++充值测试】'
));
if ($channel == 'wx_pub_qr') {
$ch = $ch->__toArray();
//mydump($ch);die;
if (isset($ch['credential'])) {
$weixin = $ch['credential']->__toArray();
$wx_pub_qr = $weixin['wx_pub_qr'];
$data['data'] = $wx_pub_qr;
}
}else{
echo $ch;die;
}
$data['channel'] = $channel;
echo json_encode($data);exit();
} catch (\Pingpp\Error\Base $e) {
// 捕获报错信息
if ($e->getHttpStatus() != NULL) {
header('Status: ' . $e->getHttpStatus());
echo $e->getHttpBody();
} else {
echo $e->getMessage();
}
}
测试服务端SDK是否配置成功: 在浏览器中访问服务端网址(https://www.xxx.com/weixin/server.php?amount=1&openid=123456&channel=wx_pub),如果页面显示以下内容,则说明配置成功:
2.下载并配置客户端SDK
下载地址:https://github.com/PingPlusPlus/pingpp-js
下载后,将pingpp-js-master.zip解压到weixin目录下的client文件夹。如图:

在wieixin目录下新建一个client.html,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>ping++支付测试</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="alert alert-success" role="alert">
<p>正式环境下确保可以获取到openid</p>
</div>
<table class="table table-bordered" style="width:800px;">
<tr>
<td width='100'>支付渠道</td>
<td>
<select name='channel' class="form-control" id='channel'>
<option value="alipay_pc_direct">支付宝付款PC</option>
<option value="wx_pub">微信公众号支付</option>
<option value="wx_pub_qr">微信扫码支付</option>
</select>
</td>
</tr>
<tr>
<td width='100'>支付金额</td>
<td>
<div class="input-group">
<input type="number" class="form-control" id='amount' aria-describedby="basic-addon2" value="1">
<span class="input-group-addon" id="basic-addon2">元</span>
</div></td>
</tr>
<tr>
<td width='100'>openid</td>
<td>
<input type="text" class="form-control" id='openid' value="123456" placeholder="公众号支付,必填openid">
</td>
</tr>
<tr id='pay-code' style="display:none">
<td colspan='2'>
微信扫描二维码支付:<br>
<img id='qrcode' src='' />
</td>
</tr>
<tr>
<td colspan='2'><input class="btn btn-primary" onclick="wap_pay()" type="button" value="支付"></td>
</tr>
</table>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="client/dist/pingpp.js" type="text/javascript"></script>
<script>
var YOUR_URL = 'server.php';
function wap_pay() {
if(YOUR_URL.length == 0){
alert("请填写正确的URL");
return;
}
var amount = $("#amount").val();
var openid = $("#openid").val();
var channel = $("#channel").val();
$.ajax({
type: "POST",
url: YOUR_URL,
data: {channel:channel,amount:amount,openid:openid},
dataType: "json",
success: function(data){
if(data.channel=='wx_pub_qr'){
var qrcode = "qrcode.php?url="+data.data;
$("#qrcode").attr('src',qrcode);
$("#pay-code").show();
}else{
pingpp.createPayment(data, function(result, err) {
if(result=='fail'){
alert(err.msg+' : '+err.extra);
}
});
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
var json = eval('(' + XMLHttpRequest.responseText + ')');
alert(json.error.type+' : '+json.error.message);
}
});
}
</script>
</body>
</html>
测试客户端: 在地址栏访问client.html,选择“公众号支付”,点击支付,弹出模拟支付,则表示配置成功。需要注意的是,在正式环境下,需要获取真实的openid才能使用,关于如何获取openid,这里不作说明。
3.配置服务端Webhooks
这一步主要用于,在用户支付成功后,将支付结果通知给指定的服务器,完成充值、购买等业务逻辑。
需要注意的是,在正式环境下,需要获取真实的openid才能使用,关于如何获取openid,这里不作说明。