PayPal Cordova plugin

Ionic Framework ionic-v3
1

I have done everything and I cannot get the PayPal plugin to work. I even installed the PayPal typings, but to no avail. Does anyone have a working typescript code example of how to use the paypal plugin or any other cordova plugin, besides those in ionic native? Also, include the setup if you can! Thank you.

1 Like
2

What in particular does not work?
Are you getting any errors?
We need a bit more information

3

I install the plugin via ionic plugin add com.paypal.cordova.mobilesdk and I notice all the instructions are for javascript. I tried to find the typings for it and so I did this npm install --save retyped-paypal-cordova-plugin-tsd-ambient However, it still said that PayPalMobile was not a type or could not be found when I tried to use it in a .ts file. I am not certain if this is the correct process or not. I would really love to use the plugin, but with TypeScript.

4

Hi Mike - did you have a answer on paypal integration ?

5

Here there is no one to reply on this subject… Very sad :frowning: even no one from ionic team :frowning:

6

Give the ionic-native wrapper for paypal a try

it covers all the things that you would need.

7

Thank you so much for making a native wrapper. I probably bugged you enough about it. :stuck_out_tongue:

8

Already tried, It’s not working, even not able to import Paypal from ionic-native…

import {PayPal} from 'ionic-native';

PayPal.init({
     "PayPalEnvironmentProduction": "YOUR_PRODUCTION_CLIENT_ID",
       "PayPalEnvironmentSandbox": "YOUR_SANDBOX_CLIENT_ID"
       })
  .then(onSuccess)
  .catch(onError);
9

PayPal support was added in ionic-native 1.3.19 - make sure that you’re using the latest version of ionic-native in your project.

11

I think i have setup all things, now I am getting “JSON error” error while I use PayPal.renderSinglePaymentUI

Following is my code:

PayPal.init({
       "PayPalEnvironmentProduction": "XXXXXXXXXXXXXXXXXXX",
       "PayPalEnvironmentSandbox": "XXXXXXXXXXXXXXXXXXX"
       })
    .then(onSuccess => {
         console.log('OnSuccess Init: ' + JSON.stringify(onSuccess));
//////////// I am getting OK response on this point ///////////
             alert('OnSuccess Init: ' + JSON.stringify(onSuccess));
           })
        .catch(onError=> {
           console.log('onError Init: ' + JSON.stringify(onError));
           alert('onError Init: ' + JSON.stringify(onError));
         });

    this.paymentdata = [{
       amount: "50",
       currencyCode: "USD",
       shortDescription: "Product Desc",
       intent: "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 getting "JSON error" message on this point ////////////////
         });

so what’s wrong i am doing?

12

I am getting “JSON error” while I use PayPal.renderSinglePaymentUI… is it correct way to pass data?

this.paymentdetails={
       "amount": "50",
       "currencyCode": "USD",
       "shortDescription": "PRODUCT Desc",
       "intent": "Sale"
       };


    PayPal.renderSinglePaymentUI(this.paymentdetails)
    .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));
     });
13

I would recommend you to check out the plugin documentation:

Start PayPal UI to collect payment from the user. See https://developer.paypal.com/webapps/developer/docs/integration/mobile/ios-integration-guide/ for more documentation of the params.

14

In document, it’s only described how to initi() but there is no detail how to pass data in renderSinglePaymentUI

15

Hi, I am having the similar problem and still figuring it out. It seems like we need to pass the data as PaypalPayment object, but I have no idea how to create one using Typescript.

16

Then you could check the source code - it’s an open source project after all. The renderSinglePaymentUI expects a parameter of type PayPalPayment which could be created using a convenience constructor PayPalPayment.new(). Something like this should probably work (disclaimer: UNTESTED):

this.paymentdetails = new PayPalPayment.new("50", "USD", "PRODUCT Desc", "Sale");

PayPal.renderSinglePaymentUI(this.paymentdetails)
// ...
17

I changed the code jigsaxis posted above and it can not find name PayPalPayment. Error is can not find name PayPalPayment.

18

Try import it.

import {PayPalPayment} from ‘Paypal’;

…

I will try it later today.

19

I already tried import it…

import {PayPal, PayPalPayment} from 'ionic-native';

this.paymentdetails = new PayPalPayment.new("50", "USD", "PRODUCT Desc", "Sale");

it’s says “Error TS2339: Property ‘new’ does not exist on type ‘typeof PayPalPayment’.”

I also check many native module no any native module has new()

20

Yeah, I ran into exactly same problem as you.

I also tried to do

this.paymentdetails = PayPalPayment.new(“0.01”,“USD”,“Product Desc”, “Sale”);

PayPal.renderSinglePaymentUI(this.paymentdetails)…

It has no error, but when I tried it with my iPhone, there is no promise returned.

Seems like we got more work to do hahaha

21

I haven’t used it, but I guess that it might get mapped to the constructor of the native plugin – you could try to construct it this way then, maybe it’ll work:

this.paymentdetails = new PayPalPayment("50", "USD", "PRODUCT Desc", "Sale");