Paypal and ionic 2 not working and giving JSON error

Question

I am not sure why I am not able to integrate Ionic2 app with Paypal.

I am using Ionic native wrapper for PayPal cordova mobile sdk.

I get success for Paypal.init but getting JSON error for renderSinglePaymentUI

import { Injectable } from '@angular/core';
//import { Paypal, PaypalPayments } from 'ionic-native';

import {PayPal, PayPalPayment, PayPalPaymentDetails, PayPalConfiguration, PayPalConfigurationOptions} from 'ionic-native';
//import {PayPal} from 'ionic-native';

@Injectable()
export class Payments {

paymentdata : PayPalPayment;
paymentdetails: PayPalPaymentDetails;
paypalConfig: PayPalConfiguration;
paypalConfigOptions: PayPalConfigurationOptions;

constructor() {
 this.initiatePaypal();   
}

initiatePaypal(){
   // this.paypalConfig = new PayPalConfiguration("[email protected]","+65", "85256592", "MMS", "mmssingapore.org","mmssingapore.org",YES,0,YES,"en",YES,NO,YES,"[email protected]", "testing123" );

PayPal.init({
        "PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
        "PayPalEnvironmentSandbox": "AYghcu8pISVBO03yX58CVC7vccATg5jraW-k52jPw9V63RQkuIaS2H8moi2OnWln97FPvP-gDEMbMlHj"
        })
    .then(onSuccess => {
        console.log("init success");
        alert("init success" + JSON.stringify(onSuccess));
    })
    .catch(onError => {
        console.log("init failed", Error);
        alert("init failed" + JSON.stringify(onError));
    });
}


initiatePayment(){

    this.paymentdetails = new PayPalPaymentDetails("10.00", "0", "hello");
    this.paymentdata = new PayPalPayment("10.00","USD", "MMS tickets", "sale");


    PayPal.renderSinglePaymentUI(this.paymentdata)
    .then(onSuccess => {
         console.log('OnSuccess Render: ' + JSON.stringify(onSuccess));
         alert('OnSuccess Render: ' + JSON.stringify(onSuccess));
       })
    .catch(onError=> {
       console.log('onError Render: ' + JSON.stringify(onError));
       alert('onError Render: ' + JSON.stringify(onError));
         });
}



}

I am using Ionic 2 RC0.

Your system information:

Cordova CLI: 6.3.1 Ionic Framework Version: 2.0.0-rc.0 Ionic CLI Version: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1 OS: Node Version:v6.7.0

you have not mentioned the error, what error you are getting — Abdul Rafay

Roque Roque · Accepted Answer · 2017-04-04T14:19:57

Today I tried using Ionic 2 and PayPal together. I followed the instructions at http://ionicframework.com/docs/native/paypal and almost everything worked but with small exceptions. So here is a simple provider that worked nicely. Hope it helps! 'preload' should be called before making a payment, of course it is just a sample code.

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

@Injectable()
export class PaypalProvider {    
    private paypal: PayPal;

    constructor() { }

    public preload() {
        this.paypal = new PayPal();

        this.paypal.init({
            PayPalEnvironmentProduction: "YOUR_PRODUCTION_CLIENT_ID",
            PayPalEnvironmentSandbox: "YOUR_SANDBOX_CLIENT_ID"
        }).then(value => {
            console.log('[???] init:', value);
            this.paypal.prepareToRender('PayPalEnvironmentSandbox', new PayPalConfiguration({
                presentingInPopover: true,
            })).then(value => {
                console.log('[???] prepared:', value);
            }).catch(error => {
                console.log('[???] Error:', error);
            });
        }).catch(error => {
            console.log('[???] Error:', error);
        });
    }

    public fooPayment() {
        let payment = new PayPalPayment('10.00', 'BRL', 'Some Product', 'Assinatura');
        this.paypal.renderSinglePaymentUI(payment).then(value => {
            console.log('[???] Payment:', value);
        }).catch(error => {
            console.log('[???] Payment Error', error);
        });
    }    
} // - - -

My system:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
OS: Windows 8.1
Node Version: v6.9.1

Paypal and ionic 2 not working and giving JSON error

1 Answers