Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alanhhwong/react-native-braintree
A react native interface for integrating payments using Braintree's v.zero SDK
https://github.com/alanhhwong/react-native-braintree
Last synced: 3 months ago
JSON representation
A react native interface for integrating payments using Braintree's v.zero SDK
- Host: GitHub
- URL: https://github.com/alanhhwong/react-native-braintree
- Owner: alanhhwong
- License: mit
- Created: 2015-10-05T06:53:48.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-06T03:04:52.000Z (over 4 years ago)
- Last Synced: 2024-04-14T01:51:15.801Z (7 months ago)
- Language: Objective-C
- Homepage:
- Size: 26.2 MB
- Stars: 112
- Watchers: 5
- Forks: 18
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-braintree ★104 - A react native interface for integrating payments using Braintree's v.zero SDK (currently iOS only) (Components / Integrations)
README
# react-native-braintree
A react native interface for integrating payments using [Braintree's v.zero SDK](https://developers.braintreepayments.com/start/overview).
## Sample
Full Client + Server sample can be found here:
[https://github.com/alawong/BTRNSample](https://github.com/alawong/BTRNSample)
## Usage
### Setup
```js
var BTClient = require('react-native-braintree');
BTClient.setup();
```
You can find a demo client token [here](https://developers.braintreepayments.com/start/hello-client/ios/v3).
### Show Payment Screen
v.zero
```js
BTClient.showPaymentViewController().then(function(nonce) {
//payment succeeded, pass nonce to server
})
.catch(function(err) {
//error handling
});
```
PayPal only
```js
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:
```js
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](https://developers.braintreepayments.com/guides/one-touch/overview/ios/v3), there are additional setup required:
1. Register a URL scheme in Xcode (should always start with your Bundle ID)
2. Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
```js
var BTClient = require('react-native-braintree');
BTClient.setupWithURLScheme(, );
```
3. Add this delegate method (callback) to your AppDelegate.m
```objc
#import
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [[RNBraintree sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}
```
4. Optionally, install the [fake PayPal wallet app](https://github.com/braintree/fake-wallet-app-ios) 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:
```ruby
# 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:
```ruby
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'
```
4. Run `pod install`. This installs the Braintree iOS SDK and a new workspace is created.
5. Open `BTRNSample.xcworkspace`
6. Under your app target -> build settings, look for `Other Linker Flags` and add `$(inherited)`
7. 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.
## 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.