Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ekreative/react-native-braintree
A react native interface for integrating payments using Braintree
https://github.com/ekreative/react-native-braintree
android braintree hacktoberfest ios react-native
Last synced: 2 months ago
JSON representation
A react native interface for integrating payments using Braintree
- Host: GitHub
- URL: https://github.com/ekreative/react-native-braintree
- Owner: ekreative
- Created: 2021-05-25T11:11:01.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-03-11T18:46:30.000Z (11 months ago)
- Last Synced: 2024-04-14T06:05:25.438Z (10 months ago)
- Topics: android, braintree, hacktoberfest, ios, react-native
- Language: Java
- Homepage: https://github.com/ekreative/react-native-braintree
- Size: 711 KB
- Stars: 39
- Watchers: 5
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
Awesome Lists containing this project
README
# Take a look at the https://github.com/msasinowski/react-native-expo-braintree
## Getting started
## Android Specific
Add this to your `build.gradle`
```groovy
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`:
```xml
...
```
If you need to specify a custom `appLinkReturnUrl`, you may do so:
```xml
...
```
You will need to pass this value to to `RNBraintree.showPayPalModule` as an option (see **Show PayPall module** below).
**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.**
```
## iOS Specific
```bash
cd ios
pod install
```
###### Configure a new URL scheme
Add 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:
```xml
CFBundleURLTypes
CFBundleTypeRole
Editor
CFBundleURLName
com.myapp
CFBundleURLSchemes
com.myapp.payments
```
###### Update your code
In your `AppDelegate.m`:
```objective-c
#import "BraintreeCore.h"
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[BTAppContextSwitcher setReturnURLScheme:self.paymentsURLScheme];
}
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary *)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"];
}
```
## Usage
##### Show PayPall module
```javascript
import RNBraintree from '@ekreative/react-native-braintree';
RNBraintree.showPayPalModule({
clientToken: 'CLIENT_TOKEN_GENERATED_ON_SERVER_SIDE',
amount: '1.0',
currencyCode: 'EUR',
// Change button text to “Complete Purchase", optional
userAction: 'commit',
// Define a custom return URL for Android, optional
appLinkReturnUrl: 'com.application.braintree.custom',
})
.then(result => console.log(result))
.catch((error) => console.log(error));
```
##### Card tokenization
```javascript
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));
```
##### Make Payment
```javascript
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));
```
##### Request PayPal billing agreement
```javascript
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));
```
### iOS
##### Check if Apple Pay is available
```javascript
import RNBraintree from '@ekreative/react-native-braintree';
console.log(RNBraintree.isApplePayAvailable())
```
##### Make payment using Apple Pay
```javascript
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));
```
### Android
##### Make payment using Google Pay
```javascript
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));
```
## TODO
- [ ] Android. Check if we can split the logic in the `getDeviceData` method to call `new DataCollector(mBraintreeClient).collectDeviceData()` only once (it seems like it's currently may be called a second time from the `setup` method) https://github.com/ekreative/react-native-braintree/pull/37#issuecomment-1752470507
- [ ] iOS. Try to use the new `getDeviceData` method in other methods, such as `tokenizeCard`, `showPayPalModule` https://github.com/ekreative/react-native-braintree/pull/37#issuecomment-1752470507
## Useful Links and Resources
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
## Contributors