ionic调用支付宝插件

最近项目中要调用支付宝插件，其实支付宝插件网上有很多，当时我们试了好多插件都不行，要不是显示cordova is not defined，要不是显示cordova is not available，要不是打包调试的时候显示plugin is not installed，最后在即将奔溃的时候发现alipay按照他们说的有误，因为plugins下面只有ali，下面介绍一下我们如何使用ionic的alipay插件。

 

首先说一下我的版本： ionic 4.1.2          cordova  8.0.0

 

我使用的插件是ionic2官方文档上面的，链接如下：https://ionicframework.com/docs/native/alipay/

 

插件安装步骤和官方文档上的差不多：

1.安装插件

ionic cordova plugin add cordova-plugin-gubnoi-alipay --variable APP_ID=your_app_id

npm install --save @ionic-native/alipay

//使用了淘宝镜像记得前面加c cnpm install --save @ionic-native/alipay

2. 在app.module.ts 中添加

 

3.使用插件

这是官方文档上的用法

import { Alipay } from '@ionic-native/alipay';

constructor(private alipay: Alipay) {

//alipayOrder is a string that has been generated and signed by the server side.
this.alipay.pay(alipayOrder)
   .then(result => {
      console.log(result); // Success
   })
   .catch(error => {
      console.log(error); // Failed
   });

}

然后神奇的事情发生了，签名没有错但是我用了之后显示cordova is not available

 

最后其实就是上面说的plugins下面只有ali，下面奉上我们可行的做法

1.安装插件，还是上面那个没变

 

2.调用action向后端服务器获取加签后的字符串

 

3.调用插件：

cordova.plugins.ali.pay(this.alipayInfo)
          .then(res => {
            console.info("res:");
            alert(res);
            this.payResult = res;
          }, err => {
            alert(err);
            this.payResult = err;
          })
          .catch(e => {
            alert(e);
            this.payResult = e;
          });

注意记得在import之后 declare let cordova;

 

4.真机测试，推荐打包后在手机上面测，最好不用沙箱环境，直接用真实的APP_ID一分钱一分钱测

//我们一直怀疑是版本不兼容问题，装了好多插件最后还把打包搞崩了，网上查说是jar包冲突，最后把项目删了重新导入，真的很痛苦