ionic 支付宝和微信支付在ionic中的使用,及注意事项

支付宝和微信支付在ionic中的使用,及注意事项

1.支付宝支付支付
1.1.参考demo地址:https://github.com/glustful/ionicPayDemo
(1).支付宝支付插件:com.yoopoon.cordova.plugin.alipay
(2).微信支付插件:cordova.weixin.pay
(3).本地将插件安装到自己的项目中:

[code lang="psd"]
例如:
$  cordova plugin add /Users/cxk/myAPP/com.yoopoon.cordova.plugin.alipay
$  cordova plugin add /Users/cxk/myApp/cordova.weixin.pay
[/code]

(4).查看插件列表是否成功:

[code lang="psd"]
$ cordova plugin list
[/code]

1.2.支付宝支付和微信支付的用法:
(1).在controller.js或自定义的js里使用:

[code lang="js"]
.controller('DashCtrl', function($scope,$ionicLoading) {
//支付宝使用:
$scope.alipay = function(){
alert("支付宝 ");
var myDate = new Date();
var tradeNo = myDate.getTime();//这个是订单号,到时候可以换成后台提供的订单号
var alipayClass = navigator.alipay;
var rsa ="MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAMv*nB+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":"[email protected]",    //收款支付宝账号或对应的支付宝唯一用户号
"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>
[/code]

1.3.真机测试:必须用模拟器或者真机运行才可以看到,编译一下ios和安卓,(想用哪个平台测试就编译一下哪个,用ios测试)

[code lang="psd"]
$  ionic build ios
[/code]

1.4.在platforms找到iOS目录,打开它的ionicPayTry.xcodeproj文件,如果之前安装过其他插件,有ionicDemo.xcworkspace文件的,就直接打开这个。(本人建议使用这个,这个控制台可以输出错误,如果无法调出支付宝,会报错的。一般经常遇到的错误就是rsa_private**读取为null,这说明你的**写错了,不是rsa_private_key_pkcs8.pem格式的,或者换行或哪里出错了。正常的情况下就可以调出支付宝了。微信同理
1.5.模拟器效果如下:
ionic 支付宝和微信支付在ionic中的使用,及注意事项

调出支付宝就说明你的插件引用成功,如果调出支付宝但是支付出了问题,那就可能是你的订单号或**或支付宝账号有问题了。
这里的支付宝申请和原生ios支付宝申请是一样的,都是申请的app支付。