微信掃碼支付，掃商戶二維碼後，輸入金額支付 php原始碼下載 類似閃惠、到店付功能實現教程和原始碼
阿新 • • 發佈：2019-02-14
現在市場上流行的微信掃商戶二維碼後，輸入金額支付。使用者和商家使用很方便，技術上怎麼實現的呢？
本文主要講原理和具體實現程式碼，介面請自己設計，微信官網已經提供資料,其中的程式碼稍做修改就可實現，但是沒有說清楚對於掃碼輸入金額支付具體怎麼做。
一、微信官網資料
業務流程場景展示
圖 輸入金額完成支付
圖 商戶二維碼-請掃碼體驗可以輸入金額，單位為分
URL+money.php 生成的URL用URL轉二維碼工具轉換成二維碼。
二、二維碼轉換工具
圖 二維碼轉換工具使用圖示
圖 輸入金額介面
圖 輸入支付密碼和支付成功介面
三、技術說明
開發流程
四、關鍵程式碼
index.php
<html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>微信支付樣例</title> <style type="text/css"> ul { margin-left:10px; margin-right:10px; margin-top:10px; padding: 0; } li { width: 32%; float: left; margin: 0px; margin-left:1%; padding: 0px; height: 100px; display: inline; line-height: 100px; color: #fff; font-size: x-large; word-break:break-all; word-wrap : break-word; margin-bottom: 5px; } a { -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; color:#fff; } a:link{ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; color:#fff; } a:visited{ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; color:#fff; } a:hover{ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; color:#fff; } a:active{ -webkit-tap-highlight-color: rgba(0,0,0,0); text-decoration:none; color:#fff; } </style> </head> <body> <div align="center"> <ul> <!--說明：http://paysdk.weixin.qq.com/example 換成你自己URL--> <li style="background-color:#FF7F24"><a href="http://paysdk.weixin.qq.com/example/jsapi.php">JSAPI支付</a></li> <li style="background-color:#FF7F24"><a href="http://paysdk.weixin.qq.com/example/money.php">掃商戶碼支付</a></li> <li style="background-color:#698B22"><a href="http://paysdk.weixin.qq.com/example/micropay.php">刷卡支付</a></li> <li style="background-color:#8B6914"><a href="http://paysdk.weixin.qq.com/example/native.php">掃碼支付</a></li> <li style="background-color:#CDCD00"><a href="http://paysdk.weixin.qq.com/example/orderquery.php">訂單查詢</a></li> <li style="background-color:#CD3278"><a href="http://paysdk.weixin.qq.com/example/refund.php">訂單退款</a></li> <li style="background-color:#848484"><a href="http://paysdk.weixin.qq.com/example/refundquery.php">退款查詢</a></li> <li style="background-color:#8EE5EE"><a href="http://paysdk.weixin.qq.com/example/download.php">下載訂單</a></li> </ul> </div> </body> </html>
主要功能程式碼
money.php
<?php
ini_set('date.timezone','Asia/Shanghai');
//error_reporting(E_ERROR);
require_once "../lib/WxPay.Api.php";
require_once "WxPay.JsApiPay.php";
require_once 'log.php';
//初始化日誌
$logHandler= new CLogFileHandler("../logs/".date('Y-m-d').'.log');
$log = Log::Init($logHandler, 15);
//列印輸出陣列資訊
function printf_info($data)
{
foreach($data as $key=>$value){
echo "<font color='#00ff55;'>$key</font> : $value <br/>";
}
}
//②、統一下單
$input = new WxPayUnifiedOrder();
if(isset($_REQUEST["money"]) && $_REQUEST["money"] != ""){
//①、獲取使用者openid
$tools = new JsApiPay();
$openId = $tools->GetOpenid();
$money = $_REQUEST["money"];
$input->SetBody("test");
$input->SetAttach("test");
$input->SetOut_trade_no(WxPayConfig::MCHID.date("YmdHis"));
$input->SetTotal_fee($money);
$input->SetTime_start(date("YmdHis"));
$input->SetTime_expire(date("YmdHis", time() + 600));
$input->SetGoods_tag("test");
$input->SetNotify_url("http://paysdk.weixin.qq.com/example/notify.php");
$input->SetTrade_type("JSAPI");
$input->SetOpenid($openId);
$order = WxPayApi::unifiedOrder($input);
// echo '<font color="#f00"><b>統一下單支付單資訊</b></font><br/>';
// printf_info($order);
$jsApiParameters = $tools->GetJsApiParameters($order);
//獲取共享收貨地址js函式引數
$editAddress = $tools->GetEditAddressParameters();
}
//③、在支援成功回撥通知中處理成功之後的事宜，見 notify.php
/**
* 注意：
* 1、當你的回撥地址不可訪問的時候，回撥通知會失敗，可以通過查詢訂單來確認支付是否成功
* 2、jsapi支付時需要填入使用者openid，WxPay.JsApiPay.php中有獲取openid流程 （文件可以參考微信公眾平臺“網頁授權介面”，
* 參考http://mp.weixin.qq.com/wiki/17/c0f37d5704f0b64713d5d2c37b468d75.html）
*/
?>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>微信支付樣例-支付</title>
<script type="text/javascript">
//呼叫微信JS api 支付
function jsApiCall()
{
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
<?php echo $jsApiParameters; ?>,
function(res){
WeixinJSBridge.log(res.err_msg);
alert(res.err_code+res.err_desc+res.err_msg);
}
);
}
function callpay()
{
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
}
</script>
<script type="text/javascript">
//獲取共享地址
function editAddress()
{
WeixinJSBridge.invoke(
'editAddress',
<?php echo $editAddress; ?>,
function(res){
var value1 = res.proviceFirstStageName;
var value2 = res.addressCitySecondStageName;
var value3 = res.addressCountiesThirdStageName;
var value4 = res.addressDetailInfo;
var tel = res.telNumber;
alert(value1 + value2 + value3 + value4 + ":" + tel);
}
);
}
window.onload = function(){
var src;
src = '<?=$money;?>';
if(src) {
document.getElementById("money").value = '<?=$money;?>';
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
}else{
jsApiCall();
}
}
};
</script>
</head>
<body>
<br/>
<form action="#" method="post">
<div style="margin-left:2%;color:#f00">微信支付公司 完整實現原始碼下載 實現程式碼，參考微信官網支付例項，適當修改，請大家開發時多參考官網例項，事半功倍。