最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)

来源:http://www.erdangjiade.com/php/2475.html 沐浴春风 2016-08-06 07:43浏览(20573)

最近项目里用到Dcloud、官网上给的Demo是各种坑啊,于是自己整理了mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)希望用到的同学沙走些弯路。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。 在线 充值

Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)
分类:PHP > 插件 难易:高级
查看演示 下载资源:

加我微信,拉你进VIP群学习:

下载资源 下载积分: 1200 积分

1.先上图片,由于mui自己集成了支付宝,所以不需要配置sdk和获取appid,微信配置有些小细节,不注意就会出错,在这里微信支付只能调用一次,详情看下去在特别注意里

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>支付</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/mui.min.js"></script>
		<style type="text/css">
			.top { 
                margin-top: 40px; 
            } 
            .weixin { 
                width: 200px;        
                height: 50px;  
                margin-left: 50px; 
                background: url(../images/icon-weixin.png);    
            } 
            .zhifubao { 
                width: 200px; 
                height: 50px; 
             
               margin-left: 50px; 
                background: url(../images/alipay.jpg);   
            } 

			#jine{
				-webkit-user-select:text;
				text-align:right;
				padding:0 1em;
				border: 0px;
				border-bottom:1px solid #ECB100;
				border-radius: 0;
				font-size:16px;
				width:30%;
				outline:none;
				text-align:center;
			}
			
		</style>
	</head>
	<body>
		 <hrader class="mui-bar mui-bar-nav">
		 	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		 	<h1 class="mui-title">第三方支付</h1>
		 </hrader>
         
         <div class="mui-content">
         	 
         	 
				捐赠金额:<input id="jine" type="number" value="1" /> 元
			
         	 
                <div class="top" id="testLogin" >
                	<input type="button" class="weixin" id="weixin1" value="微信支付" />
                	<input type="button" class="zhifubao" id="zhifubao" value="支付宝支付" />
                	
                </div>

                 

         </div>
       	<script>
       		var wxChannel = null; // 微信支付 
	        var aliChannel = null; // 支付宝支付 
	        var channel = null;   //支付通道
	        mui.init({ 
	            swipeBack:true //启用右滑关闭功能 
	        }); 
			
			 mui.plusReady(function() {   
            // 获取支付通道 
                plus.payment.getChannels(function(channels){ 
                for (var i in channels) {
						if (channels[i].id == "wxpay") {
							 wxChannel=channels[i]; 
						}else{
							aliChannel=channels[i]; 
						}
					}	
                },function(e){ 
                 alert("获取支付通道失败:"+e.message); 
                }); 
        }) 
 
        document.getElementById('weixin1').addEventListener('tap',function() { 
            console.log("微信"); 
            pay('wxpay'); 
        }) 
        document.getElementById('zhifubao').addEventListener('tap',function() { 
            console.log("zhifubao"); 
            pay('alipay');  
        }) 
 
		var ALIPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/alipay.php?total='; 
        var WXPAYSERVER='http://demo.dcloud.net.cn/helloh5/payment/wxpay.php?total='; 
       
        // 2. 发起支付请求 
        function pay(id){ 
                // 从服务器请求支付订单 
                var PAYSERVER=''; 
                if(id=='alipay'){ 
                PAYSERVER=ALIPAYSERVER; 
                channel = aliChannel; 
            }else if(id=='wxpay'){ 
                    PAYSERVER=WXPAYSERVER; 
                    channel = wxChannel; 
                }else{ 
                    plus.nativeUI.alert("不支持此支付通道!",null,"捐赠"); 
                    return; 
             } 
                var xhr=new XMLHttpRequest(); 
                 var amount = document.getElementById('jine').value;
               
                xhr.onreadystatechange=function(){ 
                    switch(xhr.readyState){ 
                        case 4: 
                        if(xhr.status==200){ 
                            plus.payment.request(channel,xhr.responseText,function(result){ 
                                plus.nativeUI.alert("支付成功!",function(){ 
                                back(); 
                            }); 
                            },function(error){ 
                                plus.nativeUI.alert("支付失败:" + error.code); 
                            }); 
                        }else{ 
                            alert("获取订单信息失败!"); 
                        } 
                        break; 
                    default: 
                    break; 
                } 
         } 
            xhr.open('GET',PAYSERVER+amount); 
            xhr.send(); 
           
    } 
	
       	</script>  
	 <script type="text/javascript" src="js/immersed.js" ></script>
	</body>
</html>

3.重点看这里关于配置和质疑问题

如下图

点击manifest.json文件的“代码视图”,在permissions节点下添加Payment节点:

如下图

在plus -> distribute -> plugins 节点下添加payment节点:

如下图

4.特别注意

1.由于mui集成了支付宝插件,所以支付宝支付不需要配置就可以,

2,。注意微信weixin节点下配置微信支付相关信息

appid值为在微信开放平台申请应用的AppID值。(微信开放平台不是微信公众号平台申请的appid)

因为我在微信公众号申请的也不知到什么原因只成功调取一次,其余失败。

5.由于项目需要我会等后台完善后,在总结一份
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/php/2475.html
评论29
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 28楼
    03-31 22:49
    lizhii
    后台的地址改了 就会出现支付失败
  • 头像 27楼
    03-06 17:48
    我想我是哈哈
    这个怎么用。
  • 头像 26楼
    07-05 13:24
    奶茶不好喝
    后台的地址改了 就会出现支付失败 -100
    1
    xzz19930323

    你的弄好没?我也碰到这问题了

  • 头像 25楼
    06-26 17:31
    biubiu08
    微信支付没问题把?
  • 头像 24楼
    06-22 15:45
    niuanke
    谢谢楼主,感觉对我还是非常有用的,回去好好学下
  • 头像 23楼
    04-28 18:37
    yinuo
    好好学下,谢谢楼主
  • 头像 22楼
    04-12 11:52
    ITwzw
    demo可用吗?测试过吗?
  • 头像 21楼
    03-26 20:02
    wjs123
    感觉挺高端
  • 头像 20楼
    02-28 15:43
    wancongmin
    感觉很不错的样子,谢谢楼主的分享
  • 头像 19楼
    01-17 10:41
    jones
    这个demo我支付宝支付付给了 他们公司 怎么把他们公司还改成其他的公司或者个人啊
    1
    箫声灬巷陌

    你测试成功了吗?

1 2