【原】ionic下支付宝支付和微信支付集成

注:这里只能模拟器或真机才能调出支付宝或微信,如果没有安装支付宝会调出网页版支付宝,与原生ios安卓支付基本差不多效果。

步骤1.先下载支付宝和微信的插件。

demo地址:https://github.com/glustful/ionicPayDemo(里面有插件可以拿出来用)。

支付宝支付插件:com.yoopoon.cordova.plugin.alipay,

微信支付插件:cordova.weixin.pay

支付宝和微信插件(2017-03-09最新版)

步骤2.把这两个插件通过终端命令行加入到项目中。

先进入到ionic项目的目录下:

1.cd 项目路径

2.添加ios和安卓平台(如果没有添加一下):

ionic platform add ios

ionic platform add android

3.给项目添加支付宝和微信插件(这里才是关键):

cordova plugin add 支付宝插件路径

cordova plugin add 微信插件路径

例如:

 cordova plugin add /Users/david/Documents/pay/com.yoopoon.cordova.plugin.alipay

cordova plugin add /Users/david/Documents/pay/cordova.weixin.pay

添加成功如图所示:

添加支付宝/微信插件

此时可以在你项目的plugins目录下看到你的这两个插件。

4.支付宝支付和微信支付的用法:

在controller.js或其他你自定义的js里使用:

.controller('DashCtrl', function($scope,$ionicLoading) {

//支付宝支付的使用:

$scope.alipay = function(){

alert("支付宝 ");

var myDate = new Date();

var tradeNo = myDate.getTime();//这个应该是订单号,到时候可以换成后台提供的订单号,这里先用别的代替

var alipayClass = navigator.alipay;

var rsa ="MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAMvPnB+VTEPXGrB/NOzpTGlbuTMJFaqM+vSUV67Ea2nyvuNHGjLtLAVhjyDVG8DxWTvdHiFhTQV4tSTyCZojLePJlwO4b0ZVJ5jdVxREVAR6UnH6Dw55iBL7wqp5aXLJK8is6srTB5mHCz61ow7EBt7KP8cEQ8jTcB7E4obkgtojAgMBAAECgYB1s7geJUKeCyPGui/+gd03G1mhN6XjkPd9OA5LR/Qgg6fp6a4fqwi5MtZNx8T3cGpwQAqejGrGticm5wDUm2xsD7yTfCTh2lqD5i+IfsUUqsDJ2/o4RHsMRSOw4P7S5RJD5/HxhTZo51qtzqjtCLWDa0xPaI+GaBtuJnf6R8CeAQJBAPjG/SdzdD7kvgyGYOgVgcBwvMTO26/VPzwHEz//3hUfgdDJCYaCQ/lp609pSITkuIDlWyO4KhiyReL5v/zxN0MCQQDRumnbAVqBpG3UvfyxRO030MtAzY/sCWZjlOolH2wX9NcNHfUWyfW8yngvlPsaKIG6nBgUf9SuSJmdF6+xVHOhAkBaQc+c3Y1iOBkfcC1+Zjch+4TxHl+j5ok/nQ2F3a3UGg8+EYIMM/y3Y49Ey1zNIjIySYQMbIeRWDR0ycm22kkDAkBWqpvXvoVyEUq5oRDtCDim2gdD7i5NMc031W+0i3mVpL3BU+HV2vtLWrezofLp6ldBkAN7ZR+0LZgdDI6zztxBAkEAk25SnEPl8sQSCg463YJnHOqLliRbLnLBb1tVqf/mxeZ4eAFQpNVT0BYtmEXDVc0s8Lhk3jqBJQ53Y4X26ui5Ow=="; //这里ios使用的是支付宝的rsa_private_key_pkcs8.pem,且支付宝只需要对就行,公钥不作要求,安卓的可能需要公钥之类的。

var pubRsa="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCv4WGtmvRh1iF/LUY9wPeXaXFDTrdMfKi+kofqXfOfrpk9/qSGmjXwlPIzQSS/nFO2pB8dtwC9VAbx180y+n/B6n7E5uqzhlekozPqRAdEx+K+V4iwxdXctVEZEHDB4biQESCN3EQoCE3Ygd4Tsz9zuW7Z1A/FTJ8MAcXvd+wIDAQAB";//公钥

alipayClass.pay({

"partner":"2088521596342423",    //商户ID

"rsa_private":rsa,              //私钥

"rsa_public":pubRsa,                //公钥

"seller":"zhifubao@163.com",    //收款支付宝账号或对应的支付宝唯一用户号

"subject":"共享停车",            //商品名称

"body":"共享停车支付宝支付",        //商品详情

"price":"0.01",                  //金额

"tradeNo":tradeNo,  //订单号

"timeout":"30m",                //超时设置

"notifyUrl":"http://dqinterface.dianpao.net/member/aliPayCallback.shtml"//回调url,这个很重要,后台提供,这个是提供给支付宝的回调url,支付宝根据这个url返给后台支付结果,当然如果这个写错前端也是能否调起支付宝的,就是后台接受不到支付宝的反馈结果,不能做相应的订单状态处理。

},function(resultStatus){

$ionicLoading.show({

template:"支付宝测试返回结果=" + resultStatus,

noBackdrop: true,

duration: 500

});

},function(message){

$ionicLoading.show({

template:"支付宝支付失败=" + message,

noBackdrop: true,

duration: 500

});

});

};


//微信使用方法:

$scope.wxpay = function(){

alert("wxpay demo");

var weixin = navigator.weixin;

weixin.sendPayReq({

"appid":"wx321a79afb040b14f",//微信的appid

"urlString":"http://91tkp.com:3001/wxSign",

"method":"post",

"data":{}

},function(retcode){

alert("success:"+retcode);

},function(message){

alert("sendPayReq:"+ message);

});

};

})

这样基本就配置完毕了,就可以使用了,不过有一个地方一定要注意:就是index.html文件里一定要引入这个文件才能加载ionic的这些插件哦:<script src="cordova.js"></script>

正常创建这个项目这个是存在的,用插件的话这里就不要删掉哦。

想看效果的必须用模拟器或者真机运行才可以看到。

接下来本人演示一下ios的。(这个需要在mac系统下安装过xcode后才可以使用)

继续终端命令行:

5.编译一下ios和安卓,(想用哪个平台测试就编译一下哪个,同步代码到这两个平台,这里我就只编译ios的了):

ionic build ios

6.这时可以直接终端命令调出模拟器,也可以到platforms目录下找到ios项目.

终端命令调出模拟器:ionic emulate android

在platforms找到iOS目录,打开它的ionicPayTry.xcodeproj文件,如果之前安装过其他插件,有ionicDemo.xcworkspace文件的,就直接打开这个。(本人建议使用这个,这个控制台可以输出错误,如果无法调出支付宝,会报错的。一般经常遇到的错误就是rsa_private密钥读取为null,这说明你的密钥写错了,不是rsa_private_key_pkcs8.pem格式的,或者换行或哪里出错了。)

正常的情况下就可以调出支付宝了。微信同理。

模拟器效果如下:


调出支付宝成功

,只要调出支付宝就说明你的插件引用成功,如果调出支付宝但是支付出了问题,那就可能是你的订单号或密钥或支付宝账号有问题了。

这里的支付宝申请和原生ios支付宝申请是一样的,都是申请的app支付。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容