react-native-braintree-vzero

npm module for react-native apps to integrate Braintree v.zero SDK.

Example

https://github.paypal.com/ProfessionalServiceEngineering/react-native-braintree-vzero/tree/master/BraintreeDemo

iOS

Installation

1. react-native init BraintreeDemo (skip for existing projects)

2. Run npm install react-native-braintree-vzero --save to add the package

3. Run rnpm link (First run npm install rnpm -g if you don't have rnpm already)

   or

   Use manual instructions under Linking Libraries https://facebook.github.io/react-native/docs/linking-libraries-ios.html

4. Create a group called Frameworks and add the Braintree iOS frameworks from $(SRCROOT)/../node_modules/react-native-braintree-vzero/ios path.

5. Go to General -> Embedded Binaries and add the Braintree iOS frameworks from the Frameworks group created from above step.

6. Make sure Other Linker Flags has $(inherited), -ObjC and -lc++.

7. Add $(SRCROOT)/../node_modules/react-native-braintree-vzero/ios under Framework Search Paths.

8. If your app is built using iOS 9 as its Base SDK, then you must add URLs to a whitelist in your app's info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>com.paypal.ppclient.touch.v1</string>
  <string>com.paypal.ppclient.touch.v2</string>
  <string>com.venmo.touch.v2</string>
</array>

9. Skip if you don't need PayPal and/or One Touch. There are two choices we can adapt for URLSchemes. For now, we'll stick to the one recommended by official Braintree iOS setup guidelines. Goto Info -> URL Types and add org.your.bundle.indentifier.payments and below lines to AppDelegate.m of your iOS project.

#import <BraintreeCore/BraintreeCore.h>

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...

  [BTAppSwitch setReturnURLScheme:@"org.your.bundle.indentifier.payments"];

  ...
}

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
  if ([url.scheme localizedCaseInsensitiveCompare:@"org.your.bundle.indentifier.payments"] == NSOrderedSame) {
    return [BTAppSwitch handleOpenURL:url sourceApplication:sourceApplication];
  }
  return NO;
}

Usage

CommonJS

var BraintreeClient = require('react-native-braintree-vzero');

ES6

import BraintreeClient from 'react-native-braintree-vzero';

Initializing Braintree client

var clientToken = 'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiI2YWRjN2YwZTY1MjkwYWY1YjIxZDBmYmFjYjMzNjdjMzE3MTAyOGEwNmJmNjA1NDkwMmNkOWRkOTlkMDdmNjg5fGNyZWF0ZWRfYXQ9MjAxNi0xMC0yOFQwMTo0OTo1NS4yNDQ5NjM0NDIrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0=';

BraintreeClient.initWithAuthorization(clientToken, function(result) {
  if(result == true){
    // Braintree client initialization with the client token successful
    // Call the Drop-In view
  }
  else{
    // The initialization failed
  }
});

Presenting Braintree Drop-In UI

var options = {
  bgColor: processColor('yellow'),
  tintColor: processColor('red'),
  barBgColor: processColor('green'),
  barTintColor: processColor('white'),
  paymentControllertitle: 'Pay with Braintree v.zero',
  submitButtonTitle: 'Pay'
};

BraintreeClient.dropInViewController(options, function(err, nonce) {

  if(err){
    // Check if there was an error
  }
  else{
    // Check if nonce is null, if not use it to complete the  transaction
  }

});

Presenting PayPal UI

BraintreeClient.payPalViewController(function(err, nonce) {

  if(err){
    // Check if there was an error
  }
  else{
    // Check if nonce is null, if not use it to complete the  transaction
  }

});

Get card nonce for Custom Credit Card UI

var credtCardNumber = '4111111111111111', expMonth = '12', expYear = '2020', cvvNumber = '123';

BraintreeClient.getCardNonce(credtCardNumber, expMonth, expYear, cvvNumber, function(err, nonce) {

  if(err){
    // Check if there was an error
  }
  else{
    // Check if nonce is null, if not use it to complete the  transaction
  }

});

Android

Installation

1. react-native init BraintreeDemo (skip for existing projects)

2. Run npm install react-native-braintree-vzero --save to add the package

3. Add the following to android/settings.gradle

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

4. Add the following to android/app/build.gradle

dependencies {
  // ...
  compile project(':react-native-braintree-vzero')
  // ...
}

5. Edit android/src/.../MainApplication.java

// ...
import com.paypal.mitesh.braintree.BraintreePackage; // <--- Import Package
import android.content.Intent; // <--- Import Intent
// ..

// ..

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
					new BraintreePackage() // <---  Initialize the Package
      );
    }

  };

// ..

6. Browser switch setup

For PayPal a URL scheme must be defined to accept return browser switches.

Edit your AndroidManifest.xml to include BraintreeBrowserSwitchActivity and set the android:scheme:

<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="${applicationId}.braintree" />
    </intent-filter>
</activity>

Usage

CommonJS

var BraintreeClient = require('react-native-braintree-vzero');

ES6

import BraintreeClient from'react-native-braintree-vzero';

Initializing Braintree client

var clientToken = 'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiI2YWRjN2YwZTY1MjkwYWY1YjIxZDBmYmFjYjMzNjdjMzE3MTAyOGEwNmJmNjA1NDkwMmNkOWRkOTlkMDdmNjg5fGNyZWF0ZWRfYXQ9MjAxNi0xMC0yOFQwMTo0OTo1NS4yNDQ5NjM0NDIrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0=';

BraintreeClient.setup(clientToken)
.then(function(success) {

  // Braintree client was successfully setup. Now use a drop-in, PayPal or custom credit card fields to complete payment

})
.catch(function(err) {

  // Braintree client no was successfully setup.

});

Presenting Braintree Drop-In UI

BraintreeClient.showPaymentViewController(/*callToActionText*/"Pay")
.then(function(nonce) {

  // Pass nonce to server

})
.catch(function(err) {

  //error handling

});

Presenting PayPal UI

BraintreeClient.paypalRequest()
.then(function(nonce) {

  // Pass nonce to server

})
.catch(function(err) {

  //error handling

});

Get card nonce for Custom Credit Card UI

BraintreeClient.getCardNonce(/*credtCardNumber*/"4111111111111111", /*expirationMonth*/"10", /*expirationYear*/"20",/*cvvNumber*/"123")
.then(function(nonce) {

  // Pass nonce to server

}).catch(function(err) {

  //error handling

});

References

iOS: https://github.com/alanhhwong/react-native-braintree

Android: https://github.com/kraffslol/react-native-braintree-xplat

iOS and Android merged package: https://github.com/kraffslol/react-native-braintree-xplat