Dcloud中mui 微信支付和支付寶支付接口完美實現付款代碼（PHP支付寶demo）

時間 2019-11-12

標籤 dcloud mui 微信支付支付寶接口完美實現付款代碼 php demo 欄目 PHP 简体版

原文原文鏈接

Dcloud中mui 微信支付和支付寶支付接口完美實現付款代碼（PHP支付寶demo）,官網上下載的一直報‘建立訂單錯誤‘和各類報錯，因而本身就試着寫了一個demo，親測，可用。

演示能夠參考這裏：http://www.erdangjiade.com/php/2475.htmljavascript

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節點：php

以下圖css

在plus -> distribute -> plugins 節點下添加payment節點：html

以下圖java

4.特別注意

1.因爲mui集成了支付寶插件，因此支付寶支付不須要配置就能夠， 
 
2,。注意微信weixin節點下配置微信支付相關信息 
 
appid值爲在微信開放平臺申請應用的AppID值。（微信開放平臺不是微信公衆號平臺申請的appid） 
 
由於我在微信公衆號申請的也不知到什麼緣由只成功調取一次，其他失敗。 
 
5.因爲項目須要我會等後臺完善後，在總結一份

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。