react-native-paypal-all

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

Usage no npm install needed!

<script type="module">
  import reactNativePaypalAll from 'https://cdn.skypack.dev/react-native-paypal-all';
</script>

README

react-native-paypal-all

Getting started

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

Mostly automatic installation

  1. $ react-native link react-native-paypal-all. 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' to your Podfile and run pod install. If you want, you can specify a version, e.g. pod 'Braintree', '~> 4.19.0'.
  4. [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.
  5. [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 LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-paypal-all and add RNPaypal.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNPaypal.a to your project's Build PhasesLink Binary With Libraries
  4. In XCode, in the project navigator, select your project. Add $(SRCROOT)/../node_modules/react-native-paypal-all/ios to your project's Build SettingsHeader 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-all'
    project(':react-native-paypal-all').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-paypal-all/android')
    
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
      implementation project(':react-native-paypal-all')
    

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 } from 'react-native-paypal-all';

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