Ionic Braintree Tutorial

Ionic Framework
1

Hi all,

has anyone successfully integrated Braintree on his Ionic (preferably iOS) app?
I’m really confused what I need and how to setup everything correctly.

My main goal is using PayPal with Braintree since the PayPal Cordova Plugin uses UiWebView which won’t be accepted by Apple starting from April.

What I have done so far:

  1. Install Braintree Ionic and Cordova plugin (https://ionicframework.com/docs/native/braintree)
  2. Setup Braintree account, setup Braintree sandbox account
  3. Insert PayPal Sandbox credentials in my Braintree account under “Processing Options”
  4. Insert and setup the sample code from https://ionicframework.com/docs/native/braintree

I can run the Ionic app and also process a sample checkout via credit card.
Although if I click on “PayPal” instead choosing the credit card option, I always get the error message: PayPal app switch is missing a returnURLScheme.

I really don’t know how to fix that, I already checked Google, Stackoverflow but didn’t found the issue. Something seems to be missing in my config but I don’t know what.

Thank you in advance for any help!

2

I’d highly suggest looking at the main repo for the plugin

There’s probably more information there.

3

Register a URL type

  1. In Xcode, click on your project in the Project Navigator and navigate to App Target > Info > URL Types
  2. Click [+] to add a new URL type
  3. Under URL Schemes , enter your app switch return URL scheme. This scheme must start with your app’s Bundle ID and be dedicated to Braintree app switch returns . For example, if the app bundle ID is com.your-company.Your-App , then your URL scheme could be com.your-company.Your-App.payments .

IMPORTANT

If you have multiple app targets, be sure to add the return URL type for all of the targets.

Testing the URL type

You can test out your new URL scheme by opening up a URL that starts with it (e.g. com.your-company.Your-App.payments://test ) in Mobile Safari on your iOS Device or Simulator.

In addition, always test your app switching on a real device.

Update your application delegate

In your AppDelegate’s application:didFinishLaunchingWithOptions: implementation, use setReturnURLScheme: with the value you set above.

#import “AppDelegate.h”
#import “BraintreeCore.h”

@implementation AppDelegate

  • (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [BTAppSwitch setReturnURLScheme:@“com.your-company.Your-App.payments”];
    return YES;
    }

hen in your application delegate, pass the payment authorization URL to Braintree for finalization:

Objective-CSwift

Copy

Copied

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
    if ([url.scheme localizedCaseInsensitiveCompare:@"com.your-company.Your-App.payments"] == NSOrderedSame) {
        return [BTAppSwitch handleOpenURL:url options:options];
    }
    return NO;
}
4

unfortunately there is a huge problem: the plugin uses deprecated API (UIWebview) and when submitting an app to the apple store, it’s no longer accepted.
They should upgrade with the latest versions.

I’ve tried 2-3 other forks but they are not working on iOS.

5

Hey there,
this old Braintree Plugin is maintained anymore and don’t uses the latest mobile SDK’s.
I created a new one, please read this to get known how to test it and support me in developing:

6

hello and thank you for the update!

'?

One question: my backend and my fronted are already written, I used it with the old braintree cordova plugin, do I need to write them again or to modify them?

Can I just install your plugin and testing it ?

Francesco

7

In the best Case: No. Try follow my Install Guide. If something doesn’t work like before or you are missing something, open an Issue in the Repo :blush:

8

I was able to install it but i cant make it work :tired_face:
Do you have an example of code?

Because the code I used with the old plugin no longer works.

Maybe I’m doing something wrong

9

Please open an Issue in the Repo and describe what do you mean with cant make it work

10

Have you found any solution to this? Is it possible to use Braintree in the Ionic app?

11

Hi,
Can your plugin replace PayPal Cordova Plugin to have PayPal as an option in the Ionic app?
Does it support all the features from Braintree? (e.g PayPal, Credit Card, Apple Pay, Google Pay)