开发了一个微信群付费进群功能 | 乐趣区

准备

本案例使用的支付接口是PayJs微信支付商户，没有商户号可以自己申请:https://payjs.cn/ref/DNXBJD

演示

1分钱体验

流程

1、写出进群界面
2、对接PayJs的JSAPI支付接口
3、支付成功后跳转进群二维码

代码

jiaqun-login.php
这个代码主要是授权登录，获取用户的openid

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta name="format-detection" content="telephone=no">    <link rel="stylesheet" href="https://weui.io/weui.css"/>    <link rel="stylesheet" href="https://weui.io/example.css"/>    <title>正在登录</title></head><body></body></html><?phpheader("Content-type:text/html;charset=utf8");//发送请求$url = 'https://payjs.cn/api/openid?callback_url=你的域名/你的支付目录/jiaqun-getopenid.php';function post($url) {        $ch = curl_init();        curl_setopt($ch, CURLOPT_URL, $url);        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);        curl_setopt($ch, CURLOPT_POST, 1);        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);        $rst = curl_exec($ch);        curl_close($ch);        return $rst;}//发送$result = post($url);//返回接口的数据echo "<p style=\"display:none;\">".$result."</p>";?>

jiaqun-getopenid.php
这个主要是把获取到的openid传到支付订单页面

<?phpheader("Content-type:text/html;charset=utf8");$openid = $_GET["openid"];//浏览器跳转echo "<script>location.href=\"你的域名/你的支付目录/jiaqun-pay.php?openid=$openid\";</script>";?><title>请稍候</title>

jiaqun-pay.php
这个主要是构建订单发起请求参数，创建支付订单

<?php//引入配置文件require_once("config.php");//获得OPENID$openid = $_GET["openid"];//定义金额$total_fee = 1;$length = strlen($total_fee);if ($length == 1) {    $money = "0.0".$total_fee;}else if ($length == 2) {    $money = "0.".substr($total_fee, 0,1).substr($total_fee, 1,1);}else if ($length == 3) {    $money = substr($total_fee, 0,1).".".substr($total_fee, 1,1).substr($total_fee, 2,3);}else if ($length == 4) {    $money = substr($total_fee, 0,1).substr($total_fee, 1,1).".".substr($total_fee, 2,3).substr($total_fee, 4,4);}else if ($length == 5) {    $money = substr($total_fee, 0,1).substr($total_fee, 1,1).substr($total_fee, 2,1).".".substr($total_fee, 3,2);}// 构造订单参数$data = [    'mchid'        => $mchid,    'body'         => '付费进群',    'total_fee'    => $total_fee,    'openid'       => $openid,    'out_trade_no' => 'likeyunkeji.' . time(),];// 添加数据签名$data['sign'] = sign($data, $key);//发送请求$url = 'https://payjs.cn/api/jsapi?' . http_build_query($data);function post($data, $url) {        $ch = curl_init();        curl_setopt($ch, CURLOPT_URL, $url);        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);        curl_setopt($ch, CURLOPT_POST, 1);        curl_setopt($ch, CURLOPT_POSTFIELDS, $data);        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);        $rst = curl_exec($ch);        curl_close($ch);        return $rst;}//发送$result = post($data, $url);//返回接口的数据$results = json_decode($result);//返回字符串$appId = $results->jsapi->appId;$timeStamp = $results->jsapi->timeStamp;$nonceStr = $results->jsapi->nonceStr;$package = $results->jsapi->package;$signType = $results->jsapi->signType;$paySign = $results->jsapi->paySign;// 获取签名function sign($data, $key){    array_filter($data);    ksort($data);    return strtoupper(md5(urldecode(http_build_query($data) . '&key=' . $key)));}?><html><head>    <title>群聊邀请</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <meta name="format-detection" content="telephone=no">    <meta name="format-detection" content="email=no">    <meta name="apple-mobile-web-app-capable" content="yes">    <link href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css" rel="stylesheet">    <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>    <link rel="stylesheet" type="text/css" href="css/style.css"></head><body>    <!-- 顶部区域 -->    <div id="logo_con">        <div class="logoimg"><img src="css/qunlogo.png"/></div>        <p class="qunname">里客云科技</p>        <p class="qunrenshu">100人</p>    </div>    <!-- 空白部分 -->    <p id="yqjrql">TANKING邀请你加入群聊</p>    <!-- 支付按钮 -->    <a href="javascript:;" id="jrql">加入群聊</a>    <!-- 进群说明 -->    <p id="jqsm">1. 该群聊人数较多，为减少新消息给你带来的打扰，建议谨慎加入。    <p id="jqsm">2. 你需要实名验证后才能接受邀请，可绑定银行卡进行验证。</p></body><script>    if (typeof WeixinJSBridge == "undefined") {        if (document.addEventListener) {            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);        } else if (document.attachEvent) {            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);        }    }    function onBridgeReady() {        WeixinJSBridge.call('hideOptionMenu');    }    $('#jrql').on('click', function () {        WeixinJSBridge.invoke(            //构造发起支付参数，请在接口服务端生成                'getBrandWCPayRequest', {                    "appId": "<?php echo $appId ?>",                    "timeStamp": "<?php echo $timeStamp ?>",                    "nonceStr": "<?php echo $nonceStr ?>",                    "package": "<?php echo $package ?>",                    "signType": "<?php echo $signType ?>",                    "paySign": "<?php echo $paySign ?>"                },                function (res) {                    if (res.err_msg == "get_brand_wcpay_request:ok") {                        // 支付成功后跳转页面                        location.href="https://www.liketube.cn/payjs/css/wxqunqrcode.jpg";                    }                }        );    });</script></html>

config.php
支付接口的一些参数

<?php$mchid = 'xxx'; // PAYJS 商户号$key   = 'xxx'; // 通信密钥?>

style.css
样式文件

*{    margin:0;    padding: 0;    font-family: -apple-system-font,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei",Arial,sans-serif}body{    background: #f4f4f6;}#logo_con{    width: 100%;    height: 190px;    background: #fff;    border-bottom: 1px solid #e4e2e2;    overflow: hidden;}#logo_con .logoimg{    width: 65px;    height: 65px;    margin:35px auto 15px;    border-radius: 3px;    border:2px solid #e0e0e0;    box-sizing: border-box;}#logo_con .logoimg img{    width: 61px;    height: 61px;}#logo_con .qunname{    text-align: center;    font-size: 18px;    color: #3a3a3a;    margin-top: 5px;}#logo_con .qunrenshu{    text-align: center;    font-size: 16px;    color: #8d8d8d;    margin-top: 5px;}#yqjrql{    text-align: center;    margin-top: 38px;    color: #4e4d52;    font-size: 19px;}#jrql{    display: block;    width: 200px;    height: 43px;    color: #fff;    background: #44b549;    border-radius: 3px;    margin:30px auto 45px;    text-decoration: none;    line-height: 43px;    text-align: center;    font-size: 18px;    -webkit-tap-highlight-color:rgba(255,0,0,0);}#jqsm{    width: 89%;    color: #b1b1b3;    font-size: 16px;    margin:8px auto 0px;}

我这里是没有做订单查询的，真正的项目是要做异步订单查询才可以。

以上代码直接可以用了，修改商户号就行了。

商户号需要你开通PayJs才可以获取到。开通链接：https://payjs.cn/ref/DNXBJD

作者：TANKING
网站：https://www.likeyunba.com
微信：face6009
时间：2019-6-29