An effort to merge react-native-braintree and react-native-braintree-android
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
Librariesand clickAdd Files to "Your Project Name"Look undernode_modules/react-native-braintree-xplatand addRCTBraintree.xcodeproj. - Add
libRCTBraintree.atoBuild Phases -> Link Binary With Libraries - Done!
Run npm install react-native-braintree-xplat --save
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 com.pw.droplet.braintree.BraintreePackage; // <--- Import Package
import android.content.Intent; // <--- Import Intent
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BraintreePackage() // <--- Initialize the package
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}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 com.pw.droplet.braintree.BraintreePackage; // <--- Import Package
import android.content.Intent; // <--- Import Intent
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript.
* This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return "example";
}
/**
* Returns whether dev mode should be enabled.
* This enables e.g. the dev menu.
*/
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
/**
* A list of packages used by the app. If the app uses additional views
* or modules besides the default ones, add more packages here.
*/
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BraintreePackage() // <--- Initialize the Package
);
}
}var BTClient = require('react-native-braintree-xplat');
BTClient.setup(<token>);You can find a demo client token here.
v.zero
BTClient.showPaymentViewController(options).then(function(nonce) {
//payment succeeded, pass nonce to server
})
.catch(function(err) {
//error handling
});Options
- [iOS] bgColor - Background color for the view.
- [iOS] tintColor - Tint color for the view.
- [iOS] barBgColor - Background color for the navbar.
- [iOS] barTintColor - Tint color for the navbar.
- [iOS] callToActionText - Text for call to action button. (Works for both Android and iOS)
- threeDSecure - If you want to enable 3DSecure, pass an object with an
amountkey that takes a number value
Example:
const options = {
bgColor: '#FFF',
tintColor: 'orange',
callToActionText: 'Save',
threeDSecure: {
amount: 1.0
}
}PayPal only
BTClient.showPayPalViewController().then(function(nonce) {
//payment succeeded, pass nonce to server
})
.catch(function(err) {
//error handling
});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.getCardNonce(card).then(function(nonce) {
//payment succeeded, pass nonce to server
})
.catch(function(err) {
//error handling
});
// 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,
}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
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>your.bundle.id</string>
<key>CFBundleURLSchemes</key>
<array>
<string>your.bundle.id.payments</string>
</array>
</dict>
</array>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>com.paypal.ppclient.touch.v1</string>
<string>com.paypal.ppclient.touch.v2</string>
<string>com.venmo.touch.v2</string>
</array>- For iOS: Use setupWithURLScheme instead, passing the url scheme you have registered in previous step
var BTClient = require('react-native-braintree');
BTClient.setupWithURLScheme(token, 'your.bundle.id.payments'); if (Platform.OS === 'ios') {
BTClient.setupWithURLScheme(token, 'your.bundle.id.payments');
} else {
BTClient.setup(token);
}- Add this delegate method (callback) to your AppDelegate.m
#import "RCTBraintree.h"
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {
return [[RCTBraintree sharedInstance] application:application openURL:url sourceApplication:sourceApplication annotation:annotation];
}Big thanks to @alanhhwong and @surialabs for the original ios & android modules.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent