bug: payPal plugin does't work on iOS when Capacitor is used for build

[LACEDAPP]

Paypal works fine only when using Cordova. But when I used the Capacitor it doesn’t work on iOs. I understand that it is not on the Ionic side. But I just want to inform you that
https://github.com/paypal/PayPal-Cordova-Plugin plugin works correctly only with Cordova.

This guide https://ionicframework.com/docs/native/paypal works only using Cordova. I created empty apps (only with PayPal plugin) using both Cordova and Capacitor and tested it with the latest library versions.

Error body from PayPal pop-up:
Invalid merchant
Payments to this merchant are not allowed (invalid clientId)

Error from console:
PayPal SDK: Request has failed with error: invalid_client - System error (invalid_client). Please try again later. (401) | PayPal Debug-ID: 61c53ad41d07b [mock, PayPal iOS SDK 2.17.0] | Details: ( { “error_description” = “Client Authentication failed”; } ).

The clientId is correct from the correct production environment and works only on Android using Capacitor and on both platforms using Cordova.

[jcesarmobile]

can you provide a sample app using the plugin?

[LACEDAPP]

App with all dependencies:
https://github.com/LACEDAPP/SampleApp

[LACEDAPP]

@jcesarmobile I think you can create your own empty template and get the same. We need PayPal so it looks like we will use Cordova instead of Capacitor. Are you going to investigate and fix it?

[jcesarmobile]

I will look into it when I have time.
But you should know the PayPal plugin and the PayPal mobile SDKs are deprecated, they recommend moving to braintree
paypal/PayPal-Cordova-Plugin#323 (comment)

[LACEDAPP]

@jcesarmobile Hello, did you have a chance to investigate it?
Because we need PayPal for our app and want to use Capacitor instead of Cordova.
And it is the main blocker for us to deploy the app on production. We can't use Braintree, because of their Acceptance Policy

Also here you can find errors from Xcode console:
objc[31275]: Class PP2FAViewController is implemented in both /Users/chornyi/Library/Developer/CoreSimulator/Devices/C018F798-9C18-4D1A-8C42-B9B8AF3963FF/data/Containers/Bundle/Application/E1E695D5-24F0-4BF6-96EE-9CB3B9A4D8B3/LacedDev.app/Frameworks/CordovaPlugins.framework/CordovaPlugins (0x109376998) and /Users/chornyi/Library/Developer/CoreSimulator/Devices/C018F798-9C18-4D1A-8C42-B9B8AF3963FF/data/Containers/Bundle/Application/E1E695D5-24F0-4BF6-96EE-9CB3B9A4D8B3/LacedDev.app/LacedDev (0x107c92238). One of the two will be used. Which one is undefined.

[jcesarmobile]

I've found 3 problems.
First of all, we weren't handling plugin.xml asset tags, that's fixed here #2728
But that should't affect you since you use @ionic-native/paypal and don't use the javascript included in that file.
Second, the plugin was crashing on iOS 11 & 12, to fix that just add this in the capacitor.config.json

"ios": {
  "cordovaLinkerFlags": ["-ObjC"]
}

With just that, the plugin stops crashing on iOS 11 & 12 and works fine.
Third, not sure why this only affects iOS 13, but the problem was the plugin has this tag in the plugin.xml <framework src="libPayPalMobile.a" />. framework tag should only be used for system frameworks, not for the paypal library. It was probably there for some bug on cordova or a bug on the plugin, but since it worked in Cordova and not in Capacitor, I've fixed it here #2729

[LACEDAPP]

@jcesarmobile
It really works, thank you!
I appreciate the time you spent.
My team is also very thankful to you!!!
Honestly, we didn't expect such a quick fix.
It will save a lot of time for us to deal with PayPal payments.

Capacitor team you are the best support I've ever experienced!

[marshall86]

I will look into it when I have time.
But you should know the PayPal plugin and the PayPal mobile SDKs are deprecated, they recommend moving to braintree
paypal/PayPal-Cordova-Plugin#323 (comment)

Considering that both ionic native paypal and braintree are not in development anymore since years now, what's the best procedure to integrate payments gateways such as paypal in Ionic?

thanks for your reply

[DwieDima]

@marshall86 I'm also dealing with this topic for quite a time and could not find a plugin that is actively maintained.
I think currently the best way is to use the javascript libraries from payment providers directly (braintree web, stripe, paypal..).
That would also mean that methods like google pay and apple pay are only possible (if so) with workarounds.

ionic has also announced "ionic payments", where they will officially support apple pay and google pay. Later also other payment methods (I guess paypal etc.)
More information will be announced this october.

But i suspect here that this will be an enterprise plugin.

[marshall86]

@marshall86 I'm also dealing with this topic for quite a time and could not find a plugin that is actively maintained.
I think currently the best way is to use the javascript libraries from payment providers directly (braintree web, stripe, paypal..).
That would also mean that methods like google pay and apple pay are only possible (if so) with workarounds.

ionic has also announced "ionic payments", where they will officially support apple pay and google pay. Later also other payment methods (I guess paypal etc.)
More information will be announced this october.

But i suspect here that this will be an enterprise plugin.

Thanks for your feedback! yes probably it will be an enterprise plugin, fair enough.

How would you integrate a method like Paypal using the javascript library?

[DwieDima]

The main difference between the native and web variant is that with the native method you have an native inAppBrowser where you authorize yourself with PayPal. With the web variant this is realized with an iFrame.
Furthermore, native input masks etc. are provided (creditcards), which you have to create yourself in some cases for the web version.

Both variants returns on success a payment nonce (string), which you use to submit the transaction for settlement in your backend.

you can directly follow the documentation of the web sdk (no need for workarounds).

In order to be able to pay, three components are always involved: the payment gateway, your backend, and your frontend.

1. Frontend --> Gateway: submit your payment credentials to gateway.
2. Gateway --> Frontend: returns a payment nonce (string)
3. Frontend --> Backend: call your API to pay and provide the payment nonce
4. Backend --> Gateway: create transaction or save vaulted payment method with nonce
5. Backend --> Frontend: send success

Now there are three (i think) ways to pay:

1. pay with checkout
   • the user must log in each time with PayPal and authorize the payment
   • use case here would be a simple shopping app
2. add a vaulted payment method
   • the user adds a payment method once and gives permission to make subsequent debits later.
   • use case here would be for example
     • a scooter sharing app, where you just click the unlock button without the need to login to paypal.
     • food ordering app
     • parking app
3. subscription models

Here you should additionally note:
if you only want to offer the simple PayPal checkout, you can directly use the PayPal service.
Vaulted payments are available at "PayPal Pro" and cost additional 30 dollars per month.
Braintree offers PayPal vaulted payments for free (uses PayPal SDK under the hood).

Overall, the payment process is not very simple, but by reading the documentation, it works quite well.
I recently integrated braintree vaulted payments into an app with the javascript sdk and it all worked as expected.

Here is a preview of how the PayPal iFrame looks inside ios:

If you're interested in a capacitor braintree plugin, the first step would be to create a proposal at capacitor community:
https://github.com/capacitor-community/proposals/issues

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.