react-native-braintree-vzero
npm module for react-native apps to integrate Braintree v.zero SDK.
Example
iOS
Installation
-
react-native init BraintreeDemo
(skip for existing projects) -
Run
npm install react-native-braintree-vzero --save
to add the package -
Run
rnpm link
(First runnpm install rnpm -g
if you don't havernpm
already)or
Use manual instructions under
Linking Libraries
https://facebook.github.io/react-native/docs/linking-libraries-ios.html -
Create a group called Frameworks and add the Braintree iOS frameworks from
$(SRCROOT)/../node_modules/react-native-braintree-vzero/ios
path. -
Go to General -> Embedded Binaries and add the Braintree iOS frameworks from the Frameworks group created from above step.
-
Make sure Other Linker Flags has
$(inherited)
,-ObjC
and-lc++
. -
Add
$(SRCROOT)/../node_modules/react-native-braintree-vzero/ios
under Framework Search Paths. -
If your app is built using iOS 9 as its Base SDK, then you must add URLs to a whitelist in your app's
info.plist
:
LSApplicationQueriesSchemes com.paypal.ppclient.touch.v1 com.paypal.ppclient.touch.v2 com.venmo.touch.v2
- Skip if you don't need PayPal and/or One Touch. There are two choices we can adapt for URLSchemes. For now, we'll stick to the one recommended by official Braintree iOS setup guidelines. Goto Info -> URL Types and add
org.your.bundle.indentifier.payments
and below lines to AppDelegate.m of your iOS project.
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
Usage
CommonJS
var BraintreeClient = ;
ES6
;
Initializing Braintree client
var clientToken = 'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiI2YWRjN2YwZTY1MjkwYWY1YjIxZDBmYmFjYjMzNjdjMzE3MTAyOGEwNmJmNjA1NDkwMmNkOWRkOTlkMDdmNjg5fGNyZWF0ZWRfYXQ9MjAxNi0xMC0yOFQwMTo0OTo1NS4yNDQ5NjM0NDIrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0='; BraintreeClient;
Presenting Braintree Drop-In UI
var options = bgColor: tintColor: barBgColor: barTintColor: paymentControllertitle: 'Pay with Braintree v.zero' submitButtonTitle: 'Pay'; BraintreeClient;
Presenting PayPal UI
BraintreeClient;
Get card nonce for Custom Credit Card UI
var credtCardNumber = '4111111111111111' expMonth = '12' expYear = '2020' cvvNumber = '123'; BraintreeClient;
Android
Installation
-
react-native init BraintreeDemo
(skip for existing projects) -
Run
npm install react-native-braintree-vzero --save
to add the package -
Add the following to
android/settings.gradle
include ':react-native-braintree-vzero'.projectDir = new File(rootProject.projectDir, '../node_modules/react-native-braintree-vzero/android')
- Add the following to
android/app/build.gradle
dependencies { // ... compile // ... }
- Edit
android/src/.../MainApplication.java
// ... // <--- Import Package // <--- Import Intent // .. // .. @Override protected List<ReactPackage> { return Arrays.<ReactPackage>; } }; // ..
- Browser switch setup
For PayPal a URL scheme must be defined to accept return browser switches.
Edit your AndroidManifest.xml
to include BraintreeBrowserSwitchActivity
and set the android:scheme
:
Usage
CommonJS
var BraintreeClient = ;
ES6
;
Initializing Braintree client
var clientToken = 'eyJ2ZXJzaW9uIjoyLCJhdXRob3JpemF0aW9uRmluZ2VycHJpbnQiOiI2YWRjN2YwZTY1MjkwYWY1YjIxZDBmYmFjYjMzNjdjMzE3MTAyOGEwNmJmNjA1NDkwMmNkOWRkOTlkMDdmNjg5fGNyZWF0ZWRfYXQ9MjAxNi0xMC0yOFQwMTo0OTo1NS4yNDQ5NjM0NDIrMDAwMFx1MDAyNm1lcmNoYW50X2lkPTM0OHBrOWNnZjNiZ3l3MmJcdTAwMjZwdWJsaWNfa2V5PTJuMjQ3ZHY4OWJxOXZtcHIiLCJjb25maWdVcmwiOiJodHRwczovL2FwaS5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tOjQ0My9tZXJjaGFudHMvMzQ4cGs5Y2dmM2JneXcyYi9jbGllbnRfYXBpL3YxL2NvbmZpZ3VyYXRpb24iLCJjaGFsbGVuZ2VzIjpbXSwiZW52aXJvbm1lbnQiOiJzYW5kYm94IiwiY2xpZW50QXBpVXJsIjoiaHR0cHM6Ly9hcGkuc2FuZGJveC5icmFpbnRyZWVnYXRld2F5LmNvbTo0NDMvbWVyY2hhbnRzLzM0OHBrOWNnZjNiZ3l3MmIvY2xpZW50X2FwaSIsImFzc2V0c1VybCI6Imh0dHBzOi8vYXNzZXRzLmJyYWludHJlZWdhdGV3YXkuY29tIiwiYXV0aFVybCI6Imh0dHBzOi8vYXV0aC52ZW5tby5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tIiwiYW5hbHl0aWNzIjp7InVybCI6Imh0dHBzOi8vY2xpZW50LWFuYWx5dGljcy5zYW5kYm94LmJyYWludHJlZWdhdGV3YXkuY29tLzM0OHBrOWNnZjNiZ3l3MmIifSwidGhyZWVEU2VjdXJlRW5hYmxlZCI6dHJ1ZSwicGF5cGFsRW5hYmxlZCI6dHJ1ZSwicGF5cGFsIjp7ImRpc3BsYXlOYW1lIjoiQWNtZSBXaWRnZXRzLCBMdGQuIChTYW5kYm94KSIsImNsaWVudElkIjpudWxsLCJwcml2YWN5VXJsIjoiaHR0cDovL2V4YW1wbGUuY29tL3BwIiwidXNlckFncmVlbWVudFVybCI6Imh0dHA6Ly9leGFtcGxlLmNvbS90b3MiLCJiYXNlVXJsIjoiaHR0cHM6Ly9hc3NldHMuYnJhaW50cmVlZ2F0ZXdheS5jb20iLCJhc3NldHNVcmwiOiJodHRwczovL2NoZWNrb3V0LnBheXBhbC5jb20iLCJkaXJlY3RCYXNlVXJsIjpudWxsLCJhbGxvd0h0dHAiOnRydWUsImVudmlyb25tZW50Tm9OZXR3b3JrIjp0cnVlLCJlbnZpcm9ubWVudCI6Im9mZmxpbmUiLCJ1bnZldHRlZE1lcmNoYW50IjpmYWxzZSwiYnJhaW50cmVlQ2xpZW50SWQiOiJtYXN0ZXJjbGllbnQzIiwiYmlsbGluZ0FncmVlbWVudHNFbmFibGVkIjp0cnVlLCJtZXJjaGFudEFjY291bnRJZCI6ImFjbWV3aWRnZXRzbHRkc2FuZGJveCIsImN1cnJlbmN5SXNvQ29kZSI6IlVTRCJ9LCJjb2luYmFzZUVuYWJsZWQiOmZhbHNlLCJtZXJjaGFudElkIjoiMzQ4cGs5Y2dmM2JneXcyYiIsInZlbm1vIjoib2ZmIn0='; BraintreeClient;
Presenting Braintree Drop-In UI
BraintreeClient;
Presenting PayPal UI
BraintreeClient;
Get card nonce for Custom Credit Card UI
BraintreeClient;
References
iOS: https://github.com/alanhhwong/react-native-braintree
Android: https://github.com/kraffslol/react-native-braintree-xplat
iOS and Android merged package: https://github.com/kraffslol/react-native-braintree-xplat