使用ping++接入微信扫码支付及微信公众号支付

微信支付有多种方式,包括公众号支付,扫码支付,刷卡支付,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

这一步主要用于,在用户支付成功后,将支付结果通知给指定的服务器,完成充值、购买等业务逻辑。

 

发表评论

邮箱地址不会被公开。 必填项已用*标注