react-native-paypal-reborn

General

It is a fork from React Native Paypal

React Native library that implements PayPal Checkout Flows using purely native code. for IOS and Android devices

iOS Implementation uses iOS v5 SDK and provides such actions as :

- Checkout with Vault Checkout

- Checkout with PayPal Checkout

Android Implementation uses Android v4 SDK and provides such actions as :

- Checkout with Vault Checkout

- Checkout with PayPal Checkout

Getting started

$ npm install react-native-paypal-reborn --save or $ yarn add react-native-paypal-reborn

Mostly automatic installation

1. $ react-native link react-native-paypal-reborn. Check the result, if iOS and/or Android project files are unchanged, do the steps described in Manual installation.

2. [Android] Add implementation "com.braintreepayments.api:paypal:4.41.0" in android/app/build.gradle.

3. [Android] Add below intent-filter to your application activity in android/app/src/main/AndroidManifest.xml file.

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

4. [iOS] Add pod 'Braintree', '~> 5' to your Podfile.

5. [iOS] Run pod install

6. [iOS] Register a URL scheme in Xcode (must always start with your Bundle Identifier and end in .payments - e.g. your.app.id.payments). See details here.

7. [iOS] Edit your AppDelegate.m as follows:

   #import "RNPaypal.h"
   
   - (BOOL)application:(UIApplication *)application
     didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     [[RNPaypal sharedInstance] configure];
   }
   
   // if you support only iOS 9+, add the following method
   - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
   {
     return [[RNPaypal sharedInstance] application:application openURL:url options:options];
   }
   
   // otherwise, if you support iOS 8, add the following method
   - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
     sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
   {
     return [[RNPaypal sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
   }
   

At this point you should be able to build both Android and iOS.

Extra setup step

If your application ID has underscores in it (e.g. com.example_app), an additional setup step is required. Otherwise, you can skip this section.

Inside ApplicationManifest.xml, specify the android:scheme to be your application id without underscores and .braintree appended to it:

<activity android:name="...your app 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="com.exampleapp.braintree" />
  </intent-filter>
    ...
</activity>

Usage

First you need to get a valid token from your server. Refer to this.

Then you can execute the following code, for example reacting to a button press.

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

// For one time payments
const { nonce, payerId, email, firstName, lastName, phone } =
  await requestOneTimePayment(token, {
    amount: "5", // required
    // any PayPal supported currency (see here: https://developer.paypal.com/docs/integration/direct/rest/currency-codes/#paypal-account-payments)
    currency: "GBP",
    // any PayPal supported locale (see here: https://braintree.github.io/braintree_ios/Classes/BTPayPalRequest.html#/c:objc(cs)BTPayPalRequest(py)localeCode)
    localeCode: "en_GB",
    shippingAddressRequired: false,
    userAction: "commit", // display 'Pay Now' on the PayPal review page
    // one of 'authorize', 'sale', 'order'. defaults to 'authorize'. see details here: https://developer.paypal.com/docs/api/payments/v1/#payment-create-request-body
    intent: "authorize",
  });

// For vaulting paypal account see: https://developers.braintreepayments.com/guides/paypal/vault
const { nonce, payerId, email, firstName, lastName, phone } =
  await requestBillingAgreement(token, {
    billingAgreementDescription: "Your agreement description", // required
    // any PayPal supported currency (see here: https://developer.paypal.com/docs/integration/direct/rest/currency-codes/#paypal-account-payments)
    currency: "GBP",
    // any PayPal supported locale (see here: https://braintree.github.io/braintree_ios/Classes/BTPayPalRequest.html#/c:objc(cs)BTPayPalRequest(py)localeCode)
    localeCode: "en_GB",
  });

// For device data collection see: https://developers.braintreepayments.com/guides/advanced-fraud-management-tools/device-data-collection/
const { deviceData } = await requestDeviceData(token);

Creating/Finding client token

Note that the client token should be served via a backend service but can be hardcoded:

1. Go to https://www.braintreegateway.com or https://sandbox.braintreegateway.com/ and login or create an account
2. Click the gear at the top and select to API
3. You can find your token under Tokenization Keys. You will need to create one if none exists

Backend implementation

For an overview of the braintree payment flow see https://developers.braintreepayments.com/start/overview

This library covers the client setup here: https://developers.braintreepayments.com/start/hello-client

It does NOT however cover the server portion here: https://developers.braintreepayments.com/start/hello-server

You will need the server portion in order to complete your transactions. See a simple example of this server in /exampleServer. The example app is pointed to this on default

Troubleshooting

• Check native code logs (in xCode for iOS or adb logcat *:E for Android). These may give additional information about issues
• Try comparing your app implementation to the example app. It may help you find a step you missed. If you experience any issues with the example app or instructions missing from the Readme, please open an issue (or fix with a PR :))