A react native interface for integrating payments using Braintree's v.zero SDK.
Full Client + Server sample can be found here: https://github.com/alawong/BTRNSample
var BTClient = require('react-native-braintree');
BTClient.setup(<token>);
You can find a demo client token here.
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
});
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
});
To take advantage of One Touch, there are additional setup required:
-
Register a URL scheme in Xcode (should always start with your Bundle ID)
-
Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
var BTClient = require('react-native-braintree');
BTClient.setupWithURLScheme(<token>, <url scheme>);
- 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];
}
- Optionally, install the fake PayPal wallet app in your simulator to simulate and test responses
react-native init BTRNSample
(skip for existing projects)- Run
npm install react-native-braintree --save
to add the package - 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'
-
Run
pod install
. This installs the Braintree iOS SDK and a new workspace is created. -
Open
BTRNSample.xcworkspace
-
Under your app target -> build settings, look for
Other Linker Flags
and add$(inherited)
- 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.
Tested with:
- Node 4.1.0
- npm 2.14.3
- react-native 0.8.0
react-native-braintree is available under the MIT license. See the LICENSE file for more info.