A react native interface for integrating payments using Braintree's v.zero SDK
Switch branches/tags
Nothing to show
Clone or download
Alan Wong
Latest commit 5121bf5 Mar 30, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Screenshots added screenshot for readme Feb 1, 2016
iOS update to ios v4 + promises Mar 30, 2016
js update to ios v4 + promises Mar 30, 2016
.gitignore reorganizing folder structure Oct 20, 2015
LICENSE reorganizing folder structure Oct 20, 2015
README.md update readme Mar 30, 2016
package.json update to ios v4 + promises Mar 30, 2016
react-native-braintree.podspec update to ios v4 + promises Mar 30, 2016

README.md

react-native-braintree

A react native interface for integrating payments using Braintree's v.zero SDK. Accepts Credit/Debit Cards

Sample

Full Client + Server sample can be found here: https://github.com/alawong/BTRNSample

Usage

Setup

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

You can find a demo client token here.

Show Payment Screen

v.zero

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

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:

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

One Touch

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) Register URL Scheme

  2. Use setupWithURLScheme instead, passing the url scheme you have registered in previous step

var BTClient = require('react-native-braintree');
BTClient.setupWithURLScheme(<token>, <url scheme>);
  1. Add this delegate method (callback) to your AppDelegate.m
#import <RNBraintree.h>

- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
  return [[RNBraintree sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
  1. Optionally, install the fake PayPal wallet app in your simulator to simulate and test responses

Installation

  1. react-native init BTRNSample (skip for existing projects)
  2. Run npm install react-native-braintree --save to add the package
  3. Inside the ios/ directory, create a Podfile:
# Podfile for cocoapods 1.0
source 'https://github.com/CocoaPods/Specs.git'
target 'yourAppTarget' do
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'RCTImage',
    'RCTNetwork',
    'RCTText',
    'RCTWebSocket'
  ]
  pod 'react-native-braintree', :path => '../node_modules/react-native-braintree'
end

Or if you use an older CocoaPods version:

source 'https://github.com/CocoaPods/Specs.git'
pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket'
]
pod 'react-native-braintree', :path => '../node_modules/react-native-braintree'
  1. Run pod install. This installs the Braintree iOS SDK and a new workspace is created.

  2. Open BTRNSample.xcworkspace

  3. Under your app target -> build settings, look for Other Linker Flags and add $(inherited)

Accepts Credit/Debit Cards

  1. Build and run project! If it fails the first time, clean and rebuild.

Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the React, RCTImage, etc. subprojects from your app's Xcode project.

Remove Libraries

Requirements

Tested with:

  • Node 4.1.0
  • npm 2.14.3
  • react-native 0.8.0

License

react-native-braintree is available under the MIT license. See the LICENSE file for more info.