HTML5 开发APP( 支付宝支付)

     我们搞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了。我会在下一篇写下我的后台代码实例。

原文地址:https://www.cnblogs.com/wangercha/p/7253551.html