欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

phoengap-支付宝整合

phonegap开发 夜阑小雨 4690℃ 0评论

针对phonegap的支付宝集成,目前市面上app主要都是接入的移动快捷支付接口,所以不要在用wap接入了。

体验不好,所以请使用下面的插件:

16.phonegap支付宝移动快捷支付插件andriod版 【该插件支持调用支付宝手机客户端付款】

17.phonegap支付宝移动快捷支付插件IOS版 【该插件支持调用支付宝手机客户端付款】

 

 

 

对于app来说支付时必不可少的。

目前最普遍的支付是支付宝,而对于html5的app如何整合支付宝呢?

众所周知phonegap的特性就是跨平台性。如果我们基于支付宝提供的sdk包来开发就要去写2个插件来支持。

这样说不划算的。通过对支付宝的接口了解。发现支付宝支持wap接口。

那么我们是不是可以通过wap的形式来完成客户端提交服务器端处理,结果返回客户端的模式来完成支付。

 

1.支付宝申请wap支付接口。【流程很麻烦,实在是很头疼,不过为了实现支付多费神吧】

2.下载wap支付的demo包。里面有3个demo包。java,php,c#。你可以根据自己的服务器端程序来选择。

我这边服务器端用的php,故而我这边用php的demo包进行开发。

而对于每个支付流程中都会涉及到加密机制 这里有2中方案RSA 和MD5加密,由于MD5加密简单这里我就选择了md5加密模式

3.配置当前php包里面的文件。

  • alipay_config.php:这个是配置文件 里面需要配置$partner, $key, $seller_email,$notify_url  ,$call_back_url    ,$merchant_url这些值根据自己的实际情况而定
  • alipayto.php:该文件是用来处理支付信息的 ,是调用底层接口并返回处理结果页面 基本上不要修改,不过可以根据自己的提交参数来修改
  • callback_url.php 用户交易完成同步返回地址
  • notify_url.php 服务端获取通知地址,用户交易完成异步返回地址
  • merchant_url.php 用户付款中途退出返回地址址 这个文件需要自己去写 demo里面是没有提供的
  • 其他的class 文件和 css样式 都不用动

4.自己写一个测试文件来测试支付接口是否成功。

<a href=”alipayto.php?subject1=笔记本电脑00011&total_fee1=355.1&out_user1=NickNamewww&out_trade_no1=1215514132323″>购买</a>

将以上文件传到你在申请支付接口时填写的网站域名所对应的服务器下面。这个很关键,因为支付宝会对这个url进行检查如果不对应就会报错。

通过网址访问在pc下面是无法测试的。只能通过手机端的浏览器来完成测试。

如果您通过手机端打开了上述链接地址,那么恭喜你,您的支付宝集成以及完成了80%。

 

下来我们将此逻辑移植到我们的phonegap项目中!

原理很简单拼凑URL地址然后用子浏览器打开支付页面,完成支付后返回app。

先写2个方法:

function zhifugo() {
$.ui.showMask(“数据读取中”);
$.ui.toggleNavMenu();
var payid = “0001”; // 订单号
var pro = “笔记本电脑”;//购买的产品
var paynum = “0.06”;//金额
var user_name_pay = “李小龙”;//购买人
var user_tel_pay =”13528854278″;//联系电话
$(“#idxx”).html(payid);
$(“#jzdxxx”).html(pro);
$(“#jexx”).html(paynum);
$(“#xmxx”).html(user_name_pay);
$(“#telxx”).html(user_tel_pay);
url = “http://www.xxx.com/alipay/alipayto.php?subject1=”+pro+”&total_fee1=”+paynum+”&out_user1=”+user_name_pay+”&out_trade_no1=”+payid;
$(“#zhifubt”).html(‘<input type=”button” class=”ui-btn ui-btn-fullsize” onclick=”alipay(\”+url+’\’);” value=”前往支付”>’);
$.ui.hideMask();
}

function alipay(url){      //支付宝
var ad=url;
window.open(ad, ‘_blank’, ‘location=no’);
}
</script>

hrml代码:

<div class=”textBox boxShadow”>
<p><h3>确认以下信息,前往支付宝支付!</h3></p>
<p>支付单号:<span id=”idxx”></span>
<p>购买产品:<span id=”jzdxxx”></span></p>
<p>应付金额:<span id=”jexx”></span></p>
<p>您的姓名:<span id=”xmxx”></span></p>
<p>您的电话:<span id=”telxx”></span></p>
<div id=”zhifubt”></div>
</div>

这样就可以在页面的上显示出购买产品的信息,同时在其实插入一个支付按钮,按钮上面添加一个方法,将url地址传进去。

再上述的JS代码中URL很关键一定是php中设置好的地址和传值字段。

 

ok!运行app点击支付按钮就会打开支付页面了。

注:这样的代码是跨平台的,直接移植到其他的系统也是可以使用的。

004 003

下载:支付接口demo

 

转载请注明:夜阑小雨 » phoengap-支付宝整合

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 不错的嘛,我要收藏先
    三五笑话2013-06-10 09:53 回复