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

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

来源:花匠小妙招 时间:2024-12-07 18:54

最新推荐文章于 2020-05-16 15:49:44 发布

weixin_33976072 于 2017-06-19 10:27:55 发布

Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo),官网上下载的一直报‘创建订单错误‘和各种报错,于是自己就试着写了一个demo,亲测,可用。

演示可以参考这里: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=';  

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.由于项目需要我会等后台完善后,在总结一份


相关知识

对接支付宝、微信、第三方支付,超详细讲解+demo演示
app调起支付宝-后端预支付
“花瓣支付”来了!华为要和支付宝微信抢市场?
华为“花瓣支付”来了,与微信、支付宝有什么区别
web支付基础教程
华为旗下支付公司获批更名为“花瓣支付”,不直接对标微信支付和支付宝丨大厂金融事
华为“花瓣支付”来了!将从底层截胡微信支付宝?支付市场迎变局
华为推出独立于支付宝、微信的支付平台,为“花瓣支付”
支付宝花呗/花呗分期支付说明
支付宝取消美团会员,下一步用户是不是就不能自由选择支付方式?

网址: Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo) https://www.huajiangbk.com/newsview948940.html

所属分类:花卉
上一篇: Java基础7
下一篇: 微信支付接口demo

推荐分享