本案例使用的支付接口是PayJs微信支付商戶,沒有商戶號能夠本身申請:https://payjs.cn/ref/DNXBJDjavascript
一、寫出進羣界面
二、對接PayJs的JSAPI支付接口
三、支付成功後跳轉進羣二維碼php
jiaqun-login.php
這個代碼主要是受權登陸,獲取用戶的openidcss
<!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> <?php header("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傳到支付訂單頁面html
<?php header("Content-type:text/html;charset=utf8"); $openid = $_GET["openid"]; //瀏覽器跳轉 echo "<script>location.href=\"你的域名/你的支付目錄/jiaqun-pay.php?openid=$openid\";</script>"; ?> <title>請稍候</title>
jiaqun-pay.php
這個主要是構建訂單發起請求參數,建立支付訂單java
<?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
支付接口的一些參數web
<?php $mchid = 'xxx'; // PAYJS 商戶號 $key = 'xxx'; // 通訊密鑰 ?>
style.css
樣式文件json
*{ 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; }
我這裏是沒有作訂單查詢的,真正的項目是要作異步訂單查詢才能夠。api
以上代碼直接能夠用了,修改商戶號就好了。瀏覽器
商戶號須要你開通PayJs才能夠獲取到。開通連接:https://payjs.cn/ref/DNXBJD微信
做者:TANKING
網站:https://www.likeyunba.com微信:face6009時間:2019-6-29