注:這里只能模擬器或真機(jī)才能調(diào)出支付寶或微信爆价,如果沒有安裝支付寶會(huì)調(diào)出網(wǎng)頁版支付寶垦巴,與原生ios安卓支付基本差不多效果媳搪。
步驟1.先下載支付寶和微信的插件。
demo地址:https://github.com/glustful/ionicPayDemo(里面有插件可以拿出來用)骤宣。
支付寶支付插件:com.yoopoon.cordova.plugin.alipay秦爆,
微信支付插件:cordova.weixin.pay
步驟2.把這兩個(gè)插件通過終端命令行加入到項(xiàng)目中。
先進(jìn)入到ionic項(xiàng)目的目錄下:
1.cd 項(xiàng)目路徑
2.添加ios和安卓平臺(tái)(如果沒有添加一下):
ionic platform add ios
ionic platform add android
3.給項(xiàng)目添加支付寶和微信插件(這里才是關(guān)鍵):
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
添加成功如圖所示:
此時(shí)可以在你項(xiàng)目的plugins目錄下看到你的這兩個(gè)插件憔披。
4.支付寶支付和微信支付的用法:
在controller.js或其他你自定義的js里使用:
.controller('DashCtrl', function($scope,$ionicLoading) {
//支付寶支付的使用:
$scope.alipay = function(){
alert("支付寶 ");
var myDate = new Date();
var tradeNo = myDate.getTime();//這個(gè)應(yīng)該是訂單號(hào)等限,到時(shí)候可以換成后臺(tái)提供的訂單號(hào),這里先用別的代替
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芬膝,且支付寶只需要對(duì)就行望门,公鑰不作要求,安卓的可能需要公鑰之類的锰霜。
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",? ? //收款支付寶賬號(hào)或?qū)?yīng)的支付寶唯一用戶號(hào)
"subject":"共享停車",? ? ? ? ? ? //商品名稱
"body":"共享停車支付寶支付",? ? ? ? //商品詳情
"price":"0.01",? ? ? ? ? ? ? ? ? //金額
"tradeNo":tradeNo, ?//訂單號(hào)
"timeout":"30m",? ? ? ? ? ? ? ? //超時(shí)設(shè)置
"notifyUrl":"http://dqinterface.dianpao.net/member/aliPayCallback.shtml"http://回調(diào)url筹误,這個(gè)很重要,后臺(tái)提供癣缅,這個(gè)是提供給支付寶的回調(diào)url厨剪,支付寶根據(jù)這個(gè)url返給后臺(tái)支付結(jié)果,當(dāng)然如果這個(gè)寫錯(cuò)前端也是能否調(diào)起支付寶的友存,就是后臺(tái)接受不到支付寶的反饋結(jié)果祷膳,不能做相應(yīng)的訂單狀態(tài)處理。
},function(resultStatus){
$ionicLoading.show({
template:"支付寶測(cè)試返回結(jié)果=" + 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);
});
};
})
這樣基本就配置完畢了直晨,就可以使用了,不過有一個(gè)地方一定要注意:就是index.html文件里一定要引入這個(gè)文件才能加載ionic的這些插件哦:<script src="cordova.js"></script>
正常創(chuàng)建這個(gè)項(xiàng)目這個(gè)是存在的侠驯,用插件的話這里就不要?jiǎng)h掉哦。
想看效果的必須用模擬器或者真機(jī)運(yùn)行才可以看到奕巍。
接下來本人演示一下ios的吟策。(這個(gè)需要在mac系統(tǒng)下安裝過xcode后才可以使用)
繼續(xù)終端命令行:
5.編譯一下ios和安卓,(想用哪個(gè)平臺(tái)測(cè)試就編譯一下哪個(gè)的止,同步代碼到這兩個(gè)平臺(tái)檩坚,這里我就只編譯ios的了):
ionic build ios
6.這時(shí)可以直接終端命令調(diào)出模擬器,也可以到platforms目錄下找到ios項(xiàng)目.
終端命令調(diào)出模擬器:ionic emulate android
在platforms找到iOS目錄,打開它的ionicPayTry.xcodeproj文件诅福,如果之前安裝過其他插件匾委,有ionicDemo.xcworkspace文件的,就直接打開這個(gè)氓润。(本人建議使用這個(gè)赂乐,這個(gè)控制臺(tái)可以輸出錯(cuò)誤,如果無法調(diào)出支付寶咖气,會(huì)報(bào)錯(cuò)的挨措。一般經(jīng)常遇到的錯(cuò)誤就是rsa_private密鑰讀取為null挖滤,這說明你的密鑰寫錯(cuò)了,不是rsa_private_key_pkcs8.pem格式的浅役,或者換行或哪里出錯(cuò)了斩松。)
正常的情況下就可以調(diào)出支付寶了。微信同理觉既。
模擬器效果如下:
惧盹,只要調(diào)出支付寶就說明你的插件引用成功,如果調(diào)出支付寶但是支付出了問題瞪讼,那就可能是你的訂單號(hào)或密鑰或支付寶賬號(hào)有問題了钧椰。
這里的支付寶申請(qǐng)和原生ios支付寶申請(qǐng)是一樣的,都是申請(qǐng)的app支付尝艘。