react-native-paypal

React Native library that implements PayPal Checkout flow using purely native code.

Getting started

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

Mostly automatic installation

1. $ react-native link react-native-paypal. 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:braintree:2.17.0" in android/app/build.gradle.
3. [iOS] Add pod 'Braintree', '~> 4.19.0' to your Podfile.
4. [iOS] Change the RNPaypal entry in your Podfile to pod 'RNPaypal', :path => '../node_modules/react-native-paypal/ios'
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.

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-paypal and add RNPaypal.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNPaypal.a to your project's Build Phases ➜ Link Binary With Libraries
4. In XCode, in the project navigator, select your project. Add $(SRCROOT)/../node_modules/react-native-paypal/ios to your project's Build Settings ➜ Header Search Paths

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.smarkets.paypal.RNPaypalPackage; to the imports at the top of the file
• Add new RNPaypalPackage() to the list returned by the getPackages() method

1. Append the following lines to android/settings.gradle:

   include ':react-native-paypal'
   project(':react-native-paypal').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-paypal/android')

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

   implementation project(':react-native-paypal')

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'; 

// 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',
  }
);