React Native library that implements PayPal Checkout flow using purely native code
React Native library that implements PayPal Checkout flow using purely native code.
$ npm install react-native-paypal --save
or $ yarn add react-native-paypal
$ 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.implementation "com.braintreepayments.api:braintree:3.+"
and implementation "com.braintreepayments.api:data-collector:3.+"
in android/app/build.gradle
.pod 'Braintree', '~> 4'
and pod 'Braintree/DataCollector'
to your Podfile.pod install
.payments
- e.g. your.app.id.payments
). See details here.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.
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
add a BraintreeBrowserSwitchActivity
. Specify the android:scheme
to be your application id without underscores and .braintree
appended to it:
<activity android:name="com.braintreepayments.api.BraintreeBrowserSwitchActivity"
android:launchMode="singleTask">
<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>
Libraries
➜ Add Files to [your project's name]
node_modules
➜ react-native-paypal
and add RNPaypal.xcodeproj
libRNPaypal.a
to your project's Build Phases
➜ Link Binary With Libraries
$(SRCROOT)/../node_modules/react-native-paypal/ios
to your project's Build Settings
➜ Header Search Paths
android/app/src/main/java/[...]/MainApplication.java
import com.smarkets.paypal.RNPaypalPackage;
to the imports at the top of the filenew RNPaypalPackage()
to the list returned by the getPackages()
methodandroid/settings.gradle
:
include ':react-native-paypal'
project(':react-native-paypal').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-paypal/android')
android/app/build.gradle
:
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.
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);
Note that the client token should be served via a backend service but can be hardcoded:
Tokenization Keys
. You will need to create one if none existsFor 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
adb logcat *:E
for Android). These may give additional information about issues