我们搞app有一个重要的功能那就是支付功能。无论是微信支付,支付宝,还是银联支付总要有一样支付手段来支持我们网上付款。实现完整的功能。我们公司app的支付方式经过大家开会讨论选择了支付宝支付(其实是当时的条件只能实现支付宝支付(手动哈士奇))。我近期整理了一下我的支付dome决定写出来给有需要的小伙伴。

准备工作就是要去申请  。你得去蚂蚁金服开放平台申请一个应用,地址:https://openhome.alipay.com注册一个应用。申请根据步骤一步一步来很简单。留下官方教程和传送门http://ask.dcloud.net.cn/article/71

申请完成以后开始我们的前端代码。(我本身是有混合支付的,这个dome是删除了混合支付的)。++++++++++++

var aliChannel = null; // 支付宝支付
var channel = null; //支付通道
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);
});
})
var ALIPAYSERVER = 'http://*****************/alipay/alipay.php?total=';//自己的后台的配置文件(我下一篇会放一个PHP实例),需要写订单信息等等在我的alipay.php中有讲解
// 2. 发起支付请求
function pay(id) {
var ZongJia = document.getElementById("ZongJia").textContent;//我自己的存放应付的金额的元素
// 从服务器请求支付订单
var PAYSERVER = '';
PAYSERVER = ALIPAYSERVER;
channel = aliChannel;
var xhr = new XMLHttpRequest();
var amount = ZongJia;//amount变量表示要支付的金额;
xhr.onreadystatechange = function() {
switch(xhr.readyState) {
case 4:
if(xhr.status == 200) {
plus.payment.request(channel, xhr.responseText, function(result) {
plus.nativeUI.alert("支付成功!", function() {
//这里根据自己的需求写支付成功的函数

});
}, function(error) {
plus.nativeUI.alert("支付失败:" + error.code);
});
} else {
alert("获取订单信息失败!");
}
break;
default:
break;
}
}
xhr.open('GET', PAYSERVER + amount);
xhr.send();
}

最后在需要的地方调用  pay('alipay'); 就ok了。我会在下一篇写下我的后台代码实例。

HTML5 开发APP( 支付宝支付)的更多相关文章

  1. ThinkPHP5.0 实现 app支付宝支付功能

    前几天做项目,要求要用到支付宝接口,第一次做,弄了好几天 各种坑啊,简单写一下我做支付宝支付的过程,希望对也是第一次做支付宝支付的童鞋有帮助, 不懂的可以先去支付平台看一下支付宝支付的文档,我是下的d ...

  2. APP支付宝支付接入

    1.app支付简介 买家可以在手机,掌上电脑等无线设备的应用程序内,通过支付宝(支付宝app或网页版支付宝)付款购买商品,且资金实行实时到账. 2.申请条件 1.申请前必须拥有经过实名认证的支付宝账户 ...

  3. iOS开发系列-支付宝支付

    概述 开发中支付通常都会集成支付宝支付,下面讲解支付宝的整体流程. 集成支付宝支付的流程 签约 与支付签约,得到获取商户的ID(partner).账户ID(seller).私钥privateKey. ...

  4. HTML5 开发APP(打开相册以及图片上传)

    我们开发app,常常会遇到让用户上传文件的功能.比如让用户上传头像.我公司的业务要求是让用户上传支付宝收款二维码,来实现用户提现的功能.想要调用相册要靠HTML Plus来实现.先上效果图 基本功能是 ...

  5. app支付宝支付java服务端代码

    app支付java服务端生成支付单文档 public String aliPay(String amount,Map<String,Object> body){ //实例化客户端 Alip ...

  6. App支付宝支付--PHP处理代码

    /* *生成APP支付订单信息 * @param number uid 用户id * @param string token 用户token * @param number oid 订单id * @p ...

  7. TinkPHP框架开发的CRMEB小程序商城v4.0二次开发集成支付宝支付

    前言 大家都知道支付宝支付和微信支付宝都只能局限在自己的平台,微信内支付宝支付是根本就不能使用,即使是公众号支付也需要跳转到外部浏览器才可以唤起支付宝支付,并且QQ浏览器唤起支付宝支付还是问题很多,所 ...

  8. HTML5 开发APP(头部和底部选项卡)

    我们开发app有一定固定的样式,比如头部和底部选项卡部分就是公共部分就比如我在做的app进来的主页面就像图片显示的那样 我们该怎么实现呢,实现我们应该建一个主页面index.html,然后建五个子页面 ...

  9. HTML5 开发APP( 环境配置)

    上一篇我写了关于新建项目,这一篇说一下配置环境我们新建一个移动app后,会发现一个mainifest.json文件,开发app所要配置的环境就在这个文件里 点击打开文件后会有配置界面,在配置界面的下方 ...

随机推荐

  1. CSS 简单了解(二)

    我们第一天说了简单的HTML,第二天说了简单的CSS.那么今天.咱们就来说一说他们的结合如何使用吧! 首先说引用方式,和使用方法吧! 1.内部样式表.(放入<head>中) <hea ...

  2. rabbitmq 死信邮箱配置(dead-letter)

    DLX,Dead-Letter-Exchange(死信邮箱)利用DLX,当消息在一个队列中变成死信后,它能被重新publish到另一个Exchange,这个Exchange就是DLX.消息变成死信一向 ...

  3. 网页标题(title)动态改变

    这是一只小白的突发奇想,实验多次终于有所效果.想要实现什么效果呢, 如图所示 :    要实现这个效果,大体需要两步. 第一,如何像打印似的一个一个字显示文字.要实现这个效果有多种方法.在这里我所运用 ...

  4. [转]Java多线程学习(吐血超详细总结)

    转自:http://www.mamicode.com/info-detail-517008.html 本文主要讲了Java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法. ...

  5. 移动webAPP前端开发技巧汇总

    1. viewport:webapp视图 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是除去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动 ...

  6. sql嵌套批量更新

    嵌套批量更新 UPDATE CheLiang SET lineName = t.linename FROM TeamJiHua t ,CheLiang tc WHERE t.id = tc.teami ...

  7. workerman启动失败解决

    提示stream_socket_server(): unable to connect to tcp://0.0.0.0:2120 (Address already in use)php xxx.ph ...

  8. 国内互联网公司github网址

    -----------------------------------------------------推荐技术------------------------------------------- ...

  9. 【LeetCode】110. Balanced Binary Tree

    题目: Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced bin ...

  10. Jquery-鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.(1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.        $('p').click(fu ...