8***@qq.com
8***@qq.com
  • 发布:2017-06-04 21:23
  • 更新:2020-04-24 23:42
  • 阅读:15198

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

分类:MUI

走了好多坑,终于解决了支付宝支付的问题,下面分享给大家:
演示下载你可以参考这里:(http://www.erdangjiade.com/php/2475.html)
演示下载你可以参考这里:http://www.erdangjiade.com/php/2475.html
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>

1 关注 分享
c***@163.com

要回复文章请先登录注册

5***@qq.com

5***@qq.com

凡是收费的 大家 都别找,多看文档,多看几次 并不复杂,
2020-04-24 23:42
5***@qq.com

5***@qq.com

这只是 支付宝支付 ,没有微信支付,搞不定的找我 免费! 少踩 这种坑!
2020-04-24 23:41
Cheng11

Cheng11

回复 8***@qq.com :
好像不能用的啊
2019-04-09 13:43
8***@qq.com

8***@qq.com (作者)

亲测,官网上下载的都是坑,搞不定的请联系我QQ/微信:826096331
微信请参考下这里:[http://www.erdangjiade.com/php/2750.html](http://www.erdangjiade.com/php/2750.html)
支付宝请参考下这里:[http://www.erdangjiade.com/php/2475.html](http://www.erdangjiade.com/php/2475.html)
2018-01-08 23:36
8***@qq.com

8***@qq.com (作者)

回复 逗逗水 :
可以,完美解决。
2018-01-08 23:36
逗逗水

逗逗水

微信支付能成功吗?
2017-08-31 12:52