react-native-paypal-reborn v2.1.1

react-native-paypal-reborn

Important Information

Please note that, 2.0.0 version of the library is rewritten from the scratch using Kotlin (previously Java) and Swift (previously Objective-C) to prepare the whole codebase to migrate it into expo package at some point. If you find any problem or issue in the package do not hesitate and report it via Issue panel.

1.1.0 is stable and well checked version, if you do not need to use v6 IOS Braintree SDK, or have some lower version of minimum (Android or IOS) SDK please user versions 1.x.x.

Getting started

React Native Paypal Reborn package is a pure native implementation of Braintree SDK https://developer.paypal.com/braintree/docs/start/overview

Integration

Expo Based Project (expo SDK 50) (Alpha)

From version 2.1.0 of the package, react-native-paypal-reborn added a possibility to use the package into expo based project, without need to eject from the expo. Special expo plugin was added into the source of the package which can be used. in any expo project.

Expo based project needs minimum integration from the app perspective. In Your app.config.ts or app.config.json or app.config.js please add react-native-paypal-reborn plugin into plugins section.

...
  plugins: [
    [
      "react-native-paypal-reborn",
      {
        xCodeProjectAppName: "xCodeProjectAppName",
      },
    ],
...

xCodeProjectAppName - Name of your xCode project in case of example app in this repository it will be PaypalRebornExample

Android Specific

Currently expo-plugin written for making changes into Android settings files, using non danger modifiers from expo-config-plugins

iOS Specific

Currently expo-plugin written for making changes into IOS settings files, using one danger modifier from expo-config-plugins called withAppDelegate

React Native Bare Project (react-native-cli)

Android Specific

In Your AndroidManifest.xml, android:allowBackup="false" can be replaced android:allowBackup="true", it is responsible for app backup.

Also, add this intent-filter to your main activity in AndroidManifest.xml

<activity>
    ...
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="${applicationId}.braintree" />
    </intent-filter>
</activity>

iOS Specific

cd ios
pod install

Configure a new URL scheme

Add a bundle url scheme {BUNDLE_IDENTIFIER}.braintree in your app Info via XCode or manually in the Info.plist. In your Info.plist, you should have something like:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>CFBundleURLName</key>
        <string>com.myapp</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>com.myapp.braintree</string>
        </array>
    </dict>
</array>

Update your code

From version 2.0.0 of the react-native-paypal-reborn, for the IOS part of the setup there is need to make few more additional steps to integrate the library into your project. The reason is that Braintree SDk from version v6, reimplement all the IOS resources to use swift. Because of that we not longer can use Braintree Header files into AppDelegate.m file. And we need to create our own swift wrapper that can be accessible in AppDelegate.m file.

• Open your React Native ios Project in xCode
• Create PaypalRebornConfig.swift in your project, while creating the .swift file xCode will ask if you want to automatically create your {AppName}-Bridging-Header.h - Allow that
• Put following content into PaypalRebornConfig.swift

import Braintree
import Foundation

@objc public class PaypalRebornConfig: NSObject {

  @objc(configure)
  public static func configure() {
    BTAppContextSwitcher.sharedInstance.returnURLScheme = self.getPaymentUrlScheme()
  }

  @objc(getPaymentUrlScheme)
  public static func getPaymentUrlScheme() -> String {
    let bundleIdentifier = Bundle.main.bundleIdentifier ?? ""
    return bundleIdentifier + ".braintree"
  }

  @objc(handleUrl:)
  public static func handleUrl(url: URL) -> Bool {
    return BTAppContextSwitcher.sharedInstance.handleOpen(url)
  }
}

• Update Content of you AppDelegate.m

#import "{AppName}}-Swift.h"
#import <React/RCTLinkingManager.h>

...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [PaypalRebornConfig configure];
}

- (BOOL)application:(UIApplication *)application
            openURL:(NSURL *)url
            options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {

    if ([url.scheme localizedCaseInsensitiveCompare:[PaypalRebornConfig getPaymentUrlScheme]] == NSOrderedSame) {
        return [PaypalRebornConfig handleUrl:url];
    }
    
    return [RCTLinkingManager application:application openURL:url options:options];
}

The same steps are already implemented into example app, if you have any issues please check it.

Usage

Request One Time Payment

import {
  requestOneTimePayment,
} from "react-native-paypal-reborn";

const result: BTPayPalAccountNonceResult | BTPayPalError  = await requestOneTimePayment({
    clientToken: 'Token',
    amount: '5.0',
    currencyCode: 'USD'
    })

Card tokenization

import {
  tokenizeCard,
} from "react-native-paypal-reborn";

const result: BTCardTokenizationNonceResult | BTPayPalError = await tokenizeCard({
    clientToken: 'Token,
    number: '1111222233334444',
    expirationMonth: '11',
    expirationYear: '24',
    cvv: '123',
    postalCode: '',
    })

Request PayPal billing agreement

import {
  requestBillingAgreement,
} from "react-native-paypal-reborn";

const result: BTPayPalAccountNonceResult | BTPayPalError  = await requestBillingAgreement({
    clientToken: 'Token',
    billingAgreementDescription: 'Description,
    localeCode: 'en-US'
    })
    .then(result => console.log(result))
    .catch((error) => console.log(error));

Call Data Collector and get correlation id

import {
  getDeviceDataFromDataCollector,
} from "react-native-paypal-reborn";

const result: string = await getDeviceDataFromDataCollector("Token")

TODO

• Add Missing Methods from Braintree SDK ApplePay, Google Pay, 3D
• Based on swift and kotlin implementation create expo working version library