Ionic Native Paypal

Hello, i’m new here, and i Build one app, and in this APP i need used Payapl payement, i see that ionic have a Native paypal plugin :

$ ionic cordova plugin add com.paypal.cordova.mobilesdk
$ npm install --save @ionic-native/paypal

I followed the code posted in the doc :

import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal';

constructor(private payPal: PayPal) { }

...


this.payPal.init({
  PayPalEnvironmentProduction: 'YOUR_PRODUCTION_CLIENT_ID',
  PayPalEnvironmentSandbox: 'YOUR_SANDBOX_CLIENT_ID'
}).then(() => {
  // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction
  this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
    // Only needed if you get an "Internal Service Error" after PayPal login!
    //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
  })).then(() => {
    let payment = new PayPalPayment('3.33', 'USD', 'Description', 'sale');
    this.payPal.renderSinglePaymentUI(payment).then(() => {
      // Successfully paid

      // Example sandbox response
      //
      // {
      //   "client": {
      //     "environment": "sandbox",
      //     "product_name": "PayPal iOS SDK",
      //     "paypal_sdk_version": "2.16.0",
      //     "platform": "iOS"
      //   },
      //   "response_type": "payment",
      //   "response": {
      //     "id": "PAY-1AB23456CD789012EF34GHIJ",
      //     "state": "approved",
      //     "create_time": "2016-10-03T13:33:33Z",
      //     "intent": "sale"
      //   }
      // }
    }, () => {
      // Error or render dialog closed without being successful
    });
  }, () => {
    // Error in configuration
  });
}, () => {
  // Error in initialization, maybe PayPal isn't supported or something else
});

that is my paypal.ts :

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal';
import {AlertServiceProvider} from "../../providers/alert-service/alert-service";

/**
 * Generated class for the PremiumPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-premium',
  templateUrl: 'premium.html',
})
export class PremiumPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private payPal: PayPal, public alet: AlertServiceProvider) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PremiumPage');
  }
  test(){
    this.payPal.init({
      PayPalEnvironmentProduction: 'AZeJ3B4hebZKibPdxxxxxxxxxxxxxxxxxxxxxxxBpc0GVxB8sNAv7FgpETMKfk',
      PayPalEnvironmentSandbox: 'EAXMtLwJ2dcBLYqoTMwt0OExxxxxxxxxxxxxxxxxxxkcIfw2Uhn4ft9SPHlnwdu6ima'
    }).then(() => {
      // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction
      this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
        // Only needed if you get an "Internal Service Error" after PayPal login!
        //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal
      })).then(() => {
        let payment = new PayPalPayment('9.99', 'EUR', 'Description', 'Premium - Pf-Pronos');
        this.payPal.renderSinglePaymentUI(payment).then((result) => {
          // Successfully paid
          console.log(result);
          // Example sandbox response
          //
          // {
          //   "client": {
          //     "environment": "sandbox",
          //     "product_name": "PayPal iOS SDK",
          //     "paypal_sdk_version": "2.16.0",
          //     "platform": "iOS"
          //   },
          //   "response_type": "payment",
          //   "response": {
          //     "id": "PAY-1AB23456CD789012EF34GHIJ",
          //     "state": "approved",
          //     "create_time": "2016-10-03T13:33:33Z",
          //     "intent": "sale"
          //   }
          // }
        }, () => {
          // Error or render dialog closed without being successful
          console.log( "Error or render dialog closed without being successful");
        });
      }, () => {
        // Error in configuration
        console.log( "Error in configuration");
      });
    }, () => {
      // Error in initialization, maybe PayPal isn't supported or something else
      this.alet.AlertCtr("Error", " Error in initialization, maybe PayPal isn't supported or something else");
    });
  }
}

In my HTML i have button who call the fonction “test()”

  <button ion-button block (click)="test()">Test</button>

But when I click in the button i get the error : “Error in initialization, maybe PayPal isn’t supported or something else”, Imposible to find an example in the web…

Someone has managed to use this plugin and know how to do it?

Thanks so much !

Hi,

Have you solved your problem yet? Because I got the same problem.
Let me know if you can help.

Try outputting the actual, code-generated error message. You can replace the error displaying part with…

}, (err) => {
      // Error in initialization, maybe PayPal isn't supported or something else
      this.alet.AlertCtr("Error", " Error in initialization, maybe PayPal isn't supported or something else. Error: " + JSON.stringify(err));
    });

I dont Know but maybe is because you are usuing the PayPalEnvironmentProduction: ID and
PayPalEnvironmentSandbox: ID at the same time…

Hello you find any solution to this? I am trying to work in ionic 4 and got the same issue If you have solved this please kindly share your findings.

Have you solved it?

I had same problem and now I got the solution. It may help you.

Check your Sandbox Setting

Below it my Code

payWithPaypal() {

console.log("Pay ????");

this.payPal.init({

  PayPalEnvironmentProduction: 'this is production environment',

  PayPalEnvironmentSandbox: 'Adxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'  // here your sandbox client id

}).then(() => {

  // Environments: PayPalEnvironmentNoNetwork, PayPalEnvironmentSandbox, PayPalEnvironmentProduction

  this.payPal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({

    // Only needed if you get an "Internal Service Error" after PayPal login!

    //payPalShippingAddressOption: 2 // PayPalShippingAddressOptionPayPal

  })).then(() => {

    let payment = new PayPalPayment('1','USD', 'Description', 'Sale');

    this.payPal.renderSinglePaymentUI(payment).then((res) => {

     // Successfully paid

      // Example sandbox response

      //

      // {

      //   "client": {

      //     "environment": "sandbox",

      //     "product_name": "PayPal iOS SDK",

      //     "paypal_sdk_version": "2.16.0",

      //     "platform": "iOS"

      //   },

      //   "response_type": "payment",

      //   "response": {

      //     "id": "PAY-1AB23456CD789012EF34GHIJ",

      //     "state": "approved",

      //     "create_time": "2016-10-03T13:33:33Z",

      //     "intent": "sale"

      //   }

      // }

    }, () => {

      // Error or render dialog closed without being successful

    });

  }, () => {

    // Error in configuration

  });

}, () => {

  // Error in initialization, maybe PayPal isn't supported or something else

});

}

where do you get the production environment? is it like the app name or something?