头像

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

来源:http://www.erdangjiade.com/php/2475.html 二当家的 2016-08-06 07:43浏览(6235)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,9.9元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

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

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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并保留原文链接:http://www.erdangjiade.com/php/2475.html
评论15
头像

友情提示:垃圾评论一律封号...

  • 头像 14楼
    前天 09-19 10:29
    小蛮子921
    下载和不下载,有啥区别,你代码都贴出来了。。。
  • 头像 13楼
    09-09 11:00
    bo5211ok
    很好,相当实用!!
  • 头像 12楼
    08-22 08:11
    昵称
    不错,很实用。
  • 头像 11楼
    08-19 00:43
    2233725757@qq.com
    你好 支付宝是否有服务端的代码? 谢谢你
  • 头像 10楼
    08-18 12:57
    哪来那么多积分
    if(xhr.status==200){ status返回回来等于 0 是哪里出错了啊
  • 头像 9楼
    08-16 11:42
    wuyujia
    你好 这个在哪里修改支付的收款账号啊, 谢谢你
  • 头像 8楼
    08-03 09:20
    411982247
    请问有C#后端版本的么?
  • 头像 7楼
    07-10 17:58
    gxcnvip
    支付宝是否有服务端的代码?
  • 头像 6楼
    07-05 15:34
    我的用户名老李
    请问这个是带后端的么?老板
  • 头像 5楼
    06-08 13:37
    wxxxxx
    感觉没什么用啊
    1
    二当家的

    亲测,是好的,你是不是没有修改配制啊。

    2
    wxxxxx

    回复 二当家的 不好意思,是我昨天代码有点问题,今天测试了一下支付宝没问题

    3
    wxxxxx

    回复 wxxxxx 你知道哪里可以找到后台文件,我们后台写的文件用来后总是获取不到订单信息

    4
    wxxxxx

    回复 wxxxxx 你们后台是在github下的代码吗?我这边下的代码改完参数后总是提示创建交易异常。但是用官方提供的php文件可以给成功支付。楼主知道是什么原因吗

1 2