文章目录

支付宝支付接口和微信支付接口完整PHP实例

此文使用的是可以选择支付宝或是微信支付的实例。

如图,选项卡切换不同支付方式。

支付宝支付接口和微信支付接口完整PHP实例支付宝支付接口和微信支付接口完整PHP实例

其实支付宝的没什么难度,只要有了SDK就可以了,这里不详说。

我们说说微信支付的。

注意事项:

1、公众号得获得微信支付接口授权。

2、需在公众号后台“公众号设置”-“功能设置”里面加设置“业务域名”、“JS接口安全域名”

2、需得在微信支付商户平台设置相关信息

PC端微信支付,肯定是用户使用手机扫描二维码,所以我们要使用“Native支付”。

请先进入【微信支付】普通商户接入文档页面,进入“Native支付”页面,左侧有详细的说明,点击“SDK与DEMO下载”下载对应的SDK即可。

需要注意的是微信支付WIDout_trade_no_wx值一旦使用过就不能再用了,否则获取不到二维码。

关资源

微信支付商户平台:https://pay.weixin.qq.com/

【微信支付】普通商户接入文档:https://pay.weixin.qq.com/wiki/doc/api/index.html

下面是完整实例代码(含支付宝和微信)

html代码<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
*{font-size: 12px;font-family:"Microsoft yahei";-webkit-text-size-adjust:none;margin: 0px; padding:0; }
html,body{margin: 0px; padding:0px; margin-top:0px;}
img{ border:0px;}
a {blr:expression(this.onFocus=this.blur());outline: none;}
A:link{color: #000000;text-decoration: none;}
A:visited{color: #000000;text-decoration: none;}
A:hover{color: #CA0809;text-decoration: none;}
A:active{color: #000000;text-decoration: none;}
#otherbox{margin: auto;width: 100%; text-align:center;overflow: hidden;}
#otherbox ul{width:100%;float: left;margin: 0px;padding: 0px; list-style: none;}
#otherbox li{float: left;}
#mainbox{margin: auto;width: 1200px;overflow: hidden;}
#mainbox ul{width:100%;float: left;margin: 0px;padding: 0px; list-style: none;}
#mainbox li{float: left;}
p,ul,ol,li,form,dd,dl,dt {margin:0;padding:0;list-style:none;}
.paytypetxt{width:100%; text-align:center;color:#333; font-size:14px; font-weight:bold; margin-top:10px; display:inline-block;}
.paytypetxt b{font-size:26px;}
.paybox{width:99.77%; display:inline-block;margin-top:12px;}
.paybox dt{height:46px; line-height:46px;position:relative;}
.paybox dt span{width:236px; height:46px; text-align:center; display:inline-block; font-size:18px; cursor:pointer; color:#333;border:1px #a1a1a1 solid; border-top-left-radius:5px; border-top-right-radius:5px; background:#e4e4e4;border-bottom:none}
.paybox dt span.hover,.paybox dt span:hover{ background:#fff; color:#333;}
.paybox dd{width:96%; padding:2% 2%;margin:0; border:1px #a1a1a1 solid; }

.paybox .payicobox{display:inline-block; border:2px #01aaed solid; border-radius:5px; margin:0 5px;}
.paybox .alipayend{width:300px; height:125px; background:url(pay_zfb.png) no-repeat; display:inline-block; border:none; cursor:pointer; margin:10px 10px;}
.paybox .wx{display:inline-block; display:none;}
.paybox .wxpayend{width:141px; height:59px; margin:10px 10px; float:left;}
.paybox .wx i{float:left;}
.paybox .wx i span{width:260px; height:86px; display:inline-block; background:url(pay_wx_notice.png) no-repeat;}
.paybox .wx i img{display:block;}
.paybox .wx i img.pay_wx_notice{width:143px; height:47px; margin:0 auto;}
.paybox .wx .notice{ margin-top:140px; display:inline-block;color:#333;font-size:12px;}
.paybox .success{width:100%; text-align:center; font-size:22px; color:red;}
.red{color:red;}
.none{display:none;}
</style>
</head>

<body>
<form name="form_payment" id="form_payment" method="post" target="_blank">
<div class="paytypetxt">费用:<b class="red">9980.00</b>元</div>
<div class="paybox">
	<dl>
		<dt class="top">
			<span data-id="1" class="hover">支付宝支付</span>
			<span data-id="2">微信支付</span>
		</dt>
		<dd data-id="1" class="zfb">
			<input type="button" name="paybtn" id="paybtn" class="alipayend" value="" />
		</dd>
		<dd data-id="2" class="wx">
			<img src="pay_wx.png" class="wxpayend" /><i></i><span class="notice">如没有出现付款二维码,请稍候或者重新刷新本页面。</span>
		</dd>
	</dl>
	<div class="success none">订单支付成功</div>
</div>
<input type="hidden" name="WIDout_trade_no" value="201909293268" />
<input type="hidden" name="WIDout_trade_no_wx" id="WIDout_trade_no_wx" value="201809290928384627" />
<input type="hidden" name="WIDsubject" value="巴厘岛十日游" />
<input type="hidden" name="WIDtotal_fee" value="9980.00" />
<input type="hidden" name="WIDbody" value="巴厘岛十日游" />
<input type="hidden" name="WIDshow_url" value="http://www.santii.com" />
<input type="hidden" name="orderid" id="orderid" value="22" />
<input type="hidden" name="status" id="status" value="1" />
</form>
<script>
$(document).on("click",".paybox .top span",function(){
	var dataid=$(this).attr("data-id");
	$(".paybox").find("dd").hide();
	$(".paybox dt").find("span").removeClass();
	$(this).addClass("hover");
	$(".paybox dd").each(function(){
		if ($(this).attr("data-id")==dataid){
			$(this).css("display","inline-block");
		}
	});
});
var setinterval;
$(document).ready(function(e) {
	var url="wxpayapi/example/native.php";
	var params = $("#form_payment").serialize();
	$.ajax({
		url:url,
		type:"post",
		data:params,
		dataType:"JSON",
		success: function(data){
			$(".paybox .wx i").html(data.qrcode+"<img src='pay_wx_notice.png' class='pay_wx_notice' />");
		},
		error: function(data,status){
			console.log(JSON.stringify(data));
		}
	});
	setinterval=setInterval(function(){checkwxpay()}, 5000);//这里是每隔五秒检测微信是否付款成功
});
function checkwxpay(){
	var url = "wxpayapi/example/orderquery.php";
	var out_trade_no = $("#WIDout_trade_no_wx").val();
	var params = {'out_trade_no':out_trade_no};
	$.post(url, params, function(data){
		data = JSON.parse(data);
		if(data.trade_state == "SUCCESS"){
			$(".paybox dl").fadeOut();
			$(".paybox .success").fadeIn();
			clearInterval(setinterval);
		}
	});
}
$(document).on("click","#paybtn",function(){
    var url='alipayapi/alipayapi.php';
	$('#form_payment').attr("action",url).submit();
	return false;
});
</script>
</body>
</html>

在demo的native.php页面设置好Notify_url,结尾处数组里面的qrcode内容可以根据自己需求改。

支付宝支付接口和微信支付接口完整PHP实例

js代码中的checkwxpay()函数,是将微信订单号WIDout_trade_no_wx传到orderquery.php(demo里面有)而面检测是否支付成功。

以上就是支付宝支付接口和微信支付接口完整PHP实例的完整代码,如果有什么问题可以在留言中提出来。

本文网址:http://www.santii.com/article/234.html

数据更新时间:2019-12-13