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: about 1 month 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 (almost 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 (6 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).

![Accepts Credit/Debit Cards](/Screenshots/vzero.png)

## 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)

  ![Register URL Scheme](/Screenshots/urlscheme.png)

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)`

  ![Accepts Credit/Debit Cards](/Screenshots/linker.png)

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.

![Remove Libraries](/Screenshots/removeLibraries.png)

## 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.