Skip to content

generalomosco/react-native-braintree-xplat

This branch is up to date with kraffslol/react-native-braintree-xplat:master.

Folders and files

NameName
Last commit message
Last commit date
Dec 19, 2017
Jun 27, 2016
Dec 19, 2017
Jun 18, 2016
Sep 2, 2016
Jun 18, 2016
Dec 20, 2017
Dec 19, 2017
Dec 19, 2017
Dec 1, 2017
Dec 1, 2017
Dec 1, 2017

Repository files navigation

react-native-braintree-xplat

npm version

An effort to merge react-native-braintree and react-native-braintree-android

iOS Installation

You can use the React Native CLI to add native dependencies automatically:

$ react-native link

or do it manually as described below:

  1. Run npm install react-native-braintree-xplat --save
  2. Open your project in XCode, right click on Libraries and click Add Files to "Your Project Name" Look under node_modules/react-native-braintree-xplat and add RCTBraintree.xcodeproj.
  3. Add libRCTBraintree.a to Build Phases -> Link Binary With Libraries
  4. Done!

Android Installation

Run npm install react-native-braintree-xplat --save

RN 0.29 and over

In android/settings.gradle

...

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

In android/app/build.gradle

...

dependencies {
    ...

    compile project(':react-native-braintree-xplat')
}

Register module (in MainApplication.java)

import com.pw.droplet.braintree.BraintreePackage; // <--- Import Package
import android.content.Intent; // <--- Import Intent

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
      return mReactNativeHost;
  }
}

RN 0.28 and under

In android/settings.gradle

...

include ':react-native-braintree-xplat'
project(':react-native-braintree-xplat').projectDir = file('../node_modules/react-native-braintree-xplat/android')

In android/app/build.gradle

...

dependencies {
    ...

    compile project(':react-native-braintree-xplat')
}

Register module (in MainActivity.java)

import com.pw.droplet.braintree.BraintreePackage; // <--- Import Package
import android.content.Intent; // <--- Import Intent

public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "example";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new BraintreePackage() // <---  Initialize the Package
        );
    }
}

Usage

Setup

var BTClient = require('react-native-braintree-xplat');
BTClient.setup(<token>);

You can find a demo client token here.

Show Payment Screen (Android & iOS)

v.zero

BTClient.showPaymentViewController(options).then(function(nonce) {
  //payment succeeded, pass nonce to server
})
.catch(function(err) {
  //error handling
});

Options

  • [iOS] bgColor - Background color for the view.
  • [iOS] tintColor - Tint color for the view.
  • [iOS] barBgColor - Background color for the navbar.
  • [iOS] barTintColor - Tint color for the navbar.
  • [iOS] callToActionText - Text for call to action button. (Works for both Android and iOS)
  • threeDSecure - If you want to enable 3DSecure, pass an object with an amount key that takes a number value

Example:

const options = {
  bgColor: '#FFF',
  tintColor: 'orange',
  callToActionText: 'Save',
  threeDSecure: {
    amount: 1.0
  }
}

PayPal only

BTClient.showPayPalViewController().then(function(nonce) {
  //payment succeeded, pass nonce to server
})
.catch(function(err) {
  //error handling
});

Custom Integration

If you only want to tokenize credit card information, you can use the following:

const card = {
  number: "4111111111111111",
  expirationDate: "10/20", // or "10/2020" or any valid date
  cvv: "400",
}

BTClient.getCardNonce(card).then(function(nonce) {
  //payment succeeded, pass nonce to server
})
.catch(function(err) {
  //error handling
});

// Full list of card parameters:
type Card = {
  number: string,
  cvv: string,
  expirationDate: string,
  cardholderName: string,
  firstName: string,
  lastName: string,
  company: string,
  countryName: string,
  countryCodeAlpha2: string,
  countryCodeAlpha3: string,
  countryCodeNumeric: string,
  locality: string,
  postalCode: string,
  region: string,
  streetAddress: string,
  extendedAddress: string,
}

One Touch on iOS

To take advantage of One Touch, there are additional setup required:

  1. Register a URL scheme in Xcode (should always start with YOUR Bundle ID) More info here TL;DR

Add CFBundleURLTypes to Info.Plist

	<key>CFBundleURLTypes</key>
	<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLName</key>
		<string>your.bundle.id</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<string>your.bundle.id.payments</string>
		</array>
	</dict>
	</array>

WhiteList

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>
  1. For iOS: Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
var BTClient = require('react-native-braintree');
BTClient.setupWithURLScheme(token, 'your.bundle.id.payments');

For xplat, you can do something like this:

 if (Platform.OS === 'ios') {
      BTClient.setupWithURLScheme(token, 'your.bundle.id.payments');
  } else {
      BTClient.setup(token);
  }
  1. Add this delegate method (callback) to your AppDelegate.m
#import "RCTBraintree.h"

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [[RCTBraintree sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}

Credits

Big thanks to @alanhhwong and @surialabs for the original ios & android modules.

About

Cross-platform Braintree module for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 79.4%
  • Swift 13.4%
  • C 5.0%
  • Ruby 1.0%
  • Java 0.5%
  • JavaScript 0.5%
  • Other 0.2%