React Native library that implements PayPal Checkout flow using purely native code
npm install react-native-paypal
!npm

React Native library that implements PayPal Checkout flow using purely native code.
!Demo
$ npm install react-native-paypal --save or $ yarn add react-native-paypal
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.
1. [Android] Add implementation "com.braintreepayments.api:braintree:3.+" and implementation "com.braintreepayments.api:data-collector:3.+" in android/app/build.gradle.
1. [iOS] Add pod 'Braintree', '~> 4' and pod 'Braintree/DataCollector' to your Podfile.
1. [iOS] Run pod install
1. [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.
1. [iOS] Edit your AppDelegate.m as follows:
``objc
#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
{
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.
#### iOS
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]node_modules
1. Go to ➜ react-native-paypal and add RNPaypal.xcodeprojlibRNPaypal.a
1. In XCode, in the project navigator, select your project. Add to your project's Build Phases ➜ Link Binary With Libraries$(SRCROOT)/../node_modules/react-native-paypal/ios
1. In XCode, in the project navigator, select your project. Add to your project's Build Settings ➜ Header Search Paths
#### Android
1. Open up android/app/src/main/java/[...]/MainApplication.javaimport com.smarkets.paypal.RNPaypalPackage;
- Add to the imports at the top of the filenew RNPaypalPackage()
- Add to the list returned by the getPackages() methodandroid/settings.gradle
1. Append the following lines to :`
`
include ':react-native-paypal'
project(':react-native-paypal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paypal/android')
android/app/build.gradle
1. Insert the following lines inside the dependencies block in :`
`
implementation project(':react-native-paypal')
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.
`javascript
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',
}
);
// For device data collection see: https://developers.braintreepayments.com/guides/advanced-fraud-management-tools/device-data-collection/
const { deviceData } = await requestDeviceData(token);
`
. You will need to create one if none existsBackend implementation
For an overview of the braintree payment flow see https://developers.braintreepayments.com/start/overviewThis 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