Ionic Native Paypal


#1

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 !


#2

Hi,

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


#3

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));
    });

#4

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