react-native-braintree-xplat
An effort to merge react-native-braintree and react-native-braintree-android
iOS Installation
You can use the React Native CLI to add native dependencies automatically:
$ react-native link
or do it manually as described below:
- Run
npm install react-native-braintree-xplat --save
- Open your project in XCode, right click on
Libraries
and clickAdd Files to "Your Project Name"
Look undernode_modules/react-native-braintree-xplat
and addRCTBraintree.xcodeproj
. - Add
libRCTBraintree.a
toBuild Phases -> Link Binary With Libraries
- Done!
Android Installation
Run npm install react-native-braintree-xplat --save
RN 0.29 and over
In android/settings.gradle
... include ':react-native-braintree-xplat'project(':react-native-braintree-xplat').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-braintree-xplat/android')
In android/app/build.gradle
... dependencies { ... compile project(':react-native-braintree-xplat')}
Register module (in MainApplication.java
)
// <--- Import Package // <--- Import Intent
RN 0.28 and under
In android/settings.gradle
... include ':react-native-braintree-xplat'project(':react-native-braintree-xplat').projectDir = file('../node_modules/react-native-braintree-xplat/android')
In android/app/build.gradle
... dependencies { ... compile project(':react-native-braintree-xplat')}
Register module (in MainActivity.java
)
// <--- Import Package // <--- Import Intent
Usage
Setup
var BTClient = ;BTClient;
You can find a demo client token here.
Show Payment Screen (Android & iOS)
v.zero
BTClient;
Options (iOS only)
- bgColor - Background color for the view.
- tintColor - Tint color for the view.
- barBgColor - Background color for the navbar.
- barTintColor - Tint color for the navbar.
- callToActionText - Text for call to action button. (Works for both Android and iOS)
Example:
const options = bgColor: '#FFF' tintColor: 'orange' callToActionText: 'Save'
PayPal only
BTClient;
Custom Integration
If you only want to tokenize credit card information, you can use the following:
const card = number: "4111111111111111" expirationDate: "10/20" // or "10/2020" or any valid date cvv: "400" BTClient; // Full list of card parameters:type Card = number: string cvv: string expirationDate: string cardholderName: string firstName: string lastName: string company: string countryName: string countryCodeAlpha2: string countryCodeAlpha3: string countryCodeNumeric: string locality: string postalCode: string region: string streetAddress: string extendedAddress: string
One Touch on iOS
To take advantage of One Touch, there are additional setup required:
- Register a URL scheme in Xcode (should always start with YOUR Bundle ID) More info here TL;DR
Add CFBundleURLTypes to Info.Plist
<key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>yourbundleid</string> <key>CFBundleURLSchemes</key> <array> <string>yourbundleidpayments</string> </array> </dict> </array>
WhiteList
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
<key>LSApplicationQueriesSchemes</key> <array> <string>compaypalppclienttouchv1</string> <string>compaypalppclienttouchv2</string> <string>comvenmotouchv2</string> </array>
- For iOS: Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
var BTClient = ;BTClient;
#### For xplat, you can do something like this:
if PlatformOS === 'ios' BTClient; else BTClient;
- Add this delegate method (callback) to your AppDelegate.m
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
Credits
Big thanks to @alanhhwong and @surialabs for the original ios & android modules.