| Published Version | Package Version | Android SDK | iOS SDK |
|---|---|---|---|
 |
v2.4.0 | 28 | 12.0 |
Add this to your build.gradle
allprojects {
repositories {
maven {
// Braintree 3D Secure
// https://developer.paypal.com/braintree/docs/guides/3d-secure/client-side/android/v4#generate-a-client-token
url "https://cardinalcommerceprod.jfrog.io/artifactory/android"
credentials {
username 'braintree_team_sdk'
password 'AKCp8jQcoDy2hxSWhDAUQKXLDPDx6NYRkqrgFLRc3qDrayg6rrCbJpsKKyMwaykVL8FWusJpp'
}
}
}
}In Your AndroidManifest.xml, android:allowBackup="false" can be replaced android:allowBackup="true", it is responsible for app backup.
Also, add this intent-filter to your main activity in AndroidManifest.xml
<activity>
...
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="${applicationId}.braintree" />
</intent-filter>
</activity>
NOTE: Card payments do not work on rooted devices and Android Emulators
If your project uses Progurad, add the following lines into proguard-rules.pro file
-keep class com.cardinalcommerce.dependencies.internal.bouncycastle.**
-keep class com.cardinalcommerce.dependencies.internal.nimbusds.**
-keep class com.cardinalcommerce.shared.**
cd ios
pod installAdd a bundle url scheme {BUNDLE_IDENTIFIER}.payments in your app Info via XCode or manually in the Info.plist. In your Info.plist, you should have something like:
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleTypeRole</key>
<string>Editor</string>
<key>CFBundleURLName</key>
<string>com.myapp</string>
<key>CFBundleURLSchemes</key>
<array>
<string>com.myapp.payments</string>
</array>
</dict>
</array>In your AppDelegate.m:
#import "BraintreeCore.h"
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];
}
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
if ([url.scheme localizedCaseInsensitiveCompare:self.paymentsURLScheme] == NSOrderedSame) {
return [BTAppContextSwitcher handleOpenURL:url];
}
return [RCTLinkingManager application:application openURL:url options:options];
}
- (NSString *)paymentsURLScheme {
NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];
return [NSString stringWithFormat:@"%@.%@", bundleIdentifier, @"payments"];
}import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.showPayPalModule({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
amount: '1.0',
currencyCode: 'EUR'
})
.then(result => console.log(result))
.catch((error) => console.log(error));
import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.tokenizeCard({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
number: '1111222233334444',
expirationMonth: '11',
expirationYear: '24',
cvv: '123',
postalCode: '',
})
.then(result => console.log(result))
.catch((error) => console.log(error));import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.run3DSecureCheck({
// Optional if you ran `tokenizeCard()` or other Braintree methods before
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
nonce: 'CARD_NONCE',
amount: '122.00',
// Pass as many of the following fields as possible, but they're optional
email: '[email protected]',
firstname: '',
lastname: '',
phoneNumber: '',
streetAddress: '',
streetAddress2: '',
city: '',
region: '',
postalCode: '',
countryCode: ''
})
.then(result => console.log(result))
.catch((error) => console.log(error));import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.requestPayPalBillingAgreement({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
description: 'BILLING_AGRREEMENT_DESCRIPTION',
localeCode: 'LOCALE_CODE'
})
.then(result => console.log(result))
.catch((error) => console.log(error));import RNBraintree from '@ekreative/react-native-braintree';
console.log(RNBraintree.isApplePayAvailable())import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.runApplePay({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
companyName: 'Company',
amount: '100.0',
currencyCode: 'EUR'
})
.then(result => console.log(result))
.catch((error) => console.log(error));import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.runGooglePay({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
amount: '100.0',
currencyCode: 'EUR'
})
.then(result => console.log(result))
.catch((error) => console.log(error));- Android. Check if we can split the logic in the
getDeviceDatamethod to callnew DataCollector(mBraintreeClient).collectDeviceData()only once (it seems like it's currently may be called a second time from thesetupmethod) #37 (comment) - iOS. Try to use the new
getDeviceDatamethod in other methods, such astokenizeCard,showPayPalModule#37 (comment)
If you want to read further you can follow these links
- https://reactnative.directory/?search=react-native-braintree
- https://reintech.io/blog/tutorial-for-react-developers-what-are-the-best-react-native-libraries-for-creating-mobile-payments
- https://reactnativeexample.com/a-react-native-interface-for-integrating-payments-using-braintree/
- https://www.npmjs.com/package/@ekreative/react-native-braintree
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent