Payment processor/braintree (#7)

* Add Braintree support

* Add Braintree example

* Update docs

README.md

@@ -13,7 +13,7 @@ __Features__
 - __Effective__. Faster checkouts that increase conversion.
 - __Future-proof__. Use a W3C Standards API, supported by companies like Google, Firefox and others.
 - __Cross-platform.__ Share payments code between your iOS and web apps.
-- __Payment Processor Support__. Process payments with payment processors like Stripe.
+- __Payment Processor Support__. Process payments with payment processors like Braintree and Stripe.
 
 
 <img width="280px" src="https://user-images.githubusercontent.com/1627824/27758096-9fc6bf9a-5dc1-11e7-9d8f-b2d409302fc7.gif" />
@@ -330,6 +330,7 @@ paymentRequest.show()
 
 ## Payment Processors
 - [Stripe](#stripe)
+- [Braintree](#braintree)
 
 ### Stripe
 #### Creating an Apple Pay certificate
@@ -343,9 +344,9 @@ Finally, in Xcode:
 2. Select `Build Settings` and search for `Framework Search Paths`
 3. Then add the path to where you added the Framework (remember, it's relative to `/node_modules/react-native-payments/lib/ios`)
 
-<img width="1000" alt="screen shot 2017-07-16 at 11 11 13 am" src="https://user-images.githubusercontent.com/1627824/28250182-cb47cd1e-6a17-11e7-9d67-47f35f0757bd.png">
+<img width="1000" alt="xcode-stripe" src="https://user-images.githubusercontent.com/1627824/28250182-cb47cd1e-6a17-11e7-9d67-47f35f0757bd.png">
 
-#### Adding your Stripe Tokens
+#### Adding your Stripe Config
 Now that you've added Stripe's SDK to your app, you're setup to use Stripe as a payment processor.
 
 In order to do so, you'll need to define a `paymentMethodTokenizationParameters` on your `PaymentMethodData` with Stripe specific parameters.  Here's an example of what Stripe `paramaters` look like:
@@ -372,6 +373,48 @@ In order to do so, you'll need to define a `paymentMethodTokenizationParameters`
 
 Now you're all set to receive Stripe payment tokens in your `PaymentResponse`.
 
+### Braintree
+#### Creating an Apple Pay certificate
+Follow Braintree's [documentation](https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4#apple-pay-certificate-request-and-provisioning) on how to create and upload the Apple Pay certificate back to Braintree.
+
+#### Adding and Linking the Braintree SDK
+Next, you'll need to add Braintree's SDK to your project.  You can install it by following one of the methods [listed in Braintree's documentation](https://github.com/braintree/braintree_ios#installation).
+
+Finally, in Xcode:
+1. Select the `ReactNativePayments` project from the left sidebar (under Libraries)
+2. Select `Build Settings` and search for `Header Search Paths`
+3. Then add the path to where you added the Library (remember, it's relative to `/node_modules/react-native-payments/lib/ios`)
+
+<img width="1000" alt="xcode-braintree" src="https://user-images.githubusercontent.com/1627824/28300092-e5a218d4-6b31-11e7-8234-8f2fdf81081b.png">
+
+
+#### Adding your Braintree Config
+Now that you've added Braintree's SDK to your app, you're setup to use Braintree as a payment processor.
+
+In order to do so, you'll need to define a `paymentMethodTokenizationParameters` on your `PaymentMethodData` with Braintree specific parameters.  Here's an example of what Braintree `paramaters` look like:
+
+```diff
+  const supportedMethods = [
+    {
+      supportedMethods: ['apple-pay'],
+      data: {
+        merchantIdentifier: 'merchant.com.your-app.namespace',
+        supportedNetworks: ['visa', 'mastercard'],
+        countryCode: 'US',
+        currencyCode: 'USD',
++       paymentMethodTokenizationParameters: {
++         parameters: {
++           'gateway': 'braintree',
++           'braintree:tokenizationKey': 'your-tokenization-key'
++         }
++       }
+      }
+    }
+  ];
+```
+
+Now you're all set to receive Braintree payment tokens in your `PaymentResponse`.
+
 ## API
 ### [PaymentRequest](https://github.com/naoufal/react-native-payments/tree/master/docs/PaymentRequest.md)
 ### [PaymentRequestUpdateEvent](https://github.com/naoufal/react-native-payments/tree/master/docs/PaymentRequestUpdateEvent.md)
@@ -396,6 +439,11 @@ Now you're all set to receive Stripe payment tokens in your `PaymentResponse`.
 - [Creating a new Apple Pay certificate](https://stripe.com/docs/apple-pay/apps#csr)
 - [Installing the Stripe SDK](https://stripe.com/docs/mobile/ios#getting-started)
 
+#### Braintree
+- [Creating a new Apple Pay certificate](https://developers.braintreepayments.com/guides/apple-pay/configuration/ios/v4#apple-pay-certificate-request-and-provisioning)
+- [Installing the Braintree SDK](https://github.com/braintree/braintree_ios#installation)
+
+
 # License
 Licensed under the MIT License, Copyright © 2017, [Naoufal Kadhom](https://twitter.com/naoufal).
 

examples/braintree/.babelrc

@@ -0,0 +1,3 @@
+{
+"presets": ["react-native"]
+}

examples/braintree/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/braintree/.flowconfig

@@ -0,0 +1,44 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+module.system=haste
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.37.0

examples/braintree/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/braintree/.gitignore

@@ -0,0 +1,59 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+android/app/libs
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots
+
+# Haul
+#
+haul-debug.log
+.happypack

examples/braintree/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/braintree/__tests__/index.android.js

@@ -0,0 +1,10 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.android.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(<Index />);
+});

examples/braintree/__tests__/index.ios.js

@@ -0,0 +1,10 @@
+import 'react-native';
+import React from 'react';
+import Index from '../index.ios.js';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  const tree = renderer.create(<Index />);
+});

examples/braintree/android/app/BUCK

@@ -0,0 +1,66 @@
+import re
+
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+lib_deps = []
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
+
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
+
+android_library(
+  name = 'all-libs',
+  exported_deps = lib_deps
+)
+
+android_library(
+  name = 'app-code',
+  srcs = glob([
+    'src/main/java/**/*.java',
+  ]),
+  deps = [
+    ':all-libs',
+    ':build_config',
+    ':res',
+  ],
+)
+
+android_build_config(
+  name = 'build_config',
+  package = 'com.braintreeexample',
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'com.braintreeexample',
+)
+
+android_binary(
+  name = 'app',
+  package_type = 'debug',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//android/keystores:debug',
+  deps = [
+    ':app-code',
+  ],
+)