Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo)-阿里云开发者社区

开发者社区> 源码下载> 正文

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

简介: Dcloud中mui 微信支付和支付宝支付接口完美实现付款代码(PHP支付宝demo),官网上下载的一直报‘创建订单错误‘和各种报错,于是自己就试着写了一个demo,亲测,可用。
+关注继续查看
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=';  
        
        // 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.由于项目需要我会等后台完善后,在总结一份

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用ApiPost测试接口时需要先登录怎么办?利用Cookie模拟登陆!
在后台在开发、调试接口时,常常会遇到需要登陆才能请求的接口。本文主要介绍利用ApiPost发送Cookie,使服务器识别已登录用户的Cookie。
2614 0
可编译运行:调用ffmpeg接口,将RTSP流保存为MP4的C代码
可编译运行:调用ffmpeg接口,将RTSP流保存为MP4的C代码
14 0
使用 BEM 来模块化你的 CSS 代码
本文讲的是使用 BEM 来模块化你的 CSS 代码,如果你对 BEM 不熟悉,它是通过一种严格方式来将 CSS 类划分成独立构成要素的一种命名方法。它表示为 Block Element Modifier,一个常见的 BEM 看起来就像这样:
1117 0
《区块链DAPP开发入门、代码实现、场景应用》笔记1——天外飞仙DAPP
Solidity编程语言解决了编写智能合约的不友好的问题,但是当合约编译并部署之后,对与这些接口的访问,对于一般的使用者来说,门槛有点高, 对普通用户来说也是非常不友好,为了使广大用户理解并方便快捷的访问区块链,以及区块链上的智能合约系统,开发者必须提供操作界面和结果查看界面,来简化用户访问和操作区块链的方式。
4011 0
企业支付宝账号开发接口实现
转载自:http://my.oschina.net/xshuai/blog/313809 关于即时到账的开发。审核通过。简单测试如下。 希望看的可以收藏或者赞一下哦。 1:拥有自己的支付宝企业账号。
1516 0
2019年,支付宝4亿行代码背后的故事
每敲下一行代码,影响的都是十几亿人
1354 0
验签失败自查方案-支付宝接口常见错误系列
说明:   验签只需要使用到支付宝公钥 错误原因:   1.支付宝公钥使用错误导致   2.验签方法使用错误   3.参数错误导致,例如乱码,带自定义参数,编码格式。 自查流程(按照推荐流程检查)   第一步(重点检查):支付宝公钥使用是否错误参考这个帖子自查:[url]https://openclub.
1606 0
创建、修改门店接口常见错误返回
1、Q:创建店铺场景下营业执照主体信息不一致        A:营业执照的名称和支付宝实名认证名称不一样,确保一致,需要上传授权涵。  2、Q:支付接口如果store_id和alipay_store_id都传了,支付宝会验证这两个参数的合法性吗?        A:均会进行检测两者是否匹配。
427 0
【小程序 Demo】带你玩转支付宝小程序之获取会员信息
火速围观!支付宝近期推出了一系列小程序示例,不仅提供在线体验而且提供全部源代码,示例涵盖了:会员信息、小程序二维码、刷脸认证、小程序支付、模板消息、支付宝卡包和线下买单7个高频使用场景。直接下载源代码,只需要简单几步修改即可拥有自己的支付宝小程序,实在是开发者的福音。
1945 0
+关注
源码下载
本人二当家的,性温和,擅代码,好技术,人谓代码狗,程序猿;河南商丘人氏也,现居上海,曾先后创办,上海什尔网络科技,上海红苹果电脑科技有限公司,上海素商网络科技等;自毕业即誓言:定要搞网络,携思科、华为等路由、交换机以定天下;初涉江湖,身不由己,期间,曾开过水果店,熟食店,亦开过淘
80
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载