Repository files navigation

React Native library that implements PayPalCheckout flow using purely native code.

$ 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.
2. [Android] Addimplementation "com.braintreepayments.api:braintree:3.+" andimplementation "com.braintreepayments.api:data-collector:3.+" inandroid/app/build.gradle.
3. [iOS] Addpod 'Braintree', '~> 4' andpod 'Braintree/DataCollector' to your Podfile.
4. [iOS] Runpod install
5. [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 detailshere.
6. [iOS] Edit yourAppDelegate.m as follows:

   #import"RNPaypal.h"- (BOOL)application:(UIApplication *)application   didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{  [[RNPaypalsharedInstance]configure];}// if you support only iOS 9+, add the following method- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url  options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{return [[RNPaypalsharedInstance]application:applicationopenURL:urloptions: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 [[RNPaypalsharedInstance]application:applicationopenURL:urlsourceApplication:sourceApplicationannotation:annotation];}

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

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.

InsideApplicationManifest.xml add aBraintreeBrowserSwitchActivity. Specify theandroid:scheme to be your application id without underscores and.braintree appended to it:

<activityandroid:name="com.braintreepayments.api.BraintreeBrowserSwitchActivity"android:launchMode="singleTask">  <intent-filter>      <actionandroid:name="android.intent.action.VIEW" />      <categoryandroid:name="android.intent.category.DEFAULT" />      <categoryandroid:name="android.intent.category.BROWSABLE" />      <dataandroid:scheme="com.exampleapp.braintree" />  </intent-filter></activity>

1. In XCode, in the project navigator, right clickLibraries ➜Add Files to [your project's name]
2. Go tonode_modules ➜react-native-paypal and addRNPaypal.xcodeproj
3. In XCode, in the project navigator, select your project. AddlibRNPaypal.a to your project'sBuild 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'sBuild Settings ➜Header Search Paths

1. Open upandroid/app/src/main/java/[...]/MainApplication.java

• Addimport com.smarkets.paypal.RNPaypalPackage; to the imports at the top of the file
• Addnew RNPaypalPackage() to the list returned by thegetPackages() method

1. Append the following lines toandroid/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 inandroid/app/build.gradle:

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

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

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

import{requestOneTimePayment,requestBillingAgreement}from'react-native-paypal';// For one time paymentsconst{nonce,payerId,email,firstName,lastName,phone}=awaitrequestOneTimePayment(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-bodyintent:'authorize',});// For vaulting paypal account see: https://developers.braintreepayments.com/guides/paypal/vaultconst{nonce,payerId,email,firstName,lastName,phone}=awaitrequestBillingAgreement(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}=awaitrequestDeviceData(token);

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

1. Go tohttps://www.braintreegateway.com orhttps://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 underTokenization Keys. You will need to create one if none exists

For an overview of the braintree payment flow seehttps://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

• Check native code logs (in xCode for iOS oradb 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 :))