文档章节

mui 微信支付和支付宝支付(由于没有后台,在这只能调取各自接口)

 前端小谢
发布于 2016/11/18 11:36
字数 675
阅读 2471
收藏 2

1.先上图片,由于mui自己集成了支付宝,所以不需要配置sdk和获取appid,微信配置有些小细节,不注意就会出错,在这里微信支付只能调用一次,详情看下去在特别注意里

                          

 

2.看代码

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

© 著作权归作者所有

粉丝 5
博文 36
码字总数 10963
作品 0
程序员
私信 提问
支付宝支付之扫码支付(电脑网站支付)、H5支付(手机网站支付)相关业务流程分析总结

前言 在上一篇文章《微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结》中,分析和总结了微信支付相关支付类型的业务流程,这里作为与微信支付平起平坐不相伯仲的支...

龙行天涯
2018/08/22
0
0
Android 微信支付开发流程

首先奉上调起支付页面截图 一:介绍 项目中要用到支付功能,需要支付宝支付、微信支付、银联支付,所以打算总结一下,方便以后的查阅,也方便大家, 用到的地方避免再次被坑。 今天我们就主要...

展菲
2017/11/10
0
0
支付宝:web页面扫码支付、网站支付、支付宝即时到账 + springmvc

一、场景:公司需要在网站上进行支付宝支付。 二、API:使用支付宝开放平台的支付能力-即时到账接口。支付宝开放平台链接 三、分析: 1、支付宝的文档比较容易看,主要是有相应的DEMO,我这里...

u010246789
2016/05/27
0
0
POS机端应用无法调用微信支付宝支付,该怎么实现订单的支付

我有一个PHP的微信公众号内的商城,主要是做加油的。现在的业务场景是这样的:车主在平台上下了订单加完油产生一个二维码,加油工拿POS机上我们自己开发的应用去扫码核销该订单,核销完以后选...

披着羊皮的狼王
2018/12/04
675
1
微信:微信扫码支付、调用统一下单接口、网站支付 + springmvc

一、场景:公司需要在网站上进行微信支付。 二、API:使用微信开放平台的接入微信支付 -扫码支付。微信支付开发者平台链接 三、分析: 接入扫码支付(包含PC网站支付)包含三个阶段,问这里只...

u010246789
2016/06/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JAVA数据结构与算法(二)

栈 1) 栈的英文为 (stack) 2) 栈是一 个 先入后出 (FILO-First In Last Out) 的有序列表 。 3) 栈 (stack) 是限制线性表中元素的插入和删除 只能在线性表的同一端 进行的一种特殊线性表。允许...

aaa阿伟呀
11分钟前
2
0
聊聊nacos的ServiceReporter

序 本文主要研究一下nacos的ServiceReporter ServiceManager.init nacos-1.1.3/naming/src/main/java/com/alibaba/nacos/naming/core/ServiceManager.java @Component@DependsOn("nacosAppl......

go4it
17分钟前
2
0
文字太长想隐藏的字用省略号来代替

white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 是必须的,因为宽度需要固定它才知道那些文字是超出了范围 你会觉得这样的话那怎么看全部的文字呢?你可以在元素上...

前端老手
23分钟前
3
0
二叉树交换左右子树

树的实现类 public class TreeNode {public int val;public TreeNode left;public TreeNode right;public TreeNode(int x) {val = x;}public TreeNode(int val, TreeN......

jxlgzwh
37分钟前
11
0
在Workstation 15上测试vShere 6.7+vCenter Server

想学习vSphere,最好能在自己的电脑上搭建相应的学习环境,如下图所示: _________________________________ | ...

大别阿郎
40分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部